/* =====================================================================
   UKŁAD STRONY GŁÓWNEJ

   Ten plik daje układ strony głównej (index.html) oraz wspólne menu
   i stopkę, które stoją na wszystkich podstronach. Wczytuje się PO
   style.css, który wnosi paletę, kroje pisma i podstawowe odstępy.

   Wszystkie klasy zaczynają się od `p-` (po „próbie", z której ten układ
   wyrósł), więc nie zderzają się ze starymi klasami w style.css, którymi
   dalej złożone są treści podstron.

   Podnosząc `?v=N` przy tym pliku, popraw go we WSZYSTKICH plikach HTML:
   grep -rn "uklad.css?v=" public/
   ===================================================================== */

:root {
  /* Trzy wartości dołożone do palety ze style.css, opisane w docs/marka.md.
     Terakota to róż Magdaleny (--accent-dark #f0d5c8) przyciemniony na tyle,
     żeby biały napis był na nim czytelny; stoi na wszystkich przyciskach
     akcji. Krem to tło pasów, o pół tonu cieplejsze od --bg-alt. */
  --p-terakota: #c07d5e;
  --p-terakota-ciemna: #a9684b;
  --p-krem: #f7f2ec;
}

body { background: var(--bg); }

.p-wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- pierwszy ekran: ciemna połowa + zdjęcie na całą wysokość ---------- */

.p-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #16181c;
  color: #fff;
}
.p-hero-tresc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 6.5rem) clamp(1.5rem, 5vw, 5rem);
  max-width: 40rem;
  margin-left: auto;
}
.p-hero h1 {
  font-family: var(--sans);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff;
  margin-bottom: 0.7em;
}
.p-hero h1 em { font-family: var(--serif-body); font-style: italic; font-weight: 700; }
.p-hero p { color: rgba(255, 255, 255, 0.82); }
.p-hero-foto { position: relative; }
.p-hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

/* Pola formularza: białe pigułki, jak we wzorze. */
.p-zapis { margin-top: 2rem; }
.p-zapis input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 1rem 1.5rem;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: 999px;
}
.p-zapis input[type="email"]::placeholder { color: var(--ink-muted); }
.p-zapis .btn {
  margin-top: 0.9rem;
  width: 100%;
  background: var(--p-terakota);
  color: #fff;
  border: 0;
}
.p-zapis .btn:hover, .p-zapis .btn:focus-visible { background: var(--p-terakota-ciemna); }
.p-zgoda {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}
.p-zgoda input { margin-top: 0.25rem; flex: none; }
.p-zgoda a { color: rgba(255, 255, 255, 0.85); }
.p-komunikat { margin-top: 1rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.85); }

/* ---------- pas „Moja praca to prostota" ---------- */

/* Miękka poświata zamiast płaskiego tła: dwa rozmyte koła w kolorach
   z palety, położone jedno na drugim. Wzór ma tu akwarelę; to jest jej
   odpowiednik zrobiony samym CSS-em, bez dokładania pliku graficznego. */
.p-mysl {
  position: relative;
  /* Niższy pas niż reszta: stoi tu jedno zdanie i kilka odnośników,
     więc nie potrzebuje pełnej wysokości sekcji. */
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem) clamp(4rem, 7vw, 6rem);
  background:
    radial-gradient(70% 90% at 15% 30%, var(--accent) 0%, rgba(251, 235, 228, 0) 70%),
    radial-gradient(60% 80% at 85% 60%, var(--accent-dark) 0%, rgba(240, 213, 200, 0) 72%),
    var(--bg-alt);
  overflow: hidden;
}
.p-mysl .p-wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.p-mysl h2 {
  font-family: var(--serif-body);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.6em;
}
.p-mysl h2 em { font-style: italic; font-weight: 700; }
.p-mysl-lead { max-width: 30rem; color: var(--ink); }
.p-mysl-lead a { color: var(--p-terakota-ciemna); text-underline-offset: 3px; }
.p-mysl-foto img {
  width: 100%;
  /* Kadr poziomy: pionowy rozpychał tę sekcję na cały ekran. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 2px;
}
/* Postrzępiona krawędź na dole pasa, jak we wzorze. */
.p-strzep {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(28px, 3.5vw, 52px);
  display: block;
  fill: var(--bg);
}

/* ---------- „pracuj ze mną" ---------- */

.p-praca { padding-block: var(--section-y); }
.p-praca .p-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.p-praca-tytul {
  font-family: var(--serif-body);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 1.2em;
}
.p-praca-tytul em { font-style: italic; font-weight: 700; }
.p-cytat { margin: 0; }
.p-cytat blockquote {
  margin: 0 0 1.5rem;
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--ink);
}
.p-cytat hr { border: 0; border-top: 1px solid var(--ink); margin: 0 0 1.5rem; }
.p-cytat figcaption {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 1.25rem;
}

.p-karty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
.p-karta img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-bottom: 1.5rem;
}
.p-karta h3 {
  font-family: var(--serif-body);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.5em;
}
.p-karta p { font-size: 0.9375rem; }
/* Wykaz konsultacji wewnątrz kafelka: bez punktorów, wąskie wiersze,
   żeby czytało się jak spis, a nie jak drugi akapit. */
.p-lista {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.p-lista li { margin-bottom: 0.4rem; }
.p-lista a { color: var(--ink); text-underline-offset: 3px; }

/* Odnośnik z kropkowanym podkreśleniem, jak we wzorze. */
.p-wiecej {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px dotted var(--ink);
  padding-bottom: 0.35rem;
}
.p-wiecej:hover, .p-wiecej:focus-visible { border-bottom-style: solid; }

/* Kafelki mają różnie długie opisy, więc „Dowiedz się więcej" wypadało
   w każdym na innej wysokości. Kolumna z flexem i margin-top: auto spycha
   odnośnik na spód kafelka: w całym rzędzie stoi w jednej linii.
   align-self trzyma kropkowane podkreślenie przy tekście, żeby nie
   rozciągało się na całą szerokość kafelka. */
.p-karta,
.p-pozycja {
  display: flex;
  flex-direction: column;
}
.p-karta > .p-wiecej,
.p-pozycja > .p-wiecej {
  margin-top: auto;
  align-self: flex-start;
  padding-top: 1.1rem;
}

/* ---------- szeroki pas z jednym programem ---------- */

.p-program { background: var(--p-krem); padding-block: var(--section-y); }
.p-program .p-wrap {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.p-nadtytul {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1rem;
}
.p-program h2 {
  font-family: var(--serif-body);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.55em;
}
.p-program h2 em { font-style: italic; font-weight: 700; }
.p-program-foto img { width: 100%; border-radius: 2px; }

/* Czarna pigułka ze strzałką. */
.p-btn-strzalka {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.75rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  text-decoration: none;
}
.p-btn-strzalka:hover, .p-btn-strzalka:focus-visible { background: var(--ink-soft); }
.p-btn-strzalka svg { width: 1.05rem; height: 1.05rem; fill: currentColor; flex: none; }

/* ---------- pas z prezentem, zdjęcie na całą szerokość ---------- */

.p-prezent {
  position: relative;
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  isolation: isolate;
}
.p-prezent-tlo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zdjęcie musi być ciemne u źródła, nie tylko przykryte warstwą.
     Na jaśniejszym kadrze biały napis inaczej ginie. */
  filter: brightness(0.42) saturate(0.85);
}
.p-prezent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(17, 17, 17, 0.55), rgba(17, 17, 17, 0.1));
}
.p-prezent .p-wrap {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.p-prezent-okladka img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.p-prezent h2 {
  font-family: var(--serif-body);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  margin-bottom: 0.4em;
}
.p-prezent h2 em { font-style: italic; font-weight: 700; }
.p-prezent .p-nadtytul { color: rgba(255, 255, 255, 0.85); }
.p-prezent p { color: rgba(255, 255, 255, 0.9); max-width: 44rem; }

/* ---------- stopka ---------- */

.p-footer { background: var(--p-krem); padding-block: clamp(3rem, 7vw, 5rem); }
/* Stopka stoi w dwóch rzędach: u góry znak z ikonami i przycisk „Napisz
   do mnie", pod spodem cztery kolumny odnośników. Wcześniej wszystko
   szło w jednym rzędzie i przy sześciu kolumnach nazwy programów łamały
   się na dwie linie, a napisy na przyciskach na trzy. */
.p-footer-siatka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 2.6vw, 2.5rem);
  align-items: start;
}
.p-footer-znak { grid-column: 1 / 3; grid-row: 1; }
.p-footer-cta { grid-column: 3 / 5; grid-row: 1; }
.p-footer-siatka > div:not(.p-footer-znak):not(.p-footer-cta) { grid-row: 2; }
.p-footer h3 {
  font-family: var(--serif-body);
  font-weight: 400;
  font-style: italic;
  font-size: 1.375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.8em;
}
.p-footer ul { list-style: none; margin: 0; padding: 0; }
.p-footer li { margin-bottom: 0.55rem; }
.p-footer a { color: var(--ink-soft); text-decoration: none; }
.p-footer a:hover, .p-footer a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.p-footer-znak img {
  width: 200px;
  height: auto;
  margin-bottom: 1.25rem;
  mix-blend-mode: multiply;
}
.p-socials { display: flex; gap: 0.9rem; }
.p-socials a { display: inline-flex; color: var(--ink); }
.p-socials svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }

.p-footer-cta { text-align: right; }
.p-btn-terakota {
  display: inline-block;
  padding: 0.95rem 1.9rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--p-terakota);
  border-radius: 999px;
  text-decoration: none;
}
.p-btn-terakota:hover, .p-btn-terakota:focus-visible { background: var(--p-terakota-ciemna); }
/* Napis na przycisku nigdy się nie łamie: „Odbierz e-book" w dwóch
   liniach wyglądał jak błąd. */
.p-btn-terakota, .p-footer-cta .p-btn-czarny { white-space: nowrap; }
.p-footer-cta hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }
.p-footer-cta-tekst {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.p-btn-czarny {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  /* Interlinia i brak ramki wpisane wprost, bo <button> nie dziedziczy
     interlinii po stronie i domyślnie ma własną ramkę, a <a> nie ma żadnej.
     Bez tego przycisk-guzik był wyższy od przycisku-odnośnika i trzy
     prezenty w „Poczuj" nie stawały w jednej linii. */
  line-height: 1.72;
  border: 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  text-decoration: none;
}
.p-btn-czarny:hover, .p-btn-czarny:focus-visible { background: var(--ink-soft); }
.p-kolofon {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-muted);
  text-align: center;
}

/* ---------- pas z Instagrama ---------- */

/* Sześć kadrów na całą szerokość ekranu, bez marginesu bocznego: pas ma
   być tym, na co się patrzy, a nie kolejną kolumną tekstu. Kafelki są
   kwadratowe, więc zdjęcia w innych proporcjach przycinają się przez
   object-fit. */
.p-instagram { padding-block: var(--section-y); background: var(--bg); }
.p-naglowek--srodek { text-align: center; margin-inline: auto; }
/* Nagłówki mają swoją szerokość (żeby długi tytuł łamał się ładnie), więc
   samo text-align nie ustawia ich na środku pasa. Stąd margines auto. */
.p-naglowek--srodek > * { margin-inline: auto; }
.p-instagram-siatka {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.p-instagram-siatka a {
  display: block;
  overflow: hidden;
  background: var(--p-krem);
}
.p-instagram-siatka img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 400ms ease;
}
.p-instagram-siatka a:hover img,
.p-instagram-siatka a:focus-visible img { transform: scale(1.04); }
.p-instagram-stopka { text-align: left; }
.p-instagram-stopka .p-btn-strzalka { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ---------- przyciski na podstronach ---------- */

/* Treści podstron dalej stoją na klasach ze style.css, ale przyciski mają
   mówić tym samym językiem co strona główna: terakota, wersaliki, ten sam
   kształt. Bez tego „Umów sesję" na podstronie było blade i różowe, a na
   stronie głównej wszystkie przyciski są terakotowe albo czarne. */
.btn {
  background: var(--p-terakota);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.95rem 1.9rem;
}
.btn:hover, .btn:focus-visible { background: var(--p-terakota-ciemna); }

/* ---------- węższe ekrany ---------- */

@media (max-width: 900px) {
  .p-hero { grid-template-columns: 1fr; }
  .p-hero-foto { order: -1; aspect-ratio: 4 / 3; }
  .p-hero-tresc { margin-left: 0; max-width: none; }

  .p-mysl .p-wrap,
  .p-praca .p-wrap,
  .p-program .p-wrap,
  .p-prezent .p-wrap { grid-template-columns: 1fr; }

  .p-mysl-foto { max-width: 22rem; }
  .p-program-foto { max-width: 24rem; }
  .p-prezent-okladka { max-width: 16rem; }

  .p-instagram-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .p-footer-siatka { grid-template-columns: 1fr 1fr; }
  .p-footer-znak { grid-column: 1 / -1; grid-row: auto; }
  .p-footer-cta { grid-column: 1 / -1; grid-row: auto; text-align: left; }
  .p-footer-siatka > div:not(.p-footer-znak):not(.p-footer-cta) { grid-row: auto; }

}

@media (max-width: 520px) {
  .p-karty { grid-template-columns: 1fr; }
  .p-instagram-siatka { grid-template-columns: 1fr 1fr; }
  /* Na wąskim ekranie „Obserwuj @magdalenawangrat" łamało się na dwie
     linie i przycisk robił się kanciasty. */
  .p-btn-strzalka { font-size: 0.75rem; padding: 0.85rem 1.4rem; gap: 0.6rem; }
  .p-footer-siatka { grid-template-columns: 1fr; }
  .p-footer-cta { text-align: left; }
}

/* =====================================================================
   SEKCJE DOŁOŻONE PRZY ROZBUDOWIE DO PEŁNEJ STRONY
   ===================================================================== */

/* ---------- nagłówek sekcji ---------- */

.p-naglowek { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.p-naglowek h2 {
  font-family: var(--serif-body);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.4em;
}
.p-naglowek h2 em { font-style: italic; font-weight: 700; }
.p-wstep { max-width: 36rem; }

/* ---------- programy jeden na jeden ---------- */

.p-programy { padding-block: var(--section-y); background: var(--p-krem); }
.p-programy--jasny { background: var(--bg); }
.p-siatka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}
/* Masterclassy są dwa, więc stoją w dwóch szerszych kolumnach. */
.p-siatka--dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; }
.p-pozycja img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-bottom: 1.25rem;
}
.p-siatka--dwie .p-pozycja img { aspect-ratio: 4 / 3; }
.p-pozycja h3 {
  font-family: var(--serif-body);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.2em;
}
.p-pod {
  font-family: var(--serif-body);
  font-size: 1.0625rem;
  color: var(--ink-muted);
  margin-bottom: 1rem;
}
.p-pozycja .p-cena,
.p-program .p-cena {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  font-family: var(--serif-body);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.p-pozycja .p-cena span,
.p-program .p-cena span {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.p-pozycja p { font-size: 0.9375rem; }

/* ---------- pas z programem: wariant jasny i odbity ---------- */

.p-program--jasny { background: var(--bg); }
/* Szeroki pas potrafi też pokazać jedną pozycję z oferty (masterclass):
   podtytuł i cena wchodzą wtedy zaraz pod tytuł, jak w kafelku. */
.p-program h2 + .p-pod { margin-top: -0.4rem; }
.p-program .p-cena { margin-bottom: 1.25rem; }
.p-program--odbity .p-wrap { grid-template-columns: 0.75fr 1.25fr; }
.p-program--odbity .p-program-foto { order: -1; }
.p-mail {
  font-family: var(--serif-body);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  margin-top: 1.25rem;
}

/* ---------- obszary: moja praca, poczuj, etapy, FAQ ---------- */

.p-obszary { padding-block: var(--section-y); }
.p-obszary--jasny { background: var(--p-krem); }
.p-obszary--biel { background: var(--bg); }
.p-cztery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.p-trzy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
/* „Poczuj" ma dziś dwa prezenty, nie trzy: w trzech kolumnach zostawałaby
   pusta dziura po prawej. */
.p-trzy--dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; }
.p-cztery h3, .p-trzy h3 {
  font-family: var(--serif-body);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.5em;
}
.p-cztery p, .p-trzy p { font-size: 0.9375rem; }
/* Ta sama zasada co w kafelkach: przyciski „Poczuj" schodzą na spód
   kolumny, żeby wszystkie trzy stały w jednej linii. */
.p-trzy > div {
  display: flex;
  flex-direction: column;
}
.p-trzy > div > p { margin-bottom: 1.25rem; }
.p-trzy .p-btn-czarny,
.p-trzy .p-osadz {
  margin-top: auto;
  align-self: flex-start;
}

/* Ramki odtwarzaczy wchodzą w miejsce przycisku po kliknięciu. */
.p-ramka { display: block; width: 100%; border: 0; border-radius: 4px; margin-top: 1.25rem; }
.p-ramka--wideo { aspect-ratio: 16 / 9; height: auto; }
.p-ramka--playlista { height: 152px; }

/* ---------- trzy etapy ---------- */

.p-etapy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-etapy li { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.p-etapy span {
  display: block;
  font-family: var(--serif-body);
  font-size: 2.5rem;
  font-style: italic;
  line-height: 1;
  color: var(--p-terakota);
  margin-bottom: 0.6rem;
}
.p-etapy p { margin: 0; }

/* ---------- FAQ ---------- */

.p-faq { max-width: 48rem; }
.p-faq details { border-top: 1px solid var(--rule); padding: 1.25rem 0; }
.p-faq details:last-child { border-bottom: 1px solid var(--rule); }
.p-faq summary {
  cursor: pointer;
  font-family: var(--serif-body);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--ink);
  list-style: none;
}
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after { content: " +"; color: var(--ink-muted); }
.p-faq details[open] summary::after { content: " –"; }
.p-faq details p { margin: 0.9rem 0 0; font-size: 0.9375rem; }

/* ---------- węższe ekrany ---------- */

@media (max-width: 900px) {

  .p-siatka { grid-template-columns: 1fr; }
  .p-cztery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-trzy, .p-etapy { grid-template-columns: 1fr; }
  .p-program--odbity .p-wrap { grid-template-columns: 1fr; }
  .p-program--odbity .p-program-foto { order: 0; max-width: 24rem; }
}

@media (max-width: 520px) {
  .p-cztery { grid-template-columns: 1fr; }
}


/* ---------- czerwone akcenty i pismo maszynowe ----------
   Czerwień --czerwien i krój --mono (Space Mono) tylko do drobnych
   podpisów: menu, nadtytuły, czas przy cenach, „Dowiedz się więcej”.
   Tytuły i tekst ciągły zostają w Cormorancie i Mulish. */
.p-nadtytul,
.p-pozycja .p-cena span,
.p-program .p-cena span,
.p-wiecej,
.nav > ul > li > a,
.nav .nav-grupa > a {
  font-family: var(--mono) !important;
  font-weight: 400 !important;
}
.p-nadtytul {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  letter-spacing: 0.24em !important;
}
.p-nadtytul::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--czerwien);
}
.p-hero .p-nadtytul { color: #c9ced4; }
.p-wiecej {
  letter-spacing: 0.14em;
  border-bottom: 2px solid var(--czerwien) !important;
}
.p-wiecej:hover, .p-wiecej:focus-visible { color: var(--czerwien); }
.nav a {
  font-size: 0.78rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav a:hover, .nav a:focus-visible { border-bottom-color: var(--czerwien) !important; }
.p-pozycja .p-cena::after,
.p-program .p-cena::after {
  content: "";
  flex-basis: 100%;
  width: 1.8rem;
  height: 3px;
  background: var(--czerwien);
  margin-top: 0.9rem;
}
.p-footer h3::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--czerwien);
  margin-right: 0.7rem;
  vertical-align: middle;
}
.p-btn-strzalka:hover, .p-btn-strzalka:focus-visible { background: var(--czerwien); }

/* Nadtytuły na podstronach (.eyebrow) tak samo jak .p-nadtytul na stronie głównej. */
.eyebrow {
  font-family: var(--mono) !important;
  font-weight: 400 !important;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  letter-spacing: 0.24em !important;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--czerwien);
}

/* ---------- druga droga na pierwszym ekranie i przycisk w menu ---------- */
.p-hero-druga {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  max-width: 34rem;
}
.p-hero-druga p { margin: 0 0 1.1rem; }
.p-btn-obrys {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.7rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.p-btn-obrys:hover, .p-btn-obrys:focus-visible { background: #fff; color: var(--ink); border-color: #fff; }
.nav .nav-cta a {
  display: inline-block;
  padding: 0.6rem 1.2rem !important;
  color: #fff !important;
  background: var(--ink);
  border: 0 !important;
  border-radius: 999px;
}
.nav .nav-cta a:hover, .nav .nav-cta a:focus-visible { background: var(--czerwien); }

/* ---------- pierwszy ekran mieści się w oknie razem z przyciskiem rozmowy ----------
   Na komputerze zapis na e-book jest w jednym rzędzie, a odstępy i tytuł
   zależą od wysokości okna. Na telefonie zdjęcie jest niższe. */
@media (min-width: 901px) {
  .p-hero { min-height: calc(100svh - 4.6rem); }
  .p-hero-tresc { padding-block: clamp(1rem, 3vh, 2.5rem); }
  .p-hero h1 {
    font-size: clamp(1.6rem, min(3vw, 5.2vh), 2.6rem);
    margin-bottom: 0.45em;
  }
  .p-hero .p-nadtytul { margin-bottom: 0.6rem; }
  .p-hero-tresc > p:not(.p-nadtytul) {
    font-size: clamp(0.9rem, 2.1vh, 1.0625rem);
    line-height: 1.5;
    margin-bottom: 0;
  }
  .p-zapis { margin-top: 1.1rem; }
  .p-zapis .zapis-pole { display: flex; gap: 0.6rem; }
  .p-zapis input[type="email"] { padding: 0.8rem 1.25rem; }
  .p-zapis .btn { width: auto; flex: none; margin-top: 0; padding-inline: 1.6rem; }
  .p-zgoda { margin-top: 0.7rem; font-size: 0.75rem; line-height: 1.45; }
  .p-komunikat { margin-top: 0.5rem; }
  .p-hero-druga { margin-top: 1rem; padding-top: 1rem; }
  .p-hero-druga p { margin-bottom: 0.7rem; font-size: 0.9rem; line-height: 1.45; }
}
@media (max-width: 900px) {
  .p-hero-foto { aspect-ratio: 16 / 9; }
}

/* ---------- pasek „Rozmowy z domem" nad pierwszym ekranem ---------- */
.p-pasek-kurs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.5rem;
  background: var(--p-terakota);
  color: var(--ink);
  padding: 0.7rem var(--gutter);
}
.p-pasek-kurs p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: center;
  color: var(--ink);
}
.p-pasek-kurs strong {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-right: 0.75rem;
}
.p-pasek-kurs strong::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  background: var(--czerwien);
  margin-right: 0.6rem;
  outline: 2px solid rgba(255, 255, 255, 0.55);
}
.p-pasek-kurs a {
  flex: none;
  padding: 0.55rem 1.3rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
}
.p-pasek-kurs a:hover, .p-pasek-kurs a:focus-visible { background: #fff; color: var(--ink); }
@media (min-width: 901px) {
  .p-hero { min-height: calc(100svh - 4.6rem - 3.4rem); }
}
@media (max-width: 520px) {
  .p-pasek-kurs { gap: 0.5rem; padding-block: 0.6rem; }
  .p-pasek-kurs p span { display: none; }
  .p-pasek-kurs strong { margin-right: 0; }
}

/* Rozwinięcia menu (Programy, Poczuj…) tym samym krojem co menu główne. */
.nav .nav-pod a {
  font-family: var(--mono) !important;
  font-weight: 400 !important;
}
/* =====================================================================
   PALETA „LEN" (od 16.10.2026 na wszystkich stronach): mech, paproć, ziemia,
   len i dom. Nadpisuje kolory ze style.css i dokłada zdjęcia na dwóch
   warstwach oraz szary kamień (.w-kamien). Opis: docs/marka.md.
   ===================================================================== */

:root {
  --bg: #f6f2ea;            /* len jasny */
  --bg-alt: #ece6d9;        /* len */
  --accent: #e6e8d9;        /* blady mech */
  --accent-dark: #cfd5bc;   /* mech rozjaśniony */
  --ink: #1f2119;           /* ziemista czerń */
  --ink-soft: #46483c;
  --ink-muted: #706f63;
  --rule: #d9d4c5;
  --p-terakota: #5a7f61;          /* jadeit naturalny: przyciski akcji (akcent), biały tekst 4,5:1 */
  --p-terakota-ciemna: #456b4d;   /* jadeit głęboki: pod kursorem */
  --p-krem: #f0eadd;
  --ziemia: #231e17;              /* ciemna ziemia: pierwszy ekran */
}

/* Logo to obrazek z białym tłem: na kremie ma się z nim zlać. */
.site-header { background: rgba(246, 242, 234, 0.92); }
.site-header .logo img,
.p-footer-znak img { mix-blend-mode: multiply; }

/* Pierwszy ekran: ziemia zamiast prawie czarnego. */
.p-hero { background: var(--ziemia); }
.p-hero .p-nadtytul { color: #d8d3c4; }
.p-zapis .btn { background: var(--p-terakota); }
.p-pasek-kurs { background: var(--accent-dark); }
.p-pasek-kurs p, .p-pasek-kurs strong { color: var(--ink); }
.p-pasek-kurs a { background: var(--ziemia); }
.p-pasek-kurs a:hover, .p-pasek-kurs a:focus-visible { background: #fff; color: var(--ink); }
.nav .nav-cta a { background: var(--ziemia); }

/* Zdjęcia programów w jednym tonie, żeby leżały obok siebie spokojnie. */
.p-pozycja img { filter: saturate(0.78) sepia(0.08) contrast(0.98); }

/* ---------- warstwy ---------- */
.w-scena { position: relative; overflow: hidden; isolation: isolate; }
.w-warstwa { position: absolute; will-change: transform; }
.w-ruch { will-change: transform; }
.w-tlo { inset: -14% 0; }
.w-tlo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.w-front { box-shadow: 0 30px 56px -24px rgba(20, 16, 10, 0.55); overflow: hidden; }
.w-front img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 1. pierwszy ekran: cień paproci w tle, Magdalena na wierzchu */
.p-hero-foto.w-scena { min-height: 100%; }
.p-hero-foto .w-tlo { inset: -12% 0; }
.p-hero-foto .w-front { top: 9%; bottom: 9%; right: 10%; aspect-ratio: 3 / 4; z-index: 2; }
.p-hero-foto .w-nakladka {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(35, 30, 23, 0.55), rgba(35, 30, 23, 0) 45%);
}

/* 2. kolaże w „O mnie" i „Rozmowach z domem" */
.w-kolaz { position: relative; margin: 0; }
.w-kolaz > .w-ruch img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.w-kolaz-przod {
  z-index: 2;
  border: 0.45rem solid var(--p-krem);
}
.w-kolaz--o-mnie .w-kolaz-przod { right: -7%; bottom: -7%; width: 46%; aspect-ratio: 3 / 4; }
.w-kolaz--kurs .w-kolaz-przod { left: -11%; bottom: -7%; width: 60%; aspect-ratio: 1 / 1; }
.w-kolaz--o-mnie > .w-ruch img { aspect-ratio: 1010 / 1583; }

/* 3. Joga Nidra: tło płynie wolniej, okładka na wierzchu szybciej */
.p-prezent { overflow: hidden; }
.p-prezent-tlo.w-ruch { inset: -15% 0 auto 0; height: 130%; }

@media (max-width: 900px) {
  .p-hero-foto .w-front { top: 7%; bottom: 7%; right: 8%; }
  .w-kolaz--o-mnie .w-kolaz-przod { right: -3%; }
  .w-kolaz--kurs .w-kolaz-przod { left: -3%; }
  .w-kolaz { margin-bottom: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .w-warstwa, .w-ruch { transform: none !important; }
}

/* ---------- cienie jako tło prawie każdej sekcji ---------- */
.w-sekcja { position: relative; isolation: isolate; overflow: hidden; }
.w-tlo-sekcji {
  position: absolute; inset: -11% 0; z-index: -1; pointer-events: none;
  will-change: transform;
}
.w-tlo-sekcji img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: var(--w-kryj, 0.62);
  filter: saturate(0.9) contrast(1.02);
}
.w-tlo-sekcji.w-odbij img { transform: scaleX(-1); }
.w-tlo-sekcji::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--w-gora, rgba(246,242,234,0.34)), var(--w-dol, rgba(246,242,234,0.2)));
}
/* sekcje ciemne: cień ledwie widoczny na ziemi */
.p-program--jasny.w-sekcja, .p-obszary.w-sekcja { --w-kryj: 0.62; }

/* na wyraźniejszym tle tekst dostaje delikatną poświatę z lnu, żeby się nie zlewał */
.w-sekcja p, .w-sekcja h2, .w-sekcja h3, .w-sekcja li, .w-sekcja summary { text-shadow: 0 0 14px rgba(246,242,234,0.85); }

/* przyciski w stopce: biały napis na mchu i ziemi, bez poświaty */
.p-footer .btn, .p-footer .p-btn-czarny { color: #fff !important; text-shadow: none; }
.w-sekcja .btn, .w-sekcja .p-btn-strzalka, .w-sekcja .p-btn-obrys, .w-sekcja .p-wiecej { text-shadow: none; }

/* „Jak zacząć": mniejsza, węższa sekcja */
.p-obszary--kompakt { padding-block: clamp(2rem, 4vw, 3.25rem); }
.p-obszary--kompakt .p-naglowek { margin-bottom: 1.25rem; }
.p-obszary--kompakt h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.2em; }
.p-obszary--kompakt .p-nadtytul { margin-bottom: 0.4rem; }
.p-obszary--kompakt .p-etapy { gap: clamp(1rem, 2.5vw, 2rem); }
.p-obszary--kompakt .p-etapy li { padding-top: 0.7rem; }
.p-obszary--kompakt .p-etapy span { font-size: 1.25rem; }
.p-obszary--kompakt .p-etapy p { font-size: 0.875rem; line-height: 1.5; margin: 0; }
/* przycisk „Napisz do mnie" w stopce */
.p-footer .p-btn-terakota, .p-footer-cta .p-btn-terakota { color: #fff !important; text-shadow: none; }

/* pierwszy ekran: jedna cicha druga droga zamiast osobnego bloku */
.p-hero .p-hero-link { margin-top: 1.1rem; font-size: 0.9375rem; color: rgba(255,255,255,0.78); }
.p-hero .p-hero-link a { color: #fff; text-decoration: none; border-bottom: 2px solid var(--czerwien); padding-bottom: 1px; }
.p-hero .p-hero-link a:hover, .p-hero .p-hero-link a:focus-visible { color: var(--czerwien); }
@media (min-width: 901px) { .p-hero { min-height: calc(100svh - 4.6rem); } }

/* „Rozmowy z domem": tło w kolorze papieru akwareli, brzegi obrazu się rozpływają */
#masterclass { background: #f3efe7; }
#masterclass .p-program-foto img {
  mix-blend-mode: multiply;
  filter: brightness(1.05);
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 58%, transparent 100%);
  border-radius: 0;
}

/* pasek „Rozmowy z domem": cienki, jasny, spokojny */
.p-pasek-kurs { padding: 0.4rem var(--gutter); gap: 0.4rem 1.25rem; background: var(--accent); border-bottom: 1px solid var(--rule); }
.p-pasek-kurs p { font-size: 0.8125rem; }
.p-pasek-kurs strong { font-size: 0.6875rem; }
.p-pasek-kurs a { padding: 0.35rem 0.95rem; font-size: 0.6875rem; }
@media (min-width: 901px) { .p-hero { min-height: calc(100svh - 4.6rem - 2.6rem); } }

/* telefon: programy na gładkim tle, niższe zdjęcia, mocniejszy tekst */
@media (max-width: 700px) {
  .p-programy .w-tlo-sekcji { display: none; }
  .p-programy { background: var(--p-krem); }
  .p-pozycja img { aspect-ratio: 4 / 3; object-fit: cover; }
  .p-pozycja .p-pod { color: var(--ink-soft); }
  .p-pozycja p { color: var(--ink); }
  .w-sekcja p, .w-sekcja h2, .w-sekcja h3, .w-sekcja li { text-shadow: none; }
  .w-tlo-sekcji img { opacity: 0.4; }
}

/* programy: tło łagodniejsze, drobne teksty ciemniejsze */
.p-programy .w-tlo-sekcji img { opacity: 0.3; }
.p-programy .w-tlo-sekcji::after { background: linear-gradient(180deg, rgba(246,242,234,0.62), rgba(246,242,234,0.5)); }
.p-programy .p-pod { color: var(--ink-soft); }
.p-programy .p-pozycja .p-cena span { color: var(--ink-soft); }
.p-programy .p-pozycja p { color: var(--ink); }

/* ---------- podstrony w nowej estetyce ---------- */
.w-kolaz--str { position: relative; margin: 0; }
.w-kolaz--str > .w-ruch img { display: block; width: 100%; height: auto; aspect-ratio: auto; border-radius: 2px; }
.w-kolaz--str .w-kolaz-przod { right: -6%; bottom: -7%; width: 40%; aspect-ratio: 3 / 4; z-index: 2; border: 0.4rem solid var(--p-krem); }
.sesja-foto.w-kolaz--str img, .split-media.w-kolaz--str img { border-radius: 2px; }
.band--alt { background: var(--bg-alt); }
.w-akwarela { background: #f3efe7; }
.w-akwarela .sesja-foto img { mix-blend-mode: multiply; border-radius: 0; filter: brightness(1.05);
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 58%, transparent 100%); }
.sesja-tresc li, .sesja-tresc p, .prose p { color: var(--ink); }
@media (max-width: 700px) { .w-kolaz--str .w-kolaz-przod { right: -2%; } .w-tlo-sekcji img { opacity: 0.4; } .w-sekcja p, .w-sekcja h1, .w-sekcja h2, .w-sekcja li { text-shadow: none; } }

/* podstrony: pod kolumną tekstu tło prawie jednolite, cień odsłania się po prawej */
.band.w-sekcja .w-tlo-sekcji::after {
  background: linear-gradient(90deg, rgba(246,242,234,0.9) 0%, rgba(246,242,234,0.78) 45%, rgba(246,242,234,0.15) 100%);
}
.band.w-sekcja .w-tlo-sekcji img { opacity: 0.7; }
@media (max-width: 900px) {
  .band.w-sekcja .w-tlo-sekcji::after { background: rgba(246,242,234,0.82); }
}

/* pierwszy ekran: jasny len zamiast ciemnej ziemi */
.p-hero { background: var(--bg-alt); color: var(--ink); }
.p-hero h1 { color: var(--ink); }
.p-hero p, .p-hero .p-hero-link { color: var(--ink-soft); }
.p-hero .p-nadtytul { color: var(--ink-muted); }
.p-hero .p-zapis input[type="email"] { background: #fff; border: 1px solid var(--rule); }
.p-hero .p-zgoda, .p-hero .p-komunikat { color: var(--ink-muted); }
.p-hero .p-zgoda a { color: var(--ink); }
.p-hero .p-hero-link a { color: var(--ink); }
.p-hero-foto .w-nakladka { background: linear-gradient(90deg, rgba(236,230,217,0.55), rgba(236,230,217,0) 40%); }
.p-hero-foto .w-front { top: 7%; bottom: 7%; right: 8%; }
.p-hero-foto .w-front img { object-position: 50% 40%; }

/* pierwszy ekran: głęboki mech zamiast czerni i bladego lnu */
.p-hero { background: linear-gradient(160deg, #4a563d 0%, #38432f 100%); color: #f4efe3; }
.p-hero h1 { color: #f7f2e7; }
.p-hero p, .p-hero .p-hero-link { color: rgba(247, 242, 231, 0.88); }
.p-hero .p-nadtytul { color: #dcd9c3; }
.p-hero .p-zapis input[type="email"] { background: #fbf8f1; border: 0; }
.p-hero .p-zapis .btn { background: #e9dfc9; color: var(--ink); }
.p-hero .p-zapis .btn:hover, .p-hero .p-zapis .btn:focus-visible { background: #fff; }
.p-hero .p-zgoda, .p-hero .p-komunikat { color: rgba(247, 242, 231, 0.7); }
.p-hero .p-zgoda a, .p-hero .p-hero-link a { color: #fff; }
.p-hero-foto .w-nakladka { background: linear-gradient(90deg, rgba(56, 67, 47, 0.6), rgba(56, 67, 47, 0) 42%); }

/* pierwszy ekran: ciepła szarość (kamień, len w cieniu) */
.p-hero { background: linear-gradient(160deg, #77746a 0%, #636058 100%); }
.p-hero-foto .w-nakladka { background: linear-gradient(90deg, rgba(99, 96, 88, 0.55), rgba(99, 96, 88, 0) 42%); }
.p-hero .p-nadtytul { color: #e6e2d4; }

/* =====================================================================
   KLIMAT PIERWSZEGO EKRANU NA CAŁEJ STRONIE
   Ciepła szarość kamienia z kremowym tekstem na przemian z lnem.
   ===================================================================== */
:root { --kamien-1: #77746a; --kamien-2: #636058; --jadeit: #5e8566; --mgla: #bfceba; --lupek: #292b30; --mlode-listki: #a8cd86; --krem-tekst: #f7f2e7; }

.w-kamien { background: linear-gradient(160deg, var(--kamien-1) 0%, var(--kamien-2) 100%) !important; color: var(--krem-tekst); }
.w-kamien h2, .w-kamien h3, .w-kamien summary { color: var(--krem-tekst); text-shadow: none; }
.w-kamien p, .w-kamien li { color: rgba(247, 242, 231, 0.9); text-shadow: none; }
.w-kamien .p-nadtytul { color: #e6e2d4; }
.w-kamien .p-pod, .w-kamien .p-cena span { color: rgba(247, 242, 231, 0.8); }
.w-kamien a:not(.p-btn-strzalka):not(.btn):not(.p-btn-terakota):not(.p-btn-czarny) { color: #fff; }
.w-kamien .p-btn-strzalka, .w-kamien .btn, .w-kamien .p-btn-terakota, .w-kamien .p-btn-czarny { background: #e9dfc9; color: var(--ink) !important; text-shadow: none; }
.w-kamien .p-btn-strzalka:hover, .w-kamien .btn:hover, .w-kamien .p-btn-terakota:hover, .w-kamien .p-btn-czarny:hover { background: #fff; }
.w-kamien .p-wiecej { color: #fff; }
.w-kamien .p-program-foto img { box-shadow: 0 24px 50px -26px rgba(20, 16, 10, 0.55); }

/* joga nidra: ciemne zdjęcie rozjaśnione do tonu kamienia */
.p-prezent.w-kamien { background: none !important; }
.p-prezent.w-kamien .p-prezent-tlo { filter: brightness(0.85) saturate(0.7) contrast(0.9); }
.p-prezent.w-kamien::before { background: linear-gradient(160deg, rgba(119, 116, 106, 0.7), rgba(99, 96, 88, 0.78)); }
.p-prezent.w-kamien h2 { color: var(--krem-tekst); }
.p-prezent.w-kamien .p-nadtytul { color: #e6e2d4; }

/* pytania: linie i plusy na szarości */
.w-kamien .p-faq details { border-color: rgba(247, 242, 231, 0.28); }
.w-kamien .p-faq summary::after { color: rgba(247, 242, 231, 0.7); }

/* stopka w kamieniu */
.p-footer.w-kamien h3 { color: var(--krem-tekst); }
.p-footer.w-kamien a { color: rgba(247, 242, 231, 0.9); }
.p-footer.w-kamien .p-socials a { color: #fff; }
.p-footer.w-kamien .p-footer-znak img, .p-footer.w-kamien .logo img { filter: invert(1) brightness(1.15); mix-blend-mode: screen; }
.p-footer.w-kamien hr, .p-footer.w-kamien .p-footer-cta hr, .p-footer.w-kamien .p-footer-dol { border-color: rgba(247, 242, 231, 0.28); }
.p-footer.w-kamien .p-footer-cta-tekst, .p-footer.w-kamien .p-footer-dol, .p-footer.w-kamien .p-footer-dol a { color: rgba(247, 242, 231, 0.8); }
.p-footer.w-kamien .p-btn-terakota { background: #e9dfc9; color: var(--ink) !important; }
.p-footer.w-kamien .p-btn-czarny { background: #e9dfc9; color: var(--ink) !important; }

/* podstrony: pierwszy pas w szarości kamienia, tak jak pierwszy ekran */
.band.w-kamien h1, .band.w-kamien .tytul-znak span, .band.w-kamien .sesja-pod, .band.w-kamien .sesja-cena { color: var(--krem-tekst); text-shadow: none; }
.band.w-kamien .eyebrow { color: #e6e2d4; }
.band.w-kamien .card-czas { color: rgba(247,242,231,.8); }
.band.w-kamien .rule { border-color: rgba(247,242,231,.35); background: rgba(247,242,231,.35); }
.band.w-kamien .w-tlo-sekcji img { opacity: .28; mix-blend-mode: soft-light; }
.band.w-kamien .w-tlo-sekcji::after { background: linear-gradient(90deg, rgba(99,96,88,.5) 0%, rgba(99,96,88,.25) 60%, rgba(99,96,88,0) 100%); }
@media (max-width: 900px) { .band.w-kamien .w-tlo-sekcji::after { background: rgba(99,96,88,.35); } }
.band.w-kamien .w-kolaz-przod { border-color: #e9dfc9; box-shadow: 0 24px 50px -26px rgba(20,16,10,.6); }

/* pasek nad pierwszym ekranem: szary kamień, zaprasza po e-book (zapis na stronie /e-book) */
.p-pasek-kurs { background: var(--kamien-2); border-bottom-color: transparent; }
.p-pasek-kurs p, .p-pasek-kurs strong { color: var(--krem-tekst); }
.p-pasek-kurs a { background: none; padding: 0 0 1px; border-radius: 0; font-family: var(--sans); font-size: 0.875rem; letter-spacing: normal; text-transform: none; font-weight: 600; color: #fff; text-decoration: none; border-bottom: 2px solid var(--czerwien); }
.p-pasek-kurs a:hover, .p-pasek-kurs a:focus-visible { background: none; color: var(--czerwien); }
.ebook-strona { max-width: 40rem; margin-inline: auto; padding-block: clamp(1.5rem, 4vw, 3rem); }
.ebook-strona h1 { text-transform: none; }
.ebook-strona .p-zapis input[type="email"] { background: #fff; border: 1px solid var(--rule); }
.ebook-strona .p-zgoda, .ebook-strona .p-komunikat { color: var(--ink-muted); }
.ebook-strona .p-zgoda a { color: var(--ink); }

/* pierwszy ekran: zdjęcie lnu na całą szerokość, tekst na nim, portret po prawej */
@media (min-width: 901px) {
  .p-hero { position: relative; isolation: isolate; }
  .p-hero-foto.w-scena { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .p-hero-tresc { position: relative; z-index: 3; }
  .p-hero-foto .w-tlo { inset: -12% 0; }
  .p-hero-foto .w-tlo img { opacity: 1; filter: brightness(0.92) saturate(0.9) contrast(1.08); object-position: 50% 58%; }
  .p-hero-foto .w-nakladka { background: linear-gradient(90deg, rgba(60, 57, 50, 0.5) 0%, rgba(60, 57, 50, 0.3) 40%, rgba(60, 57, 50, 0.05) 70%, rgba(60, 57, 50, 0) 100%); }
  .p-hero-foto .w-front { right: 7%; }
  .p-hero-tresc h1, .p-hero-tresc p { text-shadow: 0 1px 16px rgba(40, 36, 30, 0.5); }
  .p-hero-tresc .btn { text-shadow: none; }
}

/* pierwszy ekran: większe, jasne litery krojem Cormorant, czarny przycisk */
@media (min-width: 901px) {
  .p-hero h1 { font-family: var(--serif-body); font-weight: 300; font-size: clamp(2.6rem, min(5.2vw, 9vh), 4.9rem); line-height: 1.08; margin-bottom: 0.4em; }
  .p-hero h1 em { font-weight: 700; }
  .p-hero-tresc > p:not(.p-nadtytul):not(.p-zapis):not(.p-hero-link) { font-size: clamp(1rem, 2.6vh, 1.25rem); line-height: 1.55; }
  .p-hero-tresc > p + p:not(.p-zapis) { margin-top: 0.6rem; }
}
@media (max-width: 900px) {
  .p-hero h1 { font-family: var(--serif-body); font-weight: 300; font-size: clamp(2.2rem, 9vw, 3.1rem); line-height: 1.1; }
  .p-hero h1 em { font-weight: 700; }
}
.p-hero .p-zapis .btn { background: #111; color: #fff; }
.p-hero .p-zapis .btn:hover, .p-hero .p-zapis .btn:focus-visible { background: var(--czerwien); color: #fff; }

/* pierwszy ekran: dwa przyciski obok siebie, drugi tylko z obrysem */
.p-hero .p-zapis { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.p-hero .p-zapis .btn-obrys { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.85); }
.p-hero .p-zapis .btn-obrys:hover, .p-hero .p-zapis .btn-obrys:focus-visible { background: #fff; color: var(--ink); }
.p-hero .p-zapis .btn { border: 1.5px solid #111; box-sizing: border-box; }
.p-hero .p-zapis .btn:hover, .p-hero .p-zapis .btn:focus-visible { border-color: var(--czerwien); }
.p-hero .p-zapis .btn-obrys { border-color: rgba(255, 255, 255, 0.85); }
.p-hero .p-zapis .btn-obrys:hover, .p-hero .p-zapis .btn-obrys:focus-visible { border-color: #fff; }

/* Rozmowy z domem: opowieść, akapity pojawiają się przy przewijaniu, czerwona nić się tka */
.opowiesc { position: relative; margin: 2rem 0 3rem; padding-left: clamp(1.75rem, 5vw, 3.5rem); }
.opowiesc-nic { position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--rule); }
.opowiesc-nic i { display: block; width: 100%; height: 0; background: var(--czerwien); }
.opowiesc-akapit { font-family: var(--serif-body); font-size: clamp(1.3rem, 2.5vw, 1.8rem); line-height: 1.5; color: var(--ink); margin: 0 0 clamp(2rem, 6vw, 3.5rem); max-width: 38rem; }
.opowiesc-akapit:last-child { margin-bottom: 0; }
.opowiesc.z-ruchem .opowiesc-akapit { opacity: 0; transform: translateY(22px); transition: opacity 900ms ease, transform 900ms ease; }
.opowiesc.z-ruchem .opowiesc-akapit.jest { opacity: 1; transform: none; }
.opowiesc-tytul { font-family: var(--mono); font-weight: 400; font-style: normal; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.9rem; }
.opowiesc-tytul::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; background: var(--czerwien); margin-right: 0.7rem; vertical-align: 0.05em; }
.opowiesc-akapit p { margin: 0 0 0.9em; }
.opowiesc-akapit p:last-child { margin-bottom: 0; }

/* ========== Rozmowy z domem: narracja podstrony ========== */
.kurs-sekcja { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.kurs-sekcja--jasna { background: #f8f5ee; }
.kurs-sekcja--len { background: var(--bg-alt); }
.kurs-wrap { max-width: 46rem; margin-inline: auto; padding-inline: var(--gutter); }
.kurs-srodek { text-align: center; }
.kurs-lewo { text-align: left; margin-inline: 0; }
.kurs-h2 { font-family: var(--serif-body); font-weight: 300; font-size: clamp(2rem, 5.4vw, 3.5rem); line-height: 1.12; color: var(--ink); margin: 0; text-transform: none; letter-spacing: 0; }
.kurs-h2 strong { font-weight: 700; }
.kurs-h2 mark { background: #e9e3d6; color: inherit; padding: 0 0.18em; }
.kurs-pod { max-width: 34rem; margin: 1.6rem auto 0; font-weight: 600; color: var(--ink-soft); line-height: 1.6; }
.kurs-pod.kurs-lewo { margin-inline: 0; font-weight: 400; }
.kurs-etykieta { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 1.4rem; }
.kurs-etykieta::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; background: var(--czerwien); margin-right: 0.7rem; vertical-align: 0.05em; }
.kurs-rozpoznanie { list-style: none; margin: 0; padding: 0; }
.kurs-rozpoznanie li { margin: 0 0 clamp(2.2rem, 6vw, 3.2rem); }
.kurs-nr { display: block; font-family: var(--serif-body); font-weight: 300; font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1; color: var(--ink-muted); margin-bottom: 0.8rem; }
.kurs-mocne { font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.45; color: var(--ink); margin: 0 0 0.6rem; }
.kurs-lekkie { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.kurs-wskazowka { font-weight: 700; color: var(--ink-muted); margin: 1.6rem 0 1.2rem; }
.kurs-chipy { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }
.kurs-chip { font: inherit; font-size: 1rem; padding: 0.7rem 1.4rem; border: 0; border-radius: 999px; background: #e3dccb; color: var(--ink); cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.kurs-chip:hover { background: #d8cfba; }
.kurs-chip[aria-selected="true"] { background: var(--kamien-2); color: var(--krem-tekst); }
.kurs-panel { background: #f3eee3; border-radius: 28px; padding: clamp(1.5rem, 4vw, 2.4rem); }
.kurs-panel[hidden] { display: none; }
.kurs-panel-opis { font-family: var(--serif-body); font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.45; color: var(--ink); margin: 0 0 1.4rem; }
.kurs-panel-pod { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.7rem; }
.kurs-tematy { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kurs-tematy li { padding: 0.35rem 0.9rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.9375rem; color: var(--ink-soft); }
.kurs-dwa { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.2rem; }
.kurs-karta { background: #ebe5d8; border-radius: 28px; padding: clamp(1.4rem, 4vw, 2rem); }
.kurs-karta p { margin: 0; line-height: 1.6; color: var(--ink-soft); }
.kurs-karta strong { color: var(--ink); }
.kurs-karta--tekst { background: #f3eee3; border: 1px solid var(--rule); }
.kurs-karta--tekst .kurs-etykieta { margin-bottom: 0.9rem; }
.kurs-dopisek { max-width: 38rem; margin: 2rem auto 0; color: var(--ink-soft); line-height: 1.7; }
.kurs-srodek .kurs-dopisek { text-align: center; }
.kurs-lista { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.kurs-lista li { display: flex; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--rule); font-size: 1.1rem; color: var(--ink); }
.kurs-lista li span { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--ink-muted); padding-top: 0.2rem; flex: none; width: 2.6rem; }
.kurs-karty { display: grid; gap: 1rem; margin-top: 2.2rem; }
.kurs-karty .kurs-karta { text-align: center; padding: 2rem 1.6rem; }
.kurs-ptaszek { width: 2.4rem; height: 2.4rem; color: #a99f8f; margin: 0 auto 1rem; display: block; }
.kurs-cta .kurs-h2, .kurs-cta .kurs-pod { color: var(--krem-tekst); }
.kurs-cta .kurs-pod { font-weight: 400; }
.kurs-cta .kurs-dopisek { color: rgba(247, 242, 231, 0.85); }
.kurs-pasek { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; justify-content: center; padding: 0.7rem var(--gutter); background: var(--kamien-2); color: var(--krem-tekst); transform: translateY(110%); transition: transform 300ms ease; }
.kurs-pasek.widac { transform: none; }
.kurs-pasek p { margin: 0; font-size: 0.875rem; color: var(--krem-tekst); }
.kurs-pasek strong { font-family: var(--mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 0.6rem; }
.kurs-pasek a { color: #fff; font-weight: 600; font-size: 0.875rem; text-decoration: none; border-bottom: 2px solid var(--czerwien); padding-bottom: 1px; }
.rev-on .rev { opacity: 0; transform: translateY(20px); transition: opacity 800ms ease, transform 800ms ease; }
.rev-on .rev.jest { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .kurs-dwa { grid-template-columns: 1fr; }
  .kurs-pasek span { display: none; }
}
.kurs-nr { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.kurs-cta .kurs-pod { margin-bottom: 1.8rem; }
#kurs-start .kurs-h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
#kurs-start .kurs-pod strong { font-weight: 800; color: var(--ink); }

/* =====================================================================
   MARKA 2026 (logo, ikony, tytuły, numeracja programów). Opis: docs/marka.md
   ===================================================================== */
:root { --gruby: "Playfair Display", Georgia, "Times New Roman", serif; }
.logo img { width: clamp(144px, 17.3vw, 221px); height: auto; mix-blend-mode: normal !important; }

/* Pierwszy ekran: gruby tytuł w kroju logo. */
.p-hero h1, .p-hero-tresc h1, .p-hero h1 em {
  font-family: var(--gruby) !important; font-style: italic; font-weight: 900 !important;
  letter-spacing: -0.02em; line-height: .98;
}
.p-hero h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }

/* Tytuły sekcji w tym samym kroju. */
.p-naglowek h2, .p-naglowek h2 em, .p-program h2, .p-program h2 em {
  font-family: var(--gruby) !important; font-style: italic; font-weight: 900 !important;
  text-transform: none !important; letter-spacing: -0.02em !important; line-height: 1.02;
}
.p-naglowek h2 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); }
.p-program h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }

/* Programy: wielka liczba z czerwoną kropką, tytuły i zdjęcia jak w wersji odważnej. */
.p-liczba { font: italic 900 clamp(3rem, 5vw, 4.2rem)/1 var(--gruby); letter-spacing: -0.03em; color: var(--ink); margin: 1rem 0 0; }
.p-liczba i { display: inline-block; width: .22em; height: .22em; border-radius: 50%; background: #c23b22; margin-left: .06em; }
.p-liczba span { display: block; margin-top: .45rem; font: 400 .7rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.p-pozycja p.p-liczba { font-size: clamp(3rem, 5vw, 4.2rem) !important; line-height: 1 !important; color: var(--ink) !important; font-family: var(--gruby) !important; }
.p-pozycja p.p-liczba span { font-size: .7rem !important; font-family: var(--mono) !important; line-height: 1 !important; }
.p-pozycja h3 { font-family: var(--gruby) !important; font-style: italic; font-weight: 900 !important; text-transform: none !important; letter-spacing: -0.01em !important; font-size: 1.7rem; margin-top: .9rem; }
.p-pozycja img { filter: grayscale(1) contrast(1.06); }

/* Moja praca: ciemna zieleń marmuru. Kwadracik przy nadtytule kremowy. */
#moja-praca { background: #2e3b2d !important; color: #f7f2e7; }
#moja-praca h2, #moja-praca h2 em, #moja-praca h3, #moja-praca p, #moja-praca li { color: #f7f2e7 !important; }
#moja-praca p, #moja-praca li { color: #d8d6c8 !important; }
#moja-praca .p-nadtytul { color: #c8beb0 !important; }
#moja-praca .p-nadtytul::before { background: #c23b22 !important; }
#moja-praca h3 { color: #f7f2e7 !important; }
#moja-praca a { color: #f7f2e7; }

/* Podstrony: tytuł strony w kroju logo (kursywa 900 + wersaliki Playfair), nagłówki sekcji gruba kursywa. */
h1.tytul-znak, h1.tytul-znak .znak-kursywa, .hero-words h1.tytul-znak { font-family: var(--gruby) !important; }
h1.tytul-znak .znak-kursywa { font-style: italic; font-weight: 900 !important; letter-spacing: -0.02em; }
h1.tytul-znak .znak-wersaliki { font-family: var(--gruby) !important; font-style: normal; font-weight: 400 !important; letter-spacing: 0.08em; text-transform: uppercase; font-size: .78em; }
main h1:not(.tytul-znak), main h1:not(.tytul-znak) em { font-family: var(--gruby) !important; font-style: italic; font-weight: 900 !important; letter-spacing: -0.02em; }

/* Rozwinięcia menu: mniejsze, w stylu menu głównego (Space Mono, wersaliki, rozstrzelenie). */
.nav .nav-pod a { font-size: 0.68rem !important; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; }

/* Menu na telefonie: wszystkie słowa przy jednej lewej krawędzi, bez wcięć i kresek. */
@media (max-width: 900px) {
  .nav ul.nav-pod { border-left: 0 !important; margin: 0 0 .5rem 0 !important; padding: 0 !important; }
  .nav .nav-pod a { padding: .42rem 0 !important; font-size: .68rem !important; }
  .nav > ul > li > a, .nav .nav-grupa > a { padding-block: .6rem; }
  .nav-cta { margin-top: .6rem; }
}

/* Jadeit jako cichy akcent (shibui): odnośniki w tekście, cienka linia pod nagłówkiem. */
.site-header { border-bottom: 1px solid var(--jadeit); }
.p-mysl-lead a, .p-lista a { text-decoration-color: var(--jadeit); }
.p-hero .p-zapis .btn:not(.btn-obrys) { background: var(--p-terakota); border-color: var(--p-terakota); }
.p-hero .p-zapis .btn:not(.btn-obrys):hover, .p-hero .p-zapis .btn:not(.btn-obrys):focus-visible { background: var(--czerwien); border-color: var(--czerwien); }

/* ==== Pismo Instagrama na stronie (od 23.10.2026) ====
   Logo bez zmian (obraz SVG). Nagłówki, numery programów i ceny: Inter Tight 800.
   Dodatki: Architects Daughter (nadtytuły, czas trwania), Mr Dafoe (wyróżnione słowo
   w h2). Teksty opisowe zostają w Mulish i Cormorant. */
:root { --it: "Inter Tight", "Mulish", sans-serif; --ad: "Architects Daughter", cursive; --md: "Mr Dafoe", cursive; }

h1, h2, h3,
main h1:not(.tytul-znak), main h1 em,
.p-pozycja h3, .p-pozycja p.p-liczba, .p-liczba,
.p-pozycja .p-cena, p.p-cena,
summary {
  font-family: var(--it) !important; font-style: normal !important; font-weight: 800 !important;
  letter-spacing: -0.03em !important; word-spacing: .08em; text-transform: none !important;
}
h1 { line-height: 1.0 !important; }
h1 em { font-weight: 800 !important; }
h2 { line-height: 1.05 !important; }
h3, summary { font-weight: 700 !important; letter-spacing: -0.015em !important; word-spacing: .1em; }
.p-pozycja h3 { font-size: 1.5rem !important; }
.p-pozycja p.p-liczba { letter-spacing: -0.05em !important; }
.p-cena { font-weight: 700 !important; letter-spacing: -0.015em !important; }

/* Mr Dafoe: pierwsze, wyróżnione słowo nagłówka (poza "Rozmowy z domem") */
h2 em { font-family: var(--md) !important; font-weight: 400 !important; letter-spacing: 0 !important; font-size: 1.25em; color: var(--jadeit, #5e8566); padding-right: .08em; }
h2.bez-pedzla em { font-family: var(--it) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; font-size: 1em; color: inherit; }
.w-kamien h2 em, .p-hero h2 em, .p-moja-praca h2 em { color: #dce8d4; }
.p-polityka h2 em, .polityka h2 em { font-family: var(--it) !important; font-size: 1em; color: inherit; letter-spacing: -0.03em !important; font-weight: 800 !important; }

/* Architects Daughter: nadtytuły i czas trwania */
.p-nadtytul { font-family: var(--ad) !important; font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.p-cena span, .sesja-cena .card-czas, .card-czas { font-family: var(--ad) !important; font-weight: 700; font-size: .95rem; letter-spacing: .06em; }


/* Tytuły podstron zbudowane jak znak ("Pierwszy krok"): jeden krój, bez rozdzielania na kursywę i wersaliki. */
h1.tytul-znak, h1.tytul-znak .znak-kursywa, h1.tytul-znak .znak-wersaliki, .hero-words h1.tytul-znak {
  font-family: var(--it) !important; font-style: normal !important; font-weight: 800 !important;
  letter-spacing: -0.03em !important; text-transform: none !important;
}
h1.tytul-znak .znak-kursywa, h1.tytul-znak .znak-wersaliki { font-size: 1em !important; }
.eyebrow, .kurs-nadtytul { font-family: var(--ad) !important; font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.sesja-cena { font-family: var(--it) !important; font-weight: 700 !important; letter-spacing: -0.015em; }
.p-hero h1, .p-hero h1 em { font-family: var(--it) !important; font-style: normal !important; font-weight: 800 !important; letter-spacing: -0.03em !important; }
main h1:not(.tytul-znak), main h1:not(.tytul-znak) em { font-family: var(--it) !important; font-style: normal !important; font-weight: 800 !important; letter-spacing: -0.03em !important; }

/* ==== Układ pisma zatwierdzony 23.10.2026: pierwsze słowo grubą kursywą Inter Tight, reszta lekkim Playfair;
   półprzezroczysty jadeit jako marker pod grubym słowem i na przyciskach. Nadpisuje wcześniejszy blok z Mr Dafoe. ==== */
h1, h2, main h1:not(.tytul-znak),
.p-hero h1 {
  font-family: "Playfair Display", Georgia, serif !important; font-style: normal !important;
  font-weight: 400 !important; letter-spacing: -0.015em !important; word-spacing: .06em;
}
h1 em, h2 em, .p-hero h1 em,
main h1:not(.tytul-znak) em, h2.bez-pedzla em {
  font-family: "Inter Tight", "Mulish", sans-serif !important; font-style: italic !important;
  font-weight: 800 !important; letter-spacing: -0.04em !important; font-size: 1em !important;
  color: inherit !important;
}

/* Transparentna zieleń jadeitu: półprzezroczysty "marker" pod grubym słowem nagłówka. */
h1 em, h2 em {
  background: linear-gradient(180deg, transparent 58%, rgba(94, 133, 102, .38) 58%, rgba(94, 133, 102, .38) 92%, transparent 92%);
  padding: 0 .12em; margin-left: -.12em; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* na ciemnych tłach jaśniejsza, mgłowa zieleń */
.p-hero h1 em, .w-kamien h2 em {
  background: linear-gradient(180deg, transparent 58%, rgba(168, 205, 170, .42) 58%, rgba(168, 205, 170, .42) 92%, transparent 92%);
}

/* Przyciski w półprzezroczystym jadeicie (czarny "Umów rozmowę" w menu zostaje czarny). */
.btn:not(.btn-obrys), .p-btn-terakota,
.p-hero .p-zapis .btn:not(.btn-obrys) {
  background: rgba(94, 133, 102, .42) !important; border: 1px solid rgba(94, 133, 102, .85) !important;
  color: var(--ink) !important; text-shadow: none !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn:not(.btn-obrys):hover, .p-btn-terakota:hover,
.btn:not(.btn-obrys):focus-visible, .p-btn-terakota:focus-visible,
.p-hero .p-zapis .btn:not(.btn-obrys):hover { background: rgba(94, 133, 102, .7) !important; color: #fff !important; }
/* na ciemnych tłach: jasna mgłowa zieleń i kremowy napis */
.p-hero .btn:not(.btn-obrys), .p-hero .p-zapis .btn:not(.btn-obrys),
.w-kamien .btn:not(.btn-obrys), .w-kamien .p-btn-terakota,
.p-footer .p-btn-terakota {
  background: rgba(168, 205, 170, .30) !important; border: 1px solid rgba(190, 220, 192, .8) !important; color: #f7f2e7 !important;
}
.p-hero .btn:not(.btn-obrys):hover, .w-kamien .btn:not(.btn-obrys):hover,
.w-kamien .p-btn-terakota:hover, .p-footer .p-btn-terakota:hover { background: rgba(168, 205, 170, .55) !important; color: #fff !important; }

/* Tytuły podstron zbudowane jak znak: pierwsze słowo grube pochyłe, drugie lekkie szeryfowe. */
h1.tytul-znak .znak-kursywa { font-family: var(--it) !important; font-style: italic !important; font-weight: 800 !important; letter-spacing: -0.04em !important; text-transform: none !important; }
h1.tytul-znak .znak-wersaliki { font-family: "Playfair Display", Georgia, serif !important; font-style: normal !important; font-weight: 400 !important; letter-spacing: -0.015em !important; text-transform: none !important; font-size: 1em !important; }