/* ============================================================
   Szabłowski — kancelaria adwokacka
   Design system: quiet luxury legal / premium boutique
   ============================================================ */

:root {
  /* Brandbook */
  --navy: #14202E;
  --gold: #A88955;
  --ivory: #F7F1E7;

  /* Uzupełniające */
  --ink: #14202E;
  --muted: #5F6670;
  --line: #E6DED2;
  --paper: #FCF9F3;          /* karty, jaśniejsze od ivory */
  --beige: #EFE6D7;          /* cienie sekcji, tła pomocnicze */
  --gold-soft: rgba(168, 137, 85, 0.14);
  --navy-soft: rgba(20, 32, 46, 0.06);

  /* Typografia */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Rytm */
  --maxw: 1180px;
  --section-y: clamp(5rem, 10vw, 8.5rem);
  /* Narożniki — tokeny FUNKCJONALNE (kontekstowe), nie jeden globalny promień.
     Im bliżej dokumentu/redakcji, tym spokojniej; karty i panele nigdy nie stają się pill. */
  --radius-line: 0;        /* złota nić, separatory, podkreślenia, włosowe linie postępu */
  --radius-paper: 4px;     /* drobne elementy papierowe, krzyżyki, małe noty techniczne */
  --radius-field: 6px;     /* pola: input / textarea / select / wyszukiwarka */
  --radius-card: 8px;      /* zwykłe karty, empty states, box redakcyjny */
  --radius-case: 10px;     /* teczka sprawy, dropzone, dokumenty w uploadzie */
  --radius-panel: 12px;    /* modale, panele, mapa i jej kadr, większe kontenery */
  --radius-pill: 999px;    /* filtry, chipy, przełączniki, scrollbar */

  /* Narożniki przycisków — zależne od kontekstu (nie jeden globalny promień). */
  --radius-button-public: 8px;   /* strona publiczna — główna i drugorzędna, ten sam promień */
  --radius-button-entry: 8px;    /* ekrany wejścia do Portalu (logowanie, aktywacja, reset…) */
  --radius-button-portal: 999px; /* operacyjne przyciski WEWNĄTRZ Portalu — pełny pill */

  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);

  /* Tokeny ruchu — wspólny, spokojny język interakcji (bez bounce/shake). */
  --motion-fast: 160ms;
  --motion-medium: 260ms;
  --motion-slow: 420ms;
  --motion-presence: 700ms;
  --stagger-soft: 48ms;

  /* Skala odstępów (ciąg ~Fibonacciego) — do nowych elementów, NIE przepinać całej strony. */
  --space-1: 8px;
  --space-2: 13px;
  --space-3: 21px;
  --space-4: 34px;
  --space-5: 55px;
  --space-6: 89px;

  /* Skala warstw — wspólny standard z-index (header, dropdowny, overlaye, modale). */
  --z-base: 1;
  --z-header: 20;
  --z-dropdown: 40;
  --z-sticky: 50;
  --z-overlay: 80;
  --z-modal: 100;
  --z-toast: 120;
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  color: var(--navy);
}

p { margin: 0; }

/* ---------- Układ ---------- */

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding: var(--section-y) 0; }

.section--dark {
  background: var(--navy);
  color: rgba(247, 241, 231, 0.85);
}

.section--dark h2,
.section--dark h3 { color: var(--ivory); }

/* ---------- Detale typograficzne ---------- */

.kicker {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.section--dark .kicker { color: var(--gold); }

.h-xl {
  font-size: clamp(2.6rem, 5.4vw, 4.1rem);
  letter-spacing: -0.01em;
}

.h-lg { font-size: clamp(2rem, 3.6vw, 2.8rem); }

.h-md { font-size: clamp(1.4rem, 2.2vw, 1.7rem); }

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.1875rem);
  color: var(--muted);
  max-width: 38em;
}

.section--dark .lead { color: rgba(247, 241, 231, 0.72); }

/* Linia precyzji — złoty detal przy nagłówkach */
.gold-line {
  display: block;
  width: 56px;
  height: 1.5px;
  background: var(--gold);
  border: 0;
  border-radius: var(--radius-line);
  margin: 1.75rem 0;
  transform-origin: left center;
}

/* scaleX(0) tylko na ekranie — w druku/PDF złota linia jest pełnej długości */
@media screen {
  .reveal-line .gold-line { transform: scaleX(0); }
}

.reveal-line.is-visible .gold-line {
  animation: line-grow 800ms var(--ease) forwards;
}

@keyframes line-grow {
  to { transform: scaleX(1); }
}

/* ---------- Przyciski ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.95em 1.9em;
  border: 1px solid transparent;
  border-radius: var(--radius-button-public);
  cursor: pointer;
  transition: background-color 250ms var(--ease),
              color 250ms var(--ease),
              border-color 250ms var(--ease);
}

/* Główny CTA — wspólny język interakcji (public / wejście / Portal): spokojny sheen
   (biel 16%, jak w zaakceptowanej wizualizacji), miękki cień, subtelne uniesienie 1px.
   Tekst biały; sheen nad tekstem jest niewyczuwalny, więc <span> nie jest wymagany. */
.btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gold);
  color: #fff;
  box-shadow: 0 12px 26px -22px rgba(20, 32, 46, 0.55);
  transition:
    background-color 420ms var(--ease),
    box-shadow 520ms var(--ease),
    transform 420ms var(--ease);
}
.btn--primary > span { position: relative; z-index: 2; }

/* Bardzo delikatne przejście światła na hover — NIE neon/SaaS. */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.16) 48%, transparent 100%);
  transform: translateX(-130%);
  transition: transform 1200ms var(--ease);
  pointer-events: none;
}

/* Hover I fokus klawiaturowy = ten sam stan znaczeniowy (+ outline jako sygnał dodatkowy). */
.btn--primary:hover,
.btn--primary:focus-visible {
  background: #93753F;
  box-shadow: 0 16px 32px -24px rgba(20, 32, 46, 0.65);
  transform: translateY(-1px);
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after { transform: translateX(130%); }
.btn--primary:active { transform: translateY(0); }
.btn--primary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
/* Na ciemnych sekcjach navy ginie — focus w kości słoniowej dla kontrastu. */
.section--dark .btn--primary:focus-visible { outline-color: var(--ivory); }

/* Drugorzędna — jeden język ze „Portal klienta" (.btn--portal): granatowy kontur,
   na hover złoty kontur + tekst + ledwie widoczne ciepłe tło. Na ciemnym tle kontur
   przechodzi w kość słoniową (.section--dark / .contact-hero__cta). */
.btn--outline {
  border-color: var(--navy);
  color: var(--navy);
  background: transparent;
}

/* Przyciski drugorzędne/outline — bez sheenu i unoszenia; spokojne przejście
   koloru z ledwie widocznym złotym tłem (sekcja: język interakcji). */
.btn--outline,
.btn--portal {
  transition:
    color 320ms var(--ease),
    border-color 320ms var(--ease),
    background-color 320ms var(--ease);
}
.btn--outline:hover,
.btn--outline:focus-visible { border-color: var(--gold); color: var(--gold); background: rgba(168, 137, 85, 0.035); }

/* Przycisk użytkowy — Portal klienta */
.btn--portal {
  border-color: var(--navy);
  color: var(--navy);
  background: transparent;
  padding: 0.7em 1.4em;
  font-size: 0.875rem;
}

.btn--portal:hover,
.btn--portal:focus-visible { border-color: var(--gold); color: var(--gold); background: rgba(168, 137, 85, 0.035); }

/* Ghost / tertiary — najlżejsze działania techniczne (np. „Zamknij" w modalu kontaktowym):
   jasny kontur --line, granatowy tekst; hover == :focus-visible → złoty tekst i kontur, BEZ
   ciepłego tła. Promień 8px (z .btn), bez cienia, liftu i sheenu. */
.btn--ghost {
  border-color: var(--line);
  color: var(--navy);
  background: transparent;
}
.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn--ghost:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.section--dark .btn--outline {
  border-color: rgba(247, 241, 231, 0.3);
  color: var(--ivory);
}

.section--dark .btn--outline:hover,
.section--dark .btn--outline:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Link tekstowy ze strzałką */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35em;
  transition: color 250ms var(--ease), border-color 250ms var(--ease);
}

.link-arrow::after {
  content: "→";
  font-family: var(--sans);
  transition: transform 250ms var(--ease);
}

.link-arrow:hover,
.link-arrow:focus-visible { color: var(--gold); border-color: var(--gold); }
.link-arrow:hover::after,
.link-arrow:focus-visible::after { transform: translateX(4px); }
/* Reduced motion: strzałka bez przesuwu, ale kolor i podkreślenie nadal pokazują stan. */
@media (prefers-reduced-motion: reduce) {
  .link-arrow:hover::after,
  .link-arrow:focus-visible::after { transform: none; }
}
/* Wygodny obszar dotyku na ekranach dotykowych — rośnie tylko pionowy target;
   bez tła, obrysu i kapsuły (pozostaje akcją tekstową, nie przyciskiem). */
@media (pointer: coarse) {
  .link-arrow { padding-top: 0.55rem; padding-bottom: 0.5rem; }
}

/* ---------- Skip-link (dostępność: „Przejdź do treści" — ukryty, pojawia się przy fokusie klawiaturą) ---------- */
.skip-link { position: absolute; left: 1rem; top: -3.5rem; z-index: 1000; background: var(--paper); color: var(--navy); border: 1px solid var(--line); border-radius: var(--radius-paper); padding: 0.6rem 1rem; font-family: var(--sans); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: top var(--motion-medium) var(--ease); }
.skip-link:focus { top: 1rem; outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(247, 241, 231, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* Górny pasek techniczny — wyłącznie PL | EN */
.site-header__top {
  border-bottom: 1px solid var(--line);
}

.site-header__top-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 32px;
}

.lang-corner {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.lang-corner a { text-decoration: none; color: var(--muted); padding: 0.2em 0; }
.lang-corner a.is-active { color: var(--navy); font-weight: 600; }
.lang-corner a:hover { color: var(--gold); }
.lang-corner .lang-sep { opacity: 0.45; }

/* Główny poziom headera */
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 86px;
}

.site-logo { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }

.site-logo img { height: 50px; width: auto; }

/* Menu + przyciski po prawej, z wyraźnym oddechem między grupami */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4rem);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2rem);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.site-nav a:not(.btn) {
  font-size: 0.9375rem;
  font-weight: 450;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--navy);
  position: relative;
  padding: 0.3em 0;
  transition: color 250ms var(--ease);
}

.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease);
}

.site-nav a:not(.btn):hover,
.site-nav a:not(.btn)[aria-current="page"] { color: var(--gold); }

.site-nav a:not(.btn):hover::after,
.site-nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-paper);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--navy);
  margin: 4px 0;
  transition: transform 250ms var(--ease), opacity 250ms var(--ease);
}

@media (max-width: 920px) {
  .nav-toggle { display: block; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem) 1.75rem;
    display: none;
  }

  .site-nav.is-open { display: flex; }

  .site-nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .site-nav__links a:not(.btn) { padding: 0.55em 0; font-size: 1.0625rem; }

  .site-nav__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
  }

  .site-nav__actions .btn { justify-content: center; }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}

/* ---------- Hero — zdjęcie wtopione w tło strony ---------- */

.hero--blend {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}

/* Zdjęcie przygotowane pod hero: lewa połowa kadru to pusty blat ivory,
   kompozycja (papier z logo, pióro, teczka, lampa) jest po prawej.
   Pełnoekranowe tło zakotwiczone do prawej krawędzi; gradient ivory wygasza
   tylko lewą/mniej istotną część, nie dotykając głównego motywu po prawej. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(
      90deg,
      var(--ivory) 0%,
      var(--ivory) 28%,
      rgba(247, 241, 231, 0.96) 38%,
      rgba(247, 241, 231, 0.76) 49%,
      rgba(247, 241, 231, 0.34) 62%,
      rgba(247, 241, 231, 0.08) 76%,
      rgba(247, 241, 231, 0) 88%
    ),
    url("../assets/hero-biuro-v2.webp");
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-top: clamp(6rem, 11vw, 9.5rem);
  padding-bottom: clamp(6rem, 11vw, 9.5rem);
  max-width: calc(var(--maxw));
}

.hero__content > * { max-width: 32rem; }

/* Headline: zwarte łamanie wymuszone <br> — linia 1 „…w sprawach",
   linia 2 krótkie „wymagających precyzji.". Rozmiar dobrany tak, aby tekst
   trzymał się lewej strefy i nie wchodził pod kompozycję zdjęcia. */
.hero__content .h-xl {
  font-size: clamp(2.3rem, 3.85vw, 3.05rem);
  max-width: none;
}

.hero__note {
  margin-top: 1.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Statyczne światło z okna — miękka, nieruchoma poświata nad blatem i
   papierem, dopełniająca naturalne światło ze zdjęcia. Warstwa pod treścią
   (z-index 1 < content 2), więc nie dotyka tekstu. Świadomie BEZ animacji:
   hero jest elegancką, statyczną kompozycją, a nie efektem ruchu. */
.hero__sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      60% 74% at 60% 50%,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.13) 34%,
      rgba(255, 255, 255, 0) 66%
    );
  mix-blend-mode: screen;
  opacity: 0.55;
  filter: blur(36px);
}

@media (max-width: 920px) {
  /* na mobile priorytetem jest czytelność tekstu — mocna zasłona ivory,
     zdjęcie pozostaje tylko delikatną teksturą pod treścią */
  .hero__bg {
    background-image:
      linear-gradient(
        180deg,
        rgba(247, 241, 231, 0.9) 0%,
        rgba(247, 241, 231, 0.86) 55%,
        rgba(247, 241, 231, 0.74) 100%
      ),
      url("../assets/hero-biuro-v2.webp");
    background-position: right center;
  }

  /* na mocno zasłoniętym zdjęciu mobilnym poświata jest ledwie wyczuwalna */
  .hero__sheen { opacity: 0.12; }
}

/* ---------- Sekcja: Dla kogo ---------- */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: 3rem;
}

.audience {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  transition: border-color 350ms var(--ease);
}

.audience:hover { border-top-color: var(--gold); }

.audience h3 { font-size: 1.45rem; margin-bottom: 0.6rem; }

.audience p { color: var(--muted); font-size: 0.9844rem; }

@media (max-width: 760px) {
  .audience-grid { grid-template-columns: 1fr; }
}

/* ---------- Specjalizacje ---------- */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.25rem;
}

.spec-card {
  position: relative;
  background: linear-gradient(180deg, #FFFDF9 0%, var(--paper) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2rem 1.75rem 1.9rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 360ms var(--ease),
              box-shadow 420ms var(--ease);
}

/* Cienki złoty narożnik w prawym górnym rogu — jedyny ozdobny akcent karty.
   Na hover delikatnie się wydłuża; bez ikon, ramek ozdobnych i unoszenia. */
.spec-card::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 26px;
  height: 26px;
  border-top: 1px solid rgba(168, 137, 85, 0.5);
  border-right: 1px solid rgba(168, 137, 85, 0.5);
  border-top-right-radius: var(--radius-card);
  transition: width 520ms var(--ease),
              height 520ms var(--ease),
              border-color 520ms var(--ease);
  pointer-events: none;
}

.spec-card:hover,
.spec-card:focus-visible {
  border-color: rgba(168, 137, 85, 0.4);
  box-shadow: 0 10px 30px -24px rgba(20, 32, 46, 0.22);
}

.spec-card:hover::after,
.spec-card:focus-visible::after {
  width: 38px;
  height: 38px;
  border-color: var(--gold);
}

/* Czytelny, elegancki focus dla nawigacji klawiaturą */
.spec-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.spec-card__num {
  font-family: var(--serif);
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  color: var(--gold);
}

.spec-card h3 { font-size: 1.4rem; line-height: 1.25; }

.spec-card p { color: var(--muted); font-size: 0.9375rem; line-height: 1.65; }

@media (max-width: 980px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .spec-grid { grid-template-columns: 1fr; } }

/* ---------- Szczegółowy zakres pomocy: akordeon (Specjalizacje) ----------
   Redakcyjny, butikowy — bez kart, ikon tematycznych, cieni i ramek. Pozycje
   oddzielone cienkimi liniami; znak rozwijania to subtelny plus → minus. */
.practice-accordion {
  /* odstęp od leadu strony daje padding-top sekcji (~3-4rem na desktopie) */
  margin-top: 0;
  border-top: 1px solid var(--line);
}

.practice-accordion__item {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 132px;
}

/* Tytuł = realny <h2> (semantyka), wyglądem neutralny — styl niesie .__name.
   Wyzwalacz to <button> wewnątrz h2 (dawniej <summary>). */
.practice-accordion__title { margin: 0; font: inherit; }

.practice-accordion__trigger {
  display: grid;
  grid-template-columns: 2.25rem 1fr 1.25rem;
  align-items: start;
  gap: 1rem;
  width: 100%;
  padding: 1.5rem 0.25rem;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.practice-accordion__trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: var(--radius-paper);
}

.practice-accordion__num {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding-top: 0.12rem;
}

/* tytuł + krótki opis (widoczny od razu, gdy pozycja jest zamknięta) */
.practice-accordion__head {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.practice-accordion__name {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
  transition: color 250ms var(--ease);
}

.practice-accordion__trigger:hover .practice-accordion__name,
.practice-accordion__item.is-open .practice-accordion__name {
  color: var(--gold);
}

.practice-accordion__short {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 54em;
}

/* po rozwinięciu krótki opis ustępuje pełnemu opisowi w treści */
.practice-accordion__item.is-open .practice-accordion__short { display: none; }

/* Znak rozwijania: plus, który po otwarciu staje się minusem */
.practice-accordion__icon {
  position: relative;
  align-self: start;
  margin-top: 0.4rem;
  width: 14px;
  height: 14px;
  color: var(--gold);
}

.practice-accordion__icon::before,
.practice-accordion__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}

.practice-accordion__icon::before {
  top: 50%; left: 0; right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}

.practice-accordion__icon::after {
  left: 50%; top: 0; bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
}

.practice-accordion__item.is-open .practice-accordion__icon::after {
  opacity: 0;
  transform: translateX(-50%) rotate(90deg);
}

/* Progresywne wzbogacanie: bez JS (html bez .js) wszystkie panele są widoczne,
   a znak +/- ukryty (brak interakcji). Z JS (html.js) chowamy panele pozycji
   zamkniętych — pokazujemy tylko otwartą. Druk nadpisuje to (patrz @media print). */
html:not(.js) .practice-accordion__icon { display: none; }
/* Płynne rozwijanie metodą grid-template-rows 0fr→1fr — animuje do NATURALNEJ
   wysokości (bez max-height-hacka i janku). Wewnętrzny .practice-accordion__panel
   = overflow:hidden (zgniatanie) + visibility:hidden (zwinięta treść poza tab-order
   i drzewem dostępności). Bez JS: brak tych reguł → wszystkie panele widoczne. */
html.js .practice-accordion__content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-slow) var(--ease); }
html.js .practice-accordion__item.is-open .practice-accordion__content { grid-template-rows: 1fr; }
html.js .practice-accordion__panel { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility var(--motion-slow) var(--ease); }
html.js .practice-accordion__item.is-open .practice-accordion__panel { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  html.js .practice-accordion__content, html.js .practice-accordion__panel { transition: none; }
}

.practice-accordion__content {
  padding: 0;
}
.practice-accordion__panel {
  padding: 0 1.25rem 0 3.25rem;   /* BEZ pionowego paddingu — padding nie zwija się z grid 0fr (zostawałby pasek) */
}
.practice-accordion__panel > :last-child { margin-bottom: 1.85rem; }   /* dolny oddech jako margines — clipowany przez overflow:hidden przy zwinięciu */

.practice-accordion__content p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 48em;
  margin-bottom: 0.9rem;
}

/* Krótki opis obszaru — pełna szerokość, nad dwiema kolumnami */
.practice-accordion__intro { margin-bottom: 1.7rem; }

/* Dwie kolumny: Przykładowe sytuacje | Zakres wsparcia (mobile: jedna) */
.practice-accordion__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}

/* Subtelny podnagłówek z delikatnym złotym akcentem i cienkim separatorem */
.practice-accordion__subhead {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.practice-accordion__content ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.practice-accordion__content li { margin-bottom: 0.5rem; }
.practice-accordion__content li::marker { color: var(--gold); }

@media (max-width: 640px) {
  .practice-accordion__panel { padding-left: 0; }
  .practice-accordion__cols { grid-template-columns: 1fr; gap: 1.85rem; }
}

/* ---------- Jak pracuję ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3.25rem;
}

.step { border-top: 1px solid rgba(247, 241, 231, 0.18); padding-top: 1.6rem; }

.step__num {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.step h3 { font-size: 1.4rem; margin-bottom: 0.55rem; }

.step p { font-size: 0.9375rem; color: rgba(247, 241, 231, 0.66); }

/* Eleganckie domknięcie sekcji — dyskretna notka wyśrodkowana pod całą siatką */
.steps-note {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 241, 231, 0.18);
  text-align: center;
  font-size: 0.875rem;
  color: rgba(247, 241, 231, 0.72);
}

.steps-note a {
  color: var(--ivory);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(168, 137, 85, 0.55);
  transition: color 250ms var(--ease);
}

.steps-note a:hover { color: var(--gold); }

/* na szerokich ekranach notka mieści się w jednej linii */
@media (min-width: 980px) {
  .steps-note { white-space: nowrap; }
}

/* mniejszy dolny pas tylko dla sekcji „Jak pracuję" */
.work-section { padding-bottom: clamp(3.5rem, 6vw, 5rem); }

@media (max-width: 920px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- O mnie ---------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.portrait {
  position: relative;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: clamp(0.85rem, 1.6vw, 1.25rem);
}

.portrait::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 64px;
  height: 64px;
  border-bottom: 1.5px solid var(--gold);
  border-left: 1.5px solid var(--gold);
  pointer-events: none;
}

.portrait__frame {
  aspect-ratio: 4 / 5;
  background: linear-gradient(165deg, var(--navy) 0%, #1D2D3F 70%, #24364A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.portrait__frame img.is-placeholder {
  width: 52%;
  opacity: 0.16;
}

.portrait__frame img.is-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait__caption {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 420px; }
}

/* ---------- O mnie — rozszerzony biogram ---------- */

.about-grid--bio { align-items: start; }

.about-bio p:not(.kicker) {
  margin-bottom: 1.15rem;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 40em;
}

.about-bio p:not(.kicker):last-child { margin-bottom: 0; }

/* na desktopie portret towarzyszy czytanemu biogramowi */
@media (min-width: 881px) {
  .about-grid--bio .portrait { position: sticky; top: 130px; }
}

/* ---------- Publikacje ---------- */

/* Etykieta tematu (kategoria) — mała wersalikowa, w złocie */
.pub-card__tag {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Pasek tematów / filtrów — spokojne linki tekstowe, nie karty */
/* Pasek narzędzi: wyszukiwarka + filtry kategorii */
.publication-tools { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.publication-search-field { position: relative; max-width: 42rem; margin-bottom: 1.35rem; }
.publication-search { display: block; }

/* Sugestie pod searchbarem — spokojny panel (NIE command palette / SaaS dropdown). */
.publication-suggestions {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: var(--z-dropdown, 40);
  margin: 0.4rem 0 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 50px -30px rgba(20, 32, 46, 0.25);
}
.publication-suggestions[hidden] { display: none; }
.publication-suggestions li { margin: 0; }
.publication-suggestions button {
  display: block; width: 100%; text-align: left;
  padding: 0.55rem 0.7rem;
  font-family: var(--sans); font-size: 0.95rem; color: var(--navy);
  background: none; border: 0; cursor: pointer; border-radius: var(--radius-paper);
  transition: background-color var(--motion-fast, 160ms) var(--ease), color var(--motion-fast, 160ms) var(--ease);
}
.publication-suggestions button:hover,
.publication-suggestions button.is-active { background: rgba(168, 137, 85, 0.08); color: var(--gold); }
.publication-suggestions button:focus-visible { outline: 2px solid rgba(168, 137, 85, 0.45); outline-offset: -2px; }
.publication-suggestions mark { background: none; color: var(--gold); font-weight: 600; }
.publication-search span {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.publication-search input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.95rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--navy);
  border-radius: var(--radius-field);
  transition: border-color 250ms var(--ease);
}
.publication-search input::placeholder { color: var(--muted); }
.publication-search input:focus {
  outline: 2px solid rgba(168, 137, 85, 0.35);
  outline-offset: 2px;
  border-color: var(--gold);
}

/* Filtry kategorii — przyciski (filtrowanie na tej samej stronie) */
/* Filtr kategorii — język „złotej nici" (1:1 z wizualizacji V5): zdaniowa typografia,
   neutralne separatory między kategoriami, aktywna = mocniejszy GRANAT + krótki złoty
   znacznik, który RYSUJE SIĘ przy każdej zmianie kategorii (złoto oszczędnie). */
.publication-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 1.2rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}

.publication-filter button {
  position: relative;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0 0 5px;
  cursor: pointer;
  transition: color 250ms var(--ease);
}

/* separator neutralny — cienka kreska, cichsza niż tekst; bez złota, bez sugerowania osi.
   Rozcieńczony GRANAT zamiast koloru line: #E6DED2 na tle ivory jest niemal niewidzialny
   (kontrast ~1.06:1) — hairline w navy .2 czyta się, a nadal jest szeptem. */
.publication-filter button + button::before {
  content: "";
  position: absolute;
  left: -0.63rem;
  top: 0.22em;
  bottom: calc(0.32em + 5px);
  width: 1px;
  background: rgba(20, 32, 46, 0.2);
}
/* przy zawinięciu wiersza pierwszy przycisk rzędu bez separatora (JS: .rowstart) */
.publication-filter button.rowstart::before { display: none; }

.publication-filter button:hover { color: var(--navy); }
.publication-filter button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-paper); }

/* aktywna kategoria: mocniejszy tekst + krótki złoty znacznik pod nazwą */
.publication-filter button.is-active { color: var(--navy); font-weight: 600; }
.publication-filter button.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: var(--radius-line);
  background: var(--gold);
  transform-origin: left center;
}
/* nić rysuje się od lewej przy każdym wyborze (animacja odpala się przy nadaniu .is-active) */
@media (prefers-reduced-motion: no-preference) {
  .publication-filter button.is-active::after { animation: pubMarkDraw 450ms var(--ease); }
}
@keyframes pubMarkDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* na węższych ekranach filtr = przewijana wstęga LEKKICH CHIPSÓW (V5): pigułki z obwódką —
   większy cel dotykowy (~40px) i czytelny stan aktywny (złota obwódka zamiast znacznika) */
@media (max-width: 720px) {
  .publication-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    padding-top: 0.15rem;
    scroll-padding-inline: 0.2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .publication-filter::-webkit-scrollbar { display: none; }
  .publication-filter button {
    flex: none;
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--paper);
    transition: color 250ms var(--ease), border-color 250ms var(--ease);
  }
  .publication-filter button + button::before { display: none; }   /* pigułki nie potrzebują separatorów */
  .publication-filter button.is-active { border-color: var(--gold); }
  .publication-filter button.is-active::after { display: none; }   /* akcentem jest złota obwódka, nie znacznik */
}

/* Komunikat o braku wyników */
.publication-no-results {
  margin-top: 2rem;
  padding: 1.5rem 0.25rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.publication-no-results p { margin-bottom: 1rem; max-width: 44em; line-height: 1.7; }

/* Sugestie w empty state — spokojne pigułki (szybkie wyszukiwania). */
.publication-no-results__suggestions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }
.publication-no-results__suggestions .publication-problem {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition:
    border-color var(--motion-medium, 260ms) var(--ease),
    color var(--motion-medium, 260ms) var(--ease),
    background-color var(--motion-medium, 260ms) var(--ease);
}
.publication-no-results__suggestions .publication-problem:hover {
  border-color: rgba(168, 137, 85, 0.5);
  color: var(--gold);
  background: rgba(168, 137, 85, 0.04);
}
.publication-no-results__suggestions .publication-problem:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.link-reset-publications {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gold);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 0.2rem;
  cursor: pointer;
  transition: border-color 250ms var(--ease);
}
.link-reset-publications:hover { border-bottom-color: var(--gold); }
.link-reset-publications:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Licznik wyników — spokojny, Inter, nad listą (np. „Znaleziono 3 publikacje."). */
.publication-count {
  margin: 1.4rem 0 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* =========================================================================
   Typograficzne okładki publikacji — system produkcyjny.
   calm = domyślny (Cormorant), display = akcent Bodoni Moda.
   Tytuły w container-query units (cqi) → komponent działa i jako mała karta,
   i jako szerokie hero (vw-fallback dla starszych przeglądarek). Okładka jest
   DEKORACYJNA (aria-hidden) — prawdziwy tytuł żyje w .publication-card__title
   (h3) albo h1 artykułu. Wartości cqi (15 / 11.5) sprawdzone na długim
   „Odpowiedzialność"; NIE podbijać do 24cqi (przepełnia długie polskie słowa).
   ========================================================================= */
.publication-cover--typographic {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(320px, 42vw, 520px);
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0)),
    var(--paper);
  border: 1px solid rgba(230, 222, 210, 0.92);
  border-radius: var(--radius-card);
  color: var(--navy);
}
.publication-cover--typographic::before,
.publication-cover--typographic::after {
  content: "";
  position: absolute;
  left: clamp(28px, 4vw, 56px);
  right: clamp(28px, 4vw, 56px);
  height: 1px;
  background: rgba(168, 137, 85, 0.34);
  pointer-events: none;
}
.publication-cover--typographic::before { top: clamp(24px, 3vw, 42px); }
.publication-cover--typographic::after  { bottom: clamp(24px, 3vw, 42px); }

.publication-cover__eyebrow {
  position: relative; z-index: 1;
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
.publication-cover__title {
  position: relative; z-index: 1;
  max-width: 11ch;
  margin: auto 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 6rem);     /* fallback bez container queries */
  font-size: clamp(2.6rem, 15cqi, 7rem);    /* skala do szerokości okładki */
  line-height: 0.84;
  letter-spacing: -0.055em;
  color: var(--navy);
  overflow-wrap: break-word;
  hyphens: auto;
}
.publication-cover__title span { display: block; }
.publication-cover__subtitle {
  position: relative; z-index: 1;
  margin: clamp(16px, 2.2cqi, 28px) 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 4.5vw, 3rem);
  font-size: clamp(1.4rem, 6.5cqi, 3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--gold);
}
.publication-cover__footer {
  position: relative; z-index: 1;
  margin-top: clamp(28px, 6cqi, 64px);
  padding-top: clamp(14px, 2cqi, 22px);
  border-top: 1px solid rgba(168, 137, 85, 0.32);
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(20, 32, 46, 0.72);
}
/* display = akcent Bodoni Moda (mniejsza skala niż Cormorant — Bodoni szerszy). */
.publication-cover--display .publication-cover__title {
  font-family: "Bodoni Moda", var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.88;
  font-size: clamp(2rem, 11.5cqi, 5.9rem);
}
.publication-cover--display .publication-cover__subtitle { letter-spacing: -0.018em; }

/* Karta (okładka + treść). Hover spokojny — bez glow/SaaS. */
.publication-card--typographic .publication-card__link { display: block; color: inherit; text-decoration: none; }
.publication-card--typographic .publication-cover--typographic {
  transition:
    border-color var(--motion-medium) var(--ease),
    transform var(--motion-slow) var(--ease),
    box-shadow var(--motion-slow) var(--ease);
}
.publication-card--typographic .publication-card__link:hover .publication-cover--typographic,
.publication-card--typographic .publication-card__link:focus-visible .publication-cover--typographic {
  transform: translateY(-2px);
  border-color: rgba(168, 137, 85, 0.42);
  box-shadow: 0 24px 70px rgba(20, 32, 46, 0.08);
}
.publication-card--typographic .publication-card__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--radius-card); }
.publication-card__body { padding: clamp(1.1rem, 2vw, 1.45rem) 0.15rem 0; }
.publication-card__category { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.5rem; }
.publication-card__title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.55rem); line-height: 1.22; color: var(--navy); margin: 0 0 0.55rem; }
.publication-card__excerpt { font-family: var(--sans); color: var(--muted); font-size: 0.9375rem; line-height: 1.6; margin: 0; }

@media (max-width: 640px) {
  .publication-cover--typographic { min-height: 360px; padding: 28px; }
  .publication-cover__subtitle { line-height: 1; }
}

/* Układ desktop: główna kolumna + węższy pasek boczny */
.publication-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

/* ---------- Najczęściej wybierane tematy (grid wyróżnionych, JS, per-kategoria) ---------- */
.featured-grid { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.featured-grid[hidden] { display: none; }
.featured-grid__title {
  font-family: var(--sans);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
}
/* Pionowa lista redakcyjnych wyróżnień (tekst + obraz/okładka), nie 3 wąskie karty. */
.featured-grid__items { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 2.6vw, 1.75rem); }
.featured-editorial-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.9fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.6rem, 3vw, 2.35rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition:
    border-color var(--motion-medium, 260ms) var(--ease),
    box-shadow var(--motion-slow, 420ms) var(--ease),
    transform var(--motion-slow, 420ms) var(--ease);
}
.featured-editorial-card::after {
  content: ""; position: absolute; top: -1px; right: -1px;
  width: 30px; height: 30px;
  border-top: 1px solid var(--gold); border-right: 1px solid var(--gold);
  pointer-events: none;
}
.featured-editorial-card:hover,
.featured-editorial-card:focus-visible { transform: translateY(-2px); border-color: rgba(168, 137, 85, 0.42); box-shadow: 0 18px 50px -34px rgba(20, 32, 46, 0.28); }
.featured-editorial-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.featured-editorial-card__tag { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.75rem; }
.featured-editorial-card__title {
  font-family: "Bodoni Moda", var(--serif);   /* Bodoni = akcent wyróżnionych tytułów (§17) */
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1; letter-spacing: -0.018em;
  color: var(--navy); margin: 0 0 0.85rem;
}
.featured-editorial-card__excerpt { color: var(--muted); line-height: 1.7; max-width: 42em; margin: 0 0 1.2rem; }
.featured-editorial-card__more { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; color: var(--gold); }
.featured-editorial-card__visual {
  margin: 0; aspect-ratio: 4 / 3;
  border: 1px solid var(--line); background: var(--paper); overflow: hidden;
}
.featured-editorial-card__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Typograficzna okładka (fallback bez obrazu) dopasowana do małego kadru karty. */
.featured-editorial-card__visual .publication-cover--typographic { min-height: 0; height: 100%; border: 0; border-radius: 0; padding: clamp(1rem, 5cqi, 1.6rem); }
.featured-editorial-card__visual .publication-cover__title { font-size: clamp(1.6rem, 20cqi, 3.2rem); }
.featured-editorial-card__visual .publication-cover__subtitle { font-size: clamp(1rem, 8cqi, 1.5rem); }
@media (max-width: 760px) {
  .featured-editorial-card { grid-template-columns: 1fr; }
  .featured-editorial-card__visual { order: -1; aspect-ratio: 16 / 10; }
}

/* Wyróżniony wpis — redakcyjny blok, nie karta blogowa; cienki złoty narożnik */
.featured-publication {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(1.75rem, 3vw, 2.6rem);
  overflow: hidden;
}

.featured-publication::after {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 30px; height: 30px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  border-top-right-radius: var(--radius-card);
  pointer-events: none;
}

/* Kategoria nad tytułem (w kolumnie tekstowej, nie w osobnej wąskiej kolumnie) */
.featured-publication__body .pub-card__tag { display: inline-block; margin-bottom: 0.75rem; }

/* Tytuł wyróżnionej publikacji — akcent Bodoni Moda (NIE wszystkie H2!).
   Cięższa waga (600) + spokojniejszy letter-spacing dla czytelności. */
.featured-publication__body h2 {
  font-family: "Bodoni Moda", var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin-bottom: 0.85rem;
}
.featured-publication__body h2.is-long { line-height: 1.05; letter-spacing: -0.015em; }
.featured-publication__body p { color: var(--muted); line-height: 1.7; max-width: 42em; margin-bottom: 1.25rem; }

/* Tagi wyróżnionego wpisu — subtelne, z cienkimi separatorami, NIEklikalne */
.featured-publication__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.95rem;
  margin: 0 0 1.35rem;
  padding: 0;
}
.featured-publication__tags li {
  position: relative;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.featured-publication__tags li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -0.6rem;
  color: var(--line);
}

/* Obraz wyróżnionego wpisu — prawa kolumna (~40%), większy, proporcja 4:3 */
.featured-publication__visual {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.featured-publication__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Ukrywanie wpisów przez wyszukiwarkę/filtr — !important bije display:grid kart,
   przez co (inaczej niż atrybut [hidden]) realnie chowa wyróżniony wpis i wiersze */
.is-filtered-out { display: none !important; }

/* Lista publikacji — spokojne wiersze, nie kafelki */
.publications-index { margin-top: clamp(3rem, 6vw, 4.5rem); }
.publication-list { margin-top: 2.25rem; border-top: 1px solid var(--line); }

.publication-row {
  display: grid;
  grid-template-columns: 4.5rem 8rem 1fr 1.5rem;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.5rem 0.25rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 250ms var(--ease);
}

.publication-row time { font-family: var(--serif); font-size: 1.05rem; color: var(--gold); }
.publication-row .pub-card__tag { padding-top: 0.15rem; }

.publication-row__text h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 0.4rem;
  transition: color 250ms var(--ease);
}
.publication-row__text p { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; max-width: 46em; }

.publication-row__arrow { align-self: center; color: var(--gold); transition: transform 250ms var(--ease); }
.publication-row:hover { border-bottom-color: rgba(168, 137, 85, 0.5); }
.publication-row:hover .publication-row__text h3 { color: var(--gold); }
.publication-row:hover .publication-row__arrow { transform: translateX(4px); }
.publication-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-paper); }

.publication-empty-note {
  margin-top: 1.6rem;
  color: var(--muted);
  font-size: 0.9375rem;
  font-style: italic;
}

/* Pasek boczny: obszary tematyczne (pomocniczy, typograficzny) */
.publication-sidebar { position: sticky; top: 130px; border-top: 2px solid var(--gold); padding-top: 1.3rem; }
.publication-sidebar__title {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.publication-topics { list-style: none; margin: 0; padding: 0; }
.publication-topics li { border-bottom: 1px solid var(--line); }
.publication-topics li:last-child { border-bottom: 0; }
.publication-topics button {
  display: block;
  width: 100%;
  padding: 0.85rem 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--navy);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 250ms var(--ease);
}
.publication-topics button:hover { color: var(--gold); }
.publication-topics button.is-active { color: var(--gold); }
.publication-topics button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 880px) {
  .publication-layout { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 3.5rem); }
  .publication-sidebar { position: static; }
}

/* wyróżniony wpis — na węższych ekranach stack; obraz schodzi pod tekst */
@media (max-width: 720px) {
  .featured-publication { grid-template-columns: 1fr; gap: 1.5rem; }
  .featured-publication__visual { width: 100%; max-width: none; aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  .publication-row { grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; }
  .publication-row time { grid-row: 1; grid-column: 1; }
  .publication-row .pub-card__tag { grid-row: 1; grid-column: 2; align-self: center; justify-self: start; padding-top: 0; }
  .publication-row__text { grid-row: 2; grid-column: 1 / -1; }
  .publication-row__arrow { display: none; }
}

/* ---------- Pojedynczy artykuł (publikacje/*.html) ---------- */
.article-head { padding: clamp(3.5rem, 7vw, 5.5rem) 0 0; }
/* mniejszy H1 tylko w artykułach (długie tytuły SEO) — globalny .h-xl bez zmian */
/* H1 artykułu — JEDYNY duży tytuł w Bodoni Moda (font wyróżnienia). Line-height
   trzymany ~1.0 (nie 0.95) z myślą o długich polskich tytułach z diakrytykami. */
/* H1 artykułu — Cormorant Garamond (decyzja 2026-06-28: Bodoni za cienki/mniej
   czytelny w długich polskich tytułach; Bodoni zostaje TYLKO dla tytułów
   wyróżnionych publikacji i okładek --display). */
.article-head .h-xl {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 13.5em;
}
.article-head .h-xl.is-long {
  line-height: 1.06;
  letter-spacing: -0.025em;
}
@media (max-width: 640px) {
  .article-head .h-xl { line-height: 1.08; letter-spacing: -0.02em; }
}

.article-meta {
  margin-top: 1.25rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--muted);
}
.article-meta time { color: var(--gold); }
.article-meta--sub { margin-top: 0.3rem; font-size: 0.75rem; opacity: 0.85; }

/* Tagi artykułu — bardzo subtelne, z cienkimi separatorami, nieklikalne */
.article-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.95rem;
  margin: 1rem 0 0;
  padding: 0;
}
.article-tags li {
  position: relative;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.article-tags li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -0.6rem;
  color: var(--line);
}

/* Box „Najkrócej" — spokojny redakcyjny blok, NIE kolorowy alert */
.article-summary {
  clear: both;
  max-width: 640px;   /* jednolita miara z resztą treści — bez wystającego pasa (zaznaczenie) */
  margin: clamp(0.5rem, 1.5vw, 1rem) 0 clamp(2rem, 4vw, 3rem);
  padding: 1.25rem 1.4rem;
  background: var(--paper);
  border-left: 2px solid var(--gold);
}
.article-summary h2 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.65rem;
}
.article-summary p { color: var(--muted); font-size: 0.98rem; line-height: 1.75; margin: 0; }
/* Lead artykułu na tej samej miarze co treść (640px) — wszystkie bloki tekstu równe,
   więc zaznaczenie nie tworzy wystających, szerszych pasów. Globalny .lead nietknięty. */
.article-page .lead { max-width: 640px; }

/* Mała grafika redakcyjna opływana przez tekst po prawej — NIE tło hero */
.article-aside-visual {
  float: right;
  width: min(34%, 270px);
  margin: 0.35rem 0 1.25rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  overflow: hidden;
  position: relative;
}
.article-aside-visual::after {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 24px; height: 24px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  pointer-events: none;
}
.article-aside-visual img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* domknięcie float + elementy, które zawsze schodzą poniżej grafiki */
.article-container::after { content: ""; display: block; clear: both; }
.article-flow::after { content: ""; display: block; clear: both; }
.article-container > h2,
.article-flow > h2,
.article-summary,
.article-related,
.article-legal-basis,
.article-documents { clear: both; }

/* Sekcje strukturalne artykułu — redakcyjne, bez kart SaaS */
.article-documents,
.article-legal-basis,
.article-related {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.article-documents h2,
.article-legal-basis h2,
.article-related h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  margin: 0 0 0.9rem;
}
.article-documents ul { margin: 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.78; }
.article-documents li { margin-bottom: 0.4rem; }
.article-documents li::marker { color: var(--gold); }
.article-legal-basis p { color: var(--muted); line-height: 1.8; max-width: 40em; }
.article-related ul { list-style: none; margin: 0; padding: 0; }
.article-related li { margin-bottom: 0.65rem; }
.article-related a {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.15rem;
  transition: color 250ms var(--ease), border-color 250ms var(--ease);
}
.article-related a:hover { color: var(--gold); border-bottom-color: var(--gold); }

@media (max-width: 760px) {
  .article-aside-visual { float: none; width: 100%; max-width: 420px; margin: 1.5rem 0 1.75rem; }
}

.article-body { padding-top: clamp(2.25rem, 4vw, 3rem); }
.article-container { max-width: 760px; }
.article-body .article-container > p,
.article-body .article-flow > p {
  font-size: 1.0625rem;
  line-height: 1.78;
  margin-bottom: 1.35rem;
  max-width: 640px;
}
.article-body .article-container > h2,
.article-body .article-flow > h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -0.018em;       /* Cormorant (NIE Bodoni), spokojny redakcyjny śródtytuł */
  margin: clamp(2rem, 4vw, 2.75rem) 0 0.9rem;
  max-width: 640px;
}
/* zwarta, czytelna kolumna treści; nagłówek artykułu dzieli tę samą oś (760px) */
.article-body .article-container > ul,
.article-body .article-flow > ul,
.article-documents,
.article-legal-basis,
.article-related,
.article-info,
.article-back { max-width: 640px; }

/* Obraz artykułu — redakcyjna ilustracja po leadzie, przed „Najkrócej".
   NIE tło hero: ograniczona proporcją 16:10, cienka ramka, subtelny złoty narożnik. */
.article-figure {
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  overflow: hidden;
  position: relative;
}
.article-figure::after {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 26px; height: 26px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  pointer-events: none;
}
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  max-height: clamp(18rem, 42vw, 28rem);
  object-fit: cover;
}

/* Dane artykułu (autor/kategoria/daty/tagi) — subtelny blok na końcu treści,
   przed „Powiązane publikacje"; mała typografia, spokojne separatory */
.article-info {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.7;
}
.article-info p { margin: 0; }
.article-info p + p { margin-top: 0.2rem; }
.article-info time { color: var(--gold); }
.article-info .article-tags { margin-top: 0.85rem; }

.article-back {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: baseline;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
/* drugi link mniej eksponowany */
.article-back .link-arrow:nth-child(2) {
  font-size: 0.875rem;
  color: var(--muted);
  border-bottom-color: transparent;
}
.article-back .link-arrow:nth-child(2):hover { color: var(--gold); }

/* ---------- Komponenty wpisu blogowego (artykuł /blog) ----------
   Spis treści, praktyczne boxy („Czego nie robić", miękki CTA), kategoria+tagi
   pod leadem, śródtytuły H3 i listy w głównej kolumnie treści. Wszystko widoczne
   statycznie — bez zależności od .reveal/IntersectionObserver. */

/* kotwice śródtytułów pod sticky-headerem (spis treści) */
.article-container [id] { scroll-margin-top: 116px; }

/* kategoria + tagi pod leadem */
.article-tagrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.1rem;
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
}
.article-tagrow .article-tags { margin: 0; }

/* śródtytuły H3 w głównej kolumnie treści */
.article-body .article-container > h3,
.article-body .article-flow > h3 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  line-height: 1.3;
  color: var(--navy);
  margin: clamp(1.7rem, 3vw, 2.2rem) 0 0.7rem;
  max-width: 640px;
}

/* listy wyliczeniowe w głównej kolumnie treści */
.article-body .article-container > ul,
.article-body .article-flow > ul {
  margin: 0 0 1.35rem;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.article-body .article-container > ul li,
.article-body .article-flow > ul li { margin-bottom: 0.5rem; }
.article-body .article-container > ul li::marker,
.article-body .article-flow > ul li::marker { color: var(--gold); }

/* Spis treści „W artykule" */
.article-toc {
  clear: both;
  max-width: 640px;
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  padding: clamp(1.3rem, 2.5vw, 1.7rem) clamp(1.4rem, 3vw, 1.9rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-card);
}
.article-toc__title {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.95rem;
}
.article-toc ol { margin: 0; padding-left: 1.3rem; color: var(--muted); line-height: 1.6; }
.article-toc li { margin-bottom: 0.5rem; }
.article-toc li::marker { color: var(--gold); }
.article-toc a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 250ms var(--ease), border-color 250ms var(--ease);
}
.article-toc a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.article-toc a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-paper); }

/* --- Spis treści: trzy stany czytania (golden-thread) ---
   Scrollspy w main.js dodaje .has-spy i nadaje <li> klasy is-read / is-cur / is-ahead.
   Stany rozróżniane SAMYM tekstem (bez kółek i kresek): aktualna sekcja najmocniejsza
   (mocny tekst + złoty pasek + delikatne tło), przed czytelnikiem — neutralna,
   przeczytane — najbardziej wygaszone, ale wciąż czytelne i klikalne.
   Bez JS spis wygląda i działa jak dotychczas. */
.article-toc.has-spy ol { list-style: none; padding-left: 0; counter-reset: toc; }
.article-toc.has-spy li { position: relative; counter-increment: toc; margin-bottom: 0.12rem; }
.article-toc.has-spy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  bottom: 0.5em;
  width: 2px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 250ms var(--ease);
}
.article-toc.has-spy a {
  display: block;
  padding: 0.3rem 0.6rem 0.3rem 0.8rem;
  border-bottom: 0;
  border-radius: var(--radius-paper);
  color: var(--muted);
}
.article-toc.has-spy a::before { content: counter(toc) ".\00a0"; }
.article-toc.has-spy li.is-read a { color: rgba(20, 32, 46, 0.5); }
.article-toc.has-spy li.is-read a:hover,
.article-toc.has-spy li.is-ahead a:hover { color: var(--navy); }
.article-toc.has-spy li.is-cur { background: rgba(168, 137, 85, 0.08); border-radius: var(--radius-paper); }
.article-toc.has-spy li.is-cur::before { opacity: 1; }
.article-toc.has-spy li.is-cur a { color: var(--navy); font-weight: 600; }

/* Nagłówek spisu jako przycisk (JS podmienia <p> na <button>): na desktopie inertny
   i wyglądający jak dotychczasowy tytuł, na mobile zwijany blok z licznikiem sekcji —
   cały nagłówek klikalny. */
.article-toc__toggle {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 0.95rem;
  cursor: default;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.article-toc__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-paper); }
.article-toc__count {
  display: none;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
}
.article-toc__chevron { display: inline-block; margin-left: 0.4rem; transition: transform 250ms var(--ease); }
@media (max-width: 720px) {
  .article-toc__toggle { cursor: pointer; }
  .article-toc__count { display: inline; }
  .article-toc__toggle[aria-expanded="false"] { margin-bottom: 0; }
  .article-toc__toggle[aria-expanded="false"] .article-toc__chevron { transform: rotate(-90deg); }
}

/* ---------- Artykuł: dwukolumnowy układ ze spisem-szyną (golden-thread V5) ----------
   Desktop ≥1000px: spis treści = cicha LEWA kolumna sticky (bez karty) obok tekstu —
   stany czytania ze scrollspy są stale widoczne podczas lektury. Nagłówek artykułu
   dostaje tę samą siatkę (pusta kolumna 1), więc tytuł i treść dzielą oś prawej kolumny.
   Poniżej 1000px: układ jednokolumnowy, spis wraca do postaci karty nad treścią
   (a na mobile ≤720px dodatkowo jest zwijany). */
@media (min-width: 1000px) {
  .article-container--rail {
    max-width: 1116px;
    display: grid;
    grid-template-columns: minmax(200px, 15rem) minmax(0, 760px);
    column-gap: clamp(2.75rem, 5vw, 4.5rem);
  }
  .article-container--rail > * { grid-column: 2; }
  .article-container--rail > .article-toc {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 122px;                          /* pod lepkim nagłówkiem strony */
    align-self: start;
    max-height: calc(100vh - 140px);     /* niski viewport: spis przewija się wewnątrz szyny */
    overflow-y: auto;
    margin: 0;
    padding: 0;
    background: none;                    /* szyna = cichy spis V5, nie karta */
    border: 0;
    border-radius: 0;
    max-width: none;
  }
  .article-container--rail > .article-flow { grid-column: 2; grid-row: 1; }
  .article-container--rail .article-toc ol { font-size: 0.85rem; line-height: 1.45; }
  .article-container--rail .article-toc.has-spy a { padding: 0.28rem 0.5rem 0.28rem 0.7rem; }
  .article-container--rail .article-toc__toggle { margin-bottom: 0.85rem; }
}

/* Praktyczne boxy: „Czego nie robić" i miękki CTA „Kiedy warto skonsultować" */
.article-callout {
  clear: both;
  max-width: 640px;
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  padding: clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.5rem, 3vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-card);
}
.article-callout h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  margin: 0 0 0.85rem;
}
.article-callout p { color: var(--muted); line-height: 1.75; margin: 0; max-width: none; }
.article-callout p + p { margin-top: 0.9rem; }
.article-callout--dont { border-left-color: var(--navy); }
.article-callout .article-callout__cta { margin-top: 1.25rem; }
/* listy wewnątrz boxów (np. praktyczny box „Czego nie robić") */
.article-callout ul { margin: 0; padding-left: 1.15rem; color: var(--muted); line-height: 1.7; }
.article-callout li { margin-bottom: 0.6rem; }
.article-callout li:last-child { margin-bottom: 0; }
.article-callout li::marker { color: var(--gold); }

/* Podstawy prawne — lista przepisów ze złotymi znacznikami */
.article-legal-basis ul { margin: 0; padding-left: 1.15rem; color: var(--muted); line-height: 1.85; }
.article-legal-basis li { margin-bottom: 0.55rem; }
.article-legal-basis li::marker { color: var(--gold); }

/* Breadcrumb / powrót do publikacji na górze artykułu */
.article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 1.4rem;
}
.article-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 250ms var(--ease), border-color 250ms var(--ease);
}
.article-breadcrumb a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.article-breadcrumb a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-paper); }
.article-breadcrumb span[aria-hidden] { color: var(--line); }
.article-breadcrumb [aria-current] { color: var(--navy); }

/* Grafika hero w pełnym kadrze (bez przycinania) — dla grafik z wkomponowanym
   tekstem/elementami (nagłówek, koperta, ikony), których nie wolno uciąć. */
.article-figure--natural img {
  aspect-ratio: auto;
  max-height: none;
  height: auto;
  object-fit: contain;
}

/* Powiązane tematy bez aktywnych linków (wpisy planowane / jeszcze nieopublikowane) */
.article-related__intro { color: var(--muted); font-size: 0.95rem; margin: 0 0 1rem; }
.article-related--plain ul { list-style: none; margin: 0; padding: 0; }
.article-related--plain li {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.article-related--plain li:first-child { border-top: 1px solid var(--line); }
/* gdy dany temat ma już opublikowany wpis — pozycja staje się klikalnym linkiem
   (pozostałe zostają zwykłym tekstem jako tematy planowane) */
.article-related--plain a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.08rem;
  transition: color 250ms var(--ease), border-color 250ms var(--ease);
}
.article-related--plain a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.article-related--plain a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-paper); }

/* ---------- Cykl artykułów (golden-thread) ----------
   Moduł renderuje się WYŁĄCZNIE w artykułach należących do cyklu (warunkowo w HTML —
   artykuł bez cyklu w ogóle go nie ma, żadnego display:none). Złota nić prowadzi przez
   kolejność czytania; „Następny w cyklu" tylko, gdy istnieje kolejny opublikowany artykuł
   (ostatni w cyklu nie ma tego bloku). Pasek postępu czytania NIE liczy tego modułu. */
.article-cycle {
  clear: both;
  max-width: 640px;
  margin: clamp(2.5rem, 5vw, 3.25rem) 0 0;
  padding: clamp(1.4rem, 2.5vw, 1.7rem) clamp(1.5rem, 3vw, 1.9rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.article-cycle__cap {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.35rem;
}
.article-cycle h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 1.2rem;
}
.article-cycle ol { list-style: none; margin: 0; padding: 0 0 0 1.5rem; position: relative; }
.article-cycle ol::before {
  /* złota nić cyklu — wyciszona, prowadzi przez kolejność czytania */
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: var(--gold);
  opacity: 0.45;
  transform-origin: top center;
}
/* Wejście modułu (V5): nić rysuje się z góry, kropki doganiają. Klasę .is-visible nadaje
   IntersectionObserver z main.js; bez JS / przy reduced-motion moduł jest po prostu widoczny
   (żadnych stanów ukrytych — bezpieczne dla druku i zrzutów). */
@media (prefers-reduced-motion: no-preference) {
  .article-cycle.is-visible ol::before { animation: cycleTrackDraw 900ms var(--ease) 100ms backwards; }
  .article-cycle.is-visible .article-cycle__dot { animation: cycleDotIn 400ms var(--ease) 250ms backwards; }
}
@keyframes cycleTrackDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cycleDotIn { from { opacity: 0; } to { opacity: 1; } }
.article-cycle li { position: relative; margin: 0; padding: 0 0 0.7rem; font-size: 0.92rem; line-height: 1.55; }
.article-cycle li:last-child { padding-bottom: 0; }
.article-cycle__dot {
  position: absolute;
  left: calc(-1.5rem + 1.5px);
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
}
.article-cycle li.is-now { font-weight: 600; color: var(--navy); }
.article-cycle li.is-now .article-cycle__dot { background: var(--gold); }
.article-cycle__nownote { margin-left: 0.5rem; font-size: 0.74rem; font-weight: 500; color: var(--gold); white-space: nowrap; }
.article-cycle__num { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--muted); margin-right: 0.4em; }
.article-cycle ol a {
  color: var(--navy);
  text-decoration: none;
  transition: color 250ms var(--ease);
}
.article-cycle ol a:hover { color: var(--gold); }
.article-cycle ol a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-paper); }
.article-cycle__next {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
}
.article-cycle__next p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.article-cycle__next b { color: var(--navy); font-weight: 500; }
/* CTA cyklu artykułów: karta cyklu (aside) NIE jest w całości linkiem (ma osobne linki
   pozycji), a „Przeczytaj artykuł →" to AKCJA TEKSTOWA .link-arrow — docelowa hierarchia
   (NIE przycisk, NIE btn--outline, NIE złoty primary). Wygodny obszar dotyku i stany
   hover/focus definiuje samo .link-arrow (wyżej). */

/* ---------- Strona główna: sekcja „Publikacje" — praktyczne, redakcyjne wejście ----------
   Redakcyjny POMOST między „O mnie" a „Kontakt": to samo tło ivory (bez nowej planszy
   kolorystycznej), ale własna rama — cienkie linie NAD i POD zawartością, w szerokości
   kontenera (bardziej redakcyjnie niż linia pełnoszerokościowa). Rytm: nad górną linią
   pracuje padding „O mnie", pod dolną linią zaczyna się od razu paper „Kontaktu"
   (jego border-top na index USUNIĘTY — kreska by się dublowała). Wewnątrz ramy oddech
   mniejszy niż --section-y, żeby moduł nie robił pustych korytarzy.
   Dwie kolumny: lewa = wejście do publikacji (nagłówek o WYMUSZONYM łamaniu), prawa =
   „Często czytany artykuł" — cichy editorial callout (tylko linia górna; bez tła karty,
   cienia, miniatur, ikon, badge'y i statystyk). */
.publications-teaser { background: var(--ivory); scroll-margin-top: 116px; }
.publications-teaser__inner {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* rytm (po 2 patchach): linia otwierająca ma czytać się jako OTWARCIE modułu,
     nie separator wiszący wysoko; dół ciut ciaśniejszy niż góra (pod CTA nic już
     nie jest zapowiadane), ale przed Kontaktem zostaje spokojny oddech */
  padding-top: clamp(3.2rem, 5.2vw, 4.6rem);
  padding-bottom: clamp(3.1rem, 4.6vw, 4.3rem);
}
/* sąsiedzi pomostu na STRONIE GŁÓWNEJ: mniejszy odstęp treści „O mnie" przed linią
   otwierającą; Kontakt zachowuje ceremonialny oddech (bez dalszego skracania).
   Zawężone do .page-home — inne strony nietknięte */
.page-home .home-about { padding-bottom: clamp(3.5rem, 5.2vw, 4.8rem); }
.page-home .cta-final { padding-top: clamp(4rem, 6vw, 5.5rem); }
.publications-teaser__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.75fr);
  gap: clamp(3rem, 7vw, 6rem);
  /* prawa kolumna zakotwiczona DOŁEM: „Przeczytaj artykuł" rymuje się z „Zobacz
     publikacje" na wspólnej linii — callout domyka kompozycję zamiast wisieć
     wyśrodkowany w próżni obok lewej kolumny */
  align-items: end;
}
.publications-teaser__title {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.14;
  margin: 0 0 0.4rem;
}
/* łamanie zawsze: „Konkretne problemy," / „praktyczne wyjaśnienia." — dwa bloki nowrap;
   przy bardzo wąskich ekranach rozmiar schodzi niżej (media query), żeby nie było
   poziomego scrolla */
.publications-teaser__title span { display: block; white-space: nowrap; }
.publications-teaser .gold-line { margin: 1.1rem 0 1.35rem; }
.publications-teaser__lead {
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--navy);
  max-width: 36rem;
  margin: 0 0 1.9rem;
}
.publications-featured {
  /* tylko linia NAD artykułem — dolną krawędź domyka rama sekcji; kolumna ma
     dopełniać kompozycję, nie być mocniejsza od lewej */
  border-top: 1px solid var(--line);
  padding-top: clamp(1.3rem, 2.5vw, 1.7rem);
  /* callout zakotwiczony dołem (align-items:end na gridzie) + lekkie uniesienie:
     nie siedzi na samym dnie wiersza, tylko lekko ponad linią CTA lewej kolumny —
     świadome dopełnienie, nie blok podwieszony obok (mobile zeruje) */
  margin-bottom: 1.5rem;
}
.publications-featured__eyebrow {
  margin: 0 0 0.85rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.publications-featured__title {
  margin: 0 0 0.8rem;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  color: var(--navy);
}
.publications-featured__excerpt {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}
/* .publications-featured__link — usunięte: link „Przeczytaj artykuł" na stronie głównej
   używa teraz kanonicznej akcji tekstowej .link-arrow (bez lokalnego wariantu). */
@media (max-width: 820px) {
  .publications-teaser__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .publications-featured { max-width: 36rem; margin-bottom: 0; } /* uniesienie tylko przy 2 kolumnach */
}
@media (max-width: 360px) {
  .publications-teaser__title { font-size: 1.45rem; }
}

/* ---------- Stabilność renderowania (zrzut / PDF) ----------
   Elementy krytyczne nie mogą zależeć od tego, czy IntersectionObserver zdąży
   dodać .is-visible — inaczej w pełnostronicowym zrzucie/PDF zostają jako biała
   przerwa. Wymuszamy ich widoczność WYŁĄCZNIE w jasno określonym trybie
   przechwytywania (html.is-capture — ustawiany np. przez ?capture=1 — albo
   html.is-printing przed drukiem). W normalnym widoku animacje wejścia DZIAŁAJĄ;
   druk dodatkowo pokrywa @media print. */
html:is(.is-capture, .is-printing) .cta-final .reveal,
html:is(.is-capture, .is-printing) .cta-final .reveal-line,
html:is(.is-capture, .is-printing) .article-page .reveal,
html:is(.is-capture, .is-printing) .article-page .reveal-line,
html:is(.is-capture, .is-printing) .publication-tools.reveal,
html:is(.is-capture, .is-printing) .featured-publication.reveal,
html:is(.is-capture, .is-printing) .publications-index .reveal,
html:is(.is-capture, .is-printing) .publication-row.reveal,
html:is(.is-capture, .is-printing) .publication-sidebar.reveal,
html:is(.is-capture, .is-printing) .contact-hero .reveal,
html:is(.is-capture, .is-printing) .contact-hero .reveal-line,
html:is(.is-capture, .is-printing) .contact-form-section .reveal,
html:is(.is-capture, .is-printing) .contact-form-section .reveal-line {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
html:is(.is-capture, .is-printing) .cta-final .gold-line,
html:is(.is-capture, .is-printing) .article-page .gold-line,
html:is(.is-capture, .is-printing) .contact-hero .gold-line {
  transform: none !important;
  animation: none !important;
}

/* ---------- CTA końcowe ---------- */

.cta-final { text-align: center; }

.cta-final .gold-line { margin-left: auto; margin-right: auto; }

.cta-final .lead { margin: 0 auto 2.5rem; }

.cta-final .btn-row { justify-content: center; }

/* ---------- Kontakt ---------- */

/* ---------- HERO kontaktu — asymetryczny split-screen ----------
   Lewa (~64%): duża panorama Warszawy jako SCENA z tekstem osadzonym NA zdjęciu (lewy dolny
   róg, na spokojnym ciemnym gradiencie). Prawa (~36%): jeden ciemny panel kontaktowo-
   lokalizacyjny. Mapa = element pomocniczy (mniejsza), nie dominanta. To NIE jest tabela 2×2. */
.contact-hero { background: var(--navy); color: var(--ivory); }
.contact-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(24rem, 0.95fr);
  min-height: clamp(34rem, 72vh, 46rem);
}

/* lewa scena — panorama na całą wysokość, tekst osadzony na zdjęciu */
.contact-hero__media { position: relative; min-height: inherit; overflow: hidden; }
.contact-hero__media img,
.contact-hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 58% center;  /* kadr: skyline trzymany po prawej, nie ucięty */
  display: block;
}
/* globalny gradient na zdjęciu — MOCNIEJ po lewej (pod tekstem) i na dole, lżej po prawej */
.contact-hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 32, 46, 0.78) 0%, rgba(20, 32, 46, 0.48) 42%, rgba(20, 32, 46, 0.14) 100%),
    linear-gradient(0deg, rgba(20, 32, 46, 0.88) 0%, rgba(20, 32, 46, 0.36) 44%, rgba(20, 32, 46, 0.1) 100%);
}
.contact-hero__overlay-copy {
  position: absolute; z-index: 2;
  left: clamp(2rem, 6vw, 5.5rem);
  right: clamp(1.5rem, 4vw, 3rem);
  bottom: clamp(2.5rem, 6vw, 5rem);
  max-width: 34rem;
}
/* lokalna warstwa czytelności pod tekstem — subtelny scrim (gradient, NIE karta/glass) */
.contact-hero__overlay-copy::before {
  content: ""; position: absolute; z-index: -1;
  inset: -1.4rem -1.8rem -1.6rem -1.8rem;
  background: linear-gradient(90deg, rgba(20, 32, 46, 0.78), rgba(20, 32, 46, 0.5) 58%, rgba(20, 32, 46, 0));
  pointer-events: none;
}
.contact-hero__overlay-copy .kicker { color: var(--gold); font-size: 0.68rem; letter-spacing: 0.2em; margin-bottom: 1rem; opacity: 0.9; }
.contact-hero__overlay-copy .h-xl { color: var(--ivory); font-size: clamp(2.15rem, 3.8vw, 3.15rem); max-width: 12em; }
.contact-hero__overlay-copy .gold-line { width: 44px; margin: 1.35rem 0; }
.contact-hero__overlay-copy .lead { color: rgba(247, 241, 231, 0.82); font-size: 0.98rem; }
.contact-hero__cta { margin-top: 1.6rem; color: var(--ivory); border-color: rgba(247, 241, 231, 0.5); }
.contact-hero__cta:hover { color: var(--gold); border-color: var(--gold); }

/* prawa kolumna hero — spokojny blok danych (BEZ pełnej ramki/cienia/karty UI).
   Wyśrodkowany w pionie, nierozciągany; jedyny detal to subtelna złota linia po lewej. */
.contact-access-panel {
  align-self: center;
  margin: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 3vw, 3rem);
  display: flex; flex-direction: column;
  position: relative;
  padding-left: clamp(1.4rem, 2.4vw, 2rem);
  border-left: 2px solid var(--gold);
}
/* nagłówek wizytówki — mały kicker nad listą danych */
.contact-access-panel__kicker {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  opacity: 0.92;
  margin: 0 0 1.4rem;
}
.contact-access-panel__details {
  display: flex; flex-direction: column;
}

/* dane kontaktowe — wizytówka: większe ikony, mniejsze wartości, spokojny rytm */
.contact-access-item {
  display: grid; grid-template-columns: 2.15rem minmax(0, 1fr); gap: 0.9rem;
  padding: 1.5rem 0; align-items: center;
}
/* ikona obejmuje CAŁY blok (etykieta + wartość) — ~30px, wyśrodkowana w pionie do bloku */
.contact-access-item .contact-icon { padding-top: 0; opacity: 0.95; }
.contact-access-item .contact-icon svg { width: 1.85rem; height: 1.85rem; stroke-width: 1.25; }
.contact-access-item:first-child { padding-top: 0; }
.contact-access-item:last-child { padding-bottom: 0; }
.contact-access-item__text { display: flex; flex-direction: column; min-width: 0; }
.contact-access-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.35rem;
}
.contact-access-item a,
.contact-access-item address {
  color: var(--ivory); font-style: normal; text-decoration: none;
  font-size: clamp(0.96rem, 0.95vw, 1.05rem); line-height: 1.45;
}
.contact-access-item a:hover { color: var(--gold); }
/* e-mail w JEDNEJ linii na desktopie (na mobile może się łamać — patrz @media ≤900px) */
.contact-access-item__text a[href^="mailto:"] { white-space: nowrap; }

/* mapa lokalizacji — statyczny obraz (prawdziwe dane OSM) w jasnej karcie przy formularzu.
   Bleed: ujemny margines poziomy wysuwa OBRAZ blisko krawędzi karty (zostaje ~0.4rem inset),
   karta zachowuje pełny padding dla tekstu, a jej szerokość = panel „Co warto opisać". */
.contact-map {
  margin: 0 calc(-1 * (var(--card-pad) - 0.4rem));
  position: relative; overflow: hidden; line-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: #EFE6D7;
}
/* obraz mapy = panoramiczny pas (1.85:1), pełna szerokość wysuniętej ramki — nie miniatura */
.contact-map__image {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1.85 / 1; object-fit: cover;
}
.contact-map__attrib {
  position: absolute; right: 0.5rem; bottom: 0.45rem; line-height: 1.2;
  font-family: var(--sans); font-size: 0.62rem; color: #5f6670; letter-spacing: 0.01em;
  background: rgba(247, 241, 231, 0.82); padding: 0.1rem 0.4rem; border-radius: var(--radius-paper);
}

/* ikony złote liniowe (telefon / e-mail / lokalizacja / trasa) */
.contact-icon { color: var(--gold); display: inline-flex; padding-top: 0.15rem; }
.contact-icon svg { width: 1.2rem; height: 1.2rem; display: block; }

.contact-route {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 1.5rem;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--ivory); text-decoration: none;
  border: 1px solid rgba(247, 241, 231, 0.28);
  border-radius: var(--radius-button-public);
  padding: 0.7em 1.2em;
  transition: border-color 250ms var(--ease), color 250ms var(--ease), background-color 250ms var(--ease);
}
.contact-route:hover,
.contact-route:focus-visible { border-color: var(--gold); color: var(--gold); }
.contact-route .contact-icon { padding-top: 0; }
.contact-route .contact-icon svg { width: 1rem; height: 1rem; }

/* ===== Sekcja formularza (jasna) ===== */
.contact-form-section {
  background: var(--ivory);
  /* osie kompozycyjne WSPÓLNE z hero (te same wartości clamp co .contact-hero/.contact-access-panel) */
  --rail-l: clamp(2rem, 6vw, 5.5rem);    /* = lewy inset tekstu hero (.contact-hero__overlay-copy) */
  --rail-r: clamp(3rem, 6vw, 5rem);      /* = prawy margines panelu hero (.contact-access-panel) */
  --panel-ml: clamp(1.75rem, 3vw, 3rem); /* = margines-lewy panelu danych hero */
  --col-gap: clamp(3rem, 4vw, 4.5rem);   /* spokojny odstęp formularz↔kolumna (≈48–72px) */
}
/* sekcja formularza PEŁNOSZEROKOŚCIOWA — kontynuuje oś hero, NIE wąski wyśrodkowany moduł */
.contact-form-section .container {
  max-width: none;
  padding-left: var(--rail-l);
  padding-right: var(--rail-r);
}
.contact-form-layout {
  display: grid;
  /* prawa kolumna = szerokość bloku danych hero (od złotej linii do prawego marginesu),
     więc jej lewa krawędź ląduje na osi prawej kolumny hero; lewa kolumna (formularz)
     wypełnia resztę = szersza i z większą rangą; lewa krawędź = oś tekstu hero */
  grid-template-columns:
    minmax(0, 1fr)
    clamp(18rem, calc(36.54vw - var(--rail-r) - var(--panel-ml)), 44rem);
  gap: var(--col-gap);
  align-items: start;
}

/* prawa kolumna sekcji formularza — mapa nad „Co warto opisać".
   align-self: stretch daje wysokość = lewa kolumna, dzięki czemu sticky panel
   „Co warto opisać" ma przestrzeń, by zatrzymać się przy polu „Opis sprawy". */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: clamp(2.75rem, 4.5vw, 4rem);
  align-self: stretch;
}

/* karta lokalizacji (jasna) — spokojny padding dla nagłówka/przycisku/adresu;
   sam obraz mapy jest wysunięty bliżej krawędzi karty (panoramiczny element, NIE miniatura) */
.contact-map-card {
  --card-pad: clamp(1.25rem, 2.1vw, 1.6rem);
  display: flex; flex-direction: column;
  gap: 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: var(--card-pad);
}
/* nagłówek karty: tytuł „Lokalizacja" + dyskretny „Wyznacz trasę" w jednym wierszu */
.contact-map-card__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.6rem 1rem;
}
.contact-map-card__title {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  margin: 0;
}
/* adres = spokojny, świadomy podpis lokalizacji pod mapą (jedna linia, oddech od mapy) */
.contact-map-card__addr {
  font-style: normal; color: var(--navy);
  font-size: 0.875rem; line-height: 1.45; letter-spacing: 0.01em;
  white-space: nowrap;
  margin-top: 1rem;
}
/* wariant przycisku trasy dla jasnej karty — dyskretna, elegancka akcja przy nagłówku */
.contact-map-card .contact-route {
  margin-top: 0;
  font-size: 0.8rem; letter-spacing: 0.06em; padding: 0.6em 1.1em;
  color: var(--ink);
  border-color: rgba(168, 137, 85, 0.45);
}
/* „Wyznacz trasę" w karcie mapy — zaakceptowany wyjątek: rest złotawy kontur (niżej).
   hover == :focus-visible: złoty tekst, pełniejszy złoty kontur, delikatne ciepłe tło.
   Bez cienia, liftu i sheenu; reduced-motion natychmiast (globalny catch-all). */
.contact-map-card .contact-route:hover,
.contact-map-card .contact-route:focus-visible {
  color: var(--gold); border-color: var(--gold); background: rgba(168, 137, 85, 0.035);
}

/* Nota „Sprawy z całej Polski" — spokojny, wyśrodkowany pas między granatową
   sekcją kontaktową a formularzem. Dyskretna, NIE reklamowa i NIE hero: jasne tło
   (paper), cienki złoty akcent i serifowy nagłówek, krótki tekst. */
.contact-reach-band {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.75rem, 5.5vw, 4.25rem) 0;
}
.contact-reach {
  max-width: 44rem;
}
.contact-reach__rule {
  display: block;
  width: 44px;
  height: 1.5px;
  background: var(--gold);
  border: 0;
  margin: 0 0 1.2rem;
}
.contact-reach__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 500;
  line-height: 1.22;
  color: var(--navy);
  margin: 0 0 0.85rem;
}
.contact-reach p {
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.7;
  margin: 0;
}
/* nota wyrównana do lewej (asymetryczna, NIE wyśrodkowana) — na każdym ekranie;
   blok trzyma się lewej krawędzi kontenera, oddech po prawej */

.form-card {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-panel);
  padding: clamp(1.75rem, 4vw, 3.25rem);
}
.form-card .lead { margin-top: 1rem; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem 1.4rem;
  margin-top: 2rem;
}

.form-field { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
.form-field--full { grid-column: 1 / -1; }

/* Wrapper pola — nośnik animowanej złotej linii focusu (jak na ekranie logowania).
   Linia rośnie tylko pod realnym polem tekstowym, nie pod uploadem/zgodą. */
.form-control { position: relative; }
.form-control::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--gold);
  transition: width 480ms var(--ease);
  pointer-events: none;
}
.form-field:focus-within .form-control::after { width: 100%; }

.form-field label,
.form-field__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  width: 100%;
  background: #FFFDF9;
  border: 1px solid rgba(230, 222, 210, 0.96);
  border-radius: var(--radius-field);
  padding: 0.72rem 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition:
    border-color 250ms var(--ease),
    box-shadow 250ms var(--ease),
    background-color 250ms var(--ease);
}
.form-field input { min-height: 2.6rem; }
/* textarea większa niż zwykłe pola, ale nie przesadnie wysoka */
.form-field textarea { min-height: 9.75rem; line-height: 1.6; resize: vertical; }
/* „Opis sprawy" ROŚNIE z treścią (wysokość ustawia JS: autoGrow) — bez ręcznego
   uchwytu i bez wewnętrznego przewijania; gdy JS nie zadziała, zostaje min-height. */
#f-message { overflow: hidden; resize: none; }

/* submit — elegancki, KRÓTKI, wyrównany do lewej (NIE pełnoszeroki pasek aplikacyjny) */
.form-card .form-field--full > .btn--primary {
  margin-top: 0.25rem;
  min-width: 11rem;
  padding: 0.82em 1.8rem;
}

.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover { border-color: rgba(168, 137, 85, 0.42); }

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: rgba(168, 137, 85, 0.72);
  background: #FFFDF9;
  box-shadow:
    0 0 0 3px rgba(168, 137, 85, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
}
/* Wyraźny wskaźnik focusu dla klawiatury (a11y) — obok miękkiej złotej poświaty. */
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* honeypot — w DOM dla botów, niewidoczny dla ludzi i AT */
.form-hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Upload dokumentów — WSPÓLNY komponent z Portalem (identyczny wygląd i zachowanie;
   odpowiednik w repozytorium Portalu: `client/portal.css`, klasy `.portal-upload*`). W formularzu kontaktu pliki jadą z całym
   formularzem (BEZ osobnej wysyłki), więc stany wysyłki/progresu/wyniku/paczki-do-wysłania
   z arkusza Portalu są tu nieużywane. Tokeny (--radius-*, --gold, --line…) wspólne w :root. */
/* Na stronie kontaktowej upload jest KOMPAKTOWY: zewnętrzny kontener NIE tworzy drugiej
   masywnej ramki (bez własnego tła/obramowania/paddingu) — zostaje jedna czytelna,
   przerywana dropzone. (Portal zachowuje własną ramę we własnym arkuszu.) */
.portal-upload { border: 0; background: none; padding: 0; margin: 0; }
.portal-upload[hidden] { display: none; }

/* Dropzone: realny <input type=file> obsłużony przez <label> (przycięty, fokusowalny;
   Enter/Spacja otwierają wybór natywnie), pierścień fokusu przez :focus-within. */
.portal-upload__zone { position: relative; border-radius: var(--radius-case); }
.portal-upload__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.portal-upload__label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; text-align: center; min-height: 112px; border: 1.5px dashed rgba(168, 137, 85, 0.5); border-radius: var(--radius-case); background: rgba(255, 253, 249, 0.65); padding: clamp(1.05rem, 2vw, 1.4rem); cursor: pointer; transition: border-color 200ms var(--ease), background-color 200ms var(--ease); }
.portal-upload__zone:hover .portal-upload__label,
.portal-upload__zone.is-dragover .portal-upload__label { border-color: rgba(168, 137, 85, 0.85); background: rgba(168, 137, 85, 0.06); }
.portal-upload__zone:focus-within .portal-upload__label { outline: 2px solid rgba(168, 137, 85, 0.55); outline-offset: 3px; }
.portal-upload__lead { font-size: 0.95rem; font-weight: 500; color: var(--navy); margin: 0; }
.portal-upload__hint { font-size: 0.82rem; color: var(--muted); margin: 0; }

/* Plik, którego nie można dodać = spokojna karta „trouble": navy lewa krawędź 2px,
   standardowe --line, tło paper, 8px. BEZ kasztanu, czerwieni i „Ups". */
.portal-upload__rejects { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; }
.portal-upload__rejects[hidden] { display: none; }
.portal-upload__reject { border: 1px solid var(--line); border-left: 2px solid var(--navy); border-radius: var(--radius-card); background: var(--paper); padding: 0.85rem 1rem; }
.portal-upload__reject-title { font-size: 0.85rem; font-weight: 500; color: var(--navy); margin: 0; }
.portal-upload__reject-reason { font-size: 0.79rem; color: var(--muted); margin: 0.25rem 0 0.7rem; line-height: 1.55; overflow-wrap: anywhere; }
.portal-upload__reject-reason b { color: var(--navy); font-weight: 500; }

/* Paczka: JEDNA rama + złota lewa krawędź 2px; nagłówek dwuwierszowy (tytuł + „Łącznie…"). */
.portal-upload__package { margin-top: 0.9rem; border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: var(--radius-case); background: var(--paper); overflow: hidden; }
.portal-upload__package[hidden] { display: none; }
.portal-upload__pack-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem 0.85rem; flex-wrap: wrap; }
.portal-upload__pack-title { font-size: 0.9rem; font-weight: 500; color: var(--navy); margin: 0; }
.portal-upload__pack-sub { font-size: 0.77rem; color: var(--muted); margin: 0.15rem 0 0; font-variant-numeric: tabular-nums; }
.portal-upload__pack-sub[hidden] { display: none; }
.portal-upload__package.is-single .portal-upload__pack-hd { display: none; }

.portal-upload__list { list-style: none; margin: 0; padding: 0; }
.portal-upload__file { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.8rem; padding: 0.7rem 1.15rem; border-top: 1px solid rgba(230, 222, 210, 0.7); }
.portal-upload__package.is-single .portal-upload__file { border-top: 0; }
.portal-upload__file-main { flex: 1 1 12rem; min-width: 0; display: flex; align-items: center; gap: 0.7rem; }
/* Cienka złota ikona dokumentu — TYLKO w widoku pojedynczego pliku. */
.portal-upload__file-icon { flex: none; color: var(--gold); display: none; opacity: 0.8; }
.portal-upload__file-icon svg { display: block; width: 19px; height: 19px; }
.portal-upload__package.is-single .portal-upload__file-icon { display: block; }
.portal-upload__file-text { min-width: 0; }
.portal-upload__file-name { font-size: 0.86rem; font-weight: 500; color: var(--navy); margin: 0; overflow-wrap: anywhere; }
.portal-upload__file-meta { font-size: 0.76rem; color: var(--muted); margin: 0.15rem 0 0; }
.portal-upload__file-meta[hidden] { display: none; }
.portal-upload__file-size { flex: none; margin-left: auto; font-size: 0.75rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.portal-upload__file-size[hidden] { display: none; }

/* Usunięcie „×" — mała ikona, wygodny cel dotykowy. */
.portal-upload__file-remove { flex: none; appearance: none; background: transparent; border: 0; color: var(--muted); cursor: pointer; line-height: 0; padding: 0.25rem; border-radius: var(--radius-paper); display: inline-flex; align-items: center; justify-content: center; opacity: 0.55; transition: color 180ms var(--ease), opacity 180ms var(--ease); }
.portal-upload__file-remove svg { display: block; width: 13px; height: 13px; }
.portal-upload__file:hover .portal-upload__file-remove,
.portal-upload__file-remove:focus-visible { opacity: 1; }
.portal-upload__file-remove:hover { color: var(--navy); }
.portal-upload__file-remove:focus-visible { outline: 2px solid rgba(168, 137, 85, 0.55); outline-offset: 2px; }
.portal-upload__file-remove[hidden] { display: none; }
@media (pointer: coarse) { .portal-upload__file-remove { min-width: 44px; min-height: 44px; padding: 0.5rem; opacity: 1; } }

/* Stopka wysyłki (WEWNĄTRZ paczki). */
.portal-upload__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 1.15rem; border-top: 1px solid var(--line); }
.portal-upload__foot[hidden] { display: none; }

/* Plik W TRAKCIE USUWANIA (pending-removal) — zostaje w swoim wierszu w tej samej paczce:
   delikatne przygaszenie + subtelne ciepłe tło (bez czerwieni, bez przekreślenia, bez osobnej
   karty). „Usuwanie…" niesie tekst; wiersz nie skacze. */
.portal-upload__file.is-pending-removal { background: rgba(168, 137, 85, 0.05); }
.portal-upload__file.is-pending-removal .portal-upload__file-main { opacity: 0.62; }
.portal-upload__file.is-pending-removal .portal-upload__file-meta { color: var(--gold); opacity: 0.85; }

/* „Cofnij" W WIERSZU (prawdziwy przycisk) — tekst + złoty okrąg odliczający. */
.portal-upload__file-undo { flex: none; appearance: none; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; border-radius: var(--radius-paper); font-family: var(--sans); font-size: 0.8rem; font-weight: 500; color: var(--navy); transition: color 180ms var(--ease); }
.portal-upload__file-undo:hover { color: var(--gold); }
.portal-upload__file-undo:focus-visible { outline: 2px solid rgba(168, 137, 85, 0.55); outline-offset: 2px; }
.portal-upload__file-undo[hidden] { display: none; }
@media (pointer: coarse) { .portal-upload__file-undo { min-height: 44px; } }

/* Złoty okrąg odliczający (dekoracyjny, aria-hidden), po jednym NA WIERSZ: pełny → zwija się
   przeciwnie do ruchu wskazówek zegara od godziny 12:00. r=8 → obwód 2π·8 ≈ 50.265; dashoffset
   0→obwód opróżnia łuk. rotate(-90deg) przenosi start na 12:00; opróżnianie biegnie wtedy CCW.
   Każdy wiersz ma własną animację (start przy oznaczeniu); pauza per-wiersz przez .is-paused. */
.portal-upload__timer { display: inline-flex; width: 1rem; height: 1rem; flex: none; }
.portal-upload__timer svg { width: 100%; height: 100%; display: block; overflow: visible; }
.portal-upload__timer-track { fill: none; stroke: var(--line); stroke-width: 2.4; }
.portal-upload__timer-arc { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 50.265px; stroke-dashoffset: 0; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); animation: portal-upload-timer 5s linear forwards; }
.portal-upload__file.is-paused .portal-upload__timer-arc { animation-play-state: paused; }
@keyframes portal-upload-timer { to { stroke-dashoffset: 50.265px; } }

/* Przyciski komponentu (Wybierz inny plik / Cofnij) — publiczny system .btn (8px), kompaktowe. */
.portal-upload .btn { padding: 0.5em 1.05em; font-size: 0.82rem; }
.portal-upload__reject .btn { margin-top: 0.15rem; }

/* Stan busy — kontrolki zablokowane podczas wysyłki CAŁEGO formularza. */
.portal-upload[aria-busy="true"] .portal-upload__label { pointer-events: none; opacity: 0.7; }

/* Kanał ogłoszeń dla czytnika ekranu. */
.portal-upload__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Opis kontekstowy pola (co dołączyć) — poza dropzone. */
.form-upload__desc { font-size: 0.8438rem; color: var(--muted); line-height: 1.55; margin-top: 0.45rem; }

@media (max-width: 560px) {
  .portal-upload__file-size { margin-left: 0; flex-basis: 100%; }
  .portal-upload__foot { flex-direction: column; align-items: flex-start; }
  .portal-upload__file.is-pending-removal .portal-upload__file-undo { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-upload__label { transition: none; }
  /* Bez animacji okręgu — statyczny, pełny znak czasu; 5-sekundowy termin działa dalej w JS. */
  .portal-upload__timer-arc { animation: none; stroke-dashoffset: 0; }
}

.form-note { font-size: 0.8438rem; color: var(--muted); margin-top: 1.1rem; line-height: 1.55; }

.form-status {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--gold);
  background: var(--gold-soft);
  font-size: 0.9063rem;
  color: var(--navy);
}

/* =========================================================================
   Mini design system — fundament stanów (do stopniowego użycia).
   KANONICZNE klasy już w projekcie (używać ich, NIE duplikować):
     przyciski        → .btn / .btn--primary / .btn--outline  (+ .is-loading niżej)
     pola formularza  → .form-field                           (+ .has-error / .is-disabled niżej)
     komunikat stanu  → .form-status                          (+ --error / --info niżej)
     chipy/kategorie  → .publication-filter button (.is-active)
     empty state      → .publication-no-results
     breadcrumbs      → .article-breadcrumb
   Język błędów: spokojny, kancelaryjny, BEZ czerwieni i alertów.
   ========================================================================= */

/* Pole — stan błędu: pola na ZŁOTO (nie czerwień), spójnie z logowaniem.
   .is-invalid = alias .has-error (formularz kontaktowy używa .is-invalid). */
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select,
.form-field.is-invalid input,
.form-field.is-invalid textarea,
.form-field.is-invalid select {
  border-color: rgba(168, 137, 85, 0.62);
  background-color: rgba(168, 137, 85, 0.05);   /* spokojne, ciepłe wypełnienie — bez czerwieni */
  box-shadow:
    0 0 0 3px rgba(168, 137, 85, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
/* Komunikat błędu pod polem — czytelny (nie helper-text), spokojny, BEZ czerwieni;
   subtelny złoty pasek z lewej dla obecności, bez efektu alertu. */
.form-field__error {
  display: none;
  margin-top: 0.48rem;
  padding-left: 0.6rem;
  border-left: 2px solid rgba(168, 137, 85, 0.5);
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--navy);
}
.form-field__error:not(:empty) { display: block; }   /* widoczny tylko z treścią (też dla zgody) */

/* Pole — stan wyłączony. */
.form-field.is-disabled { opacity: 0.6; }
.form-field.is-disabled input,
.form-field.is-disabled textarea,
.form-field.is-disabled select { cursor: not-allowed; background: var(--paper); }

/* Komunikat formularza — warianty (bazowy .form-status = sukces/neutralny). */
.form-status--info  { border-left-color: rgba(168, 137, 85, 0.5);  background: var(--paper); color: var(--muted); }
.form-status--error { border-left-color: rgba(168, 137, 85, 0.72); background: rgba(168, 137, 85, 0.075); color: var(--navy); }

/* Podsumowanie walidacji formularza kontaktowego — zaokrąglona, ciepła ramka,
   spójna z ramką błędu wysyłki (.form-inline-error). Scoped na #id → NIE rusza
   kanonicznego .form-status używanego gdzie indziej; id bije .form-status--error. */
#contact-form-status {
  margin-top: 1.4rem;
  padding: 1.15rem 1.35rem;
  box-shadow: none;
  border-radius: var(--radius-card);
  background: linear-gradient(rgba(168, 137, 85, 0.05), rgba(168, 137, 85, 0.05)), var(--ivory);
  border: 1px solid rgba(168, 137, 85, 0.32);
  border-left: 3px solid var(--gold);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--navy);
}

/* Stany zablokowany / w trakcie (loading, busy) — wspólny język z .login-submit i .portal-btn.
   Bez spinnera; tekst zmienia JS („Wysyłanie…"). Sygnał NIE tylko przez opacity: primary
   traci cień, ruch i sheen. pointer-events blokuje ponowne kliknięcie. */
.btn.is-loading,
.btn:disabled,
.btn[aria-disabled="true"],
.btn[aria-busy="true"] {
  cursor: default;
  opacity: 0.82;
  pointer-events: none;
}
.btn--primary.is-loading,
.btn--primary:disabled,
.btn--primary[aria-disabled="true"],
.btn--primary[aria-busy="true"] { background: var(--gold); color: #fff; transform: none; box-shadow: none; }
/* Drugorzędne i ghost w disabled/loading/busy — stabilne kolory spoczynku, bez złota na
   hover/focus, bez ruchu (reguła później w źródle → wygrywa nad :hover/:focus-visible). */
.btn--outline:disabled, .btn--outline[aria-disabled="true"], .btn--outline.is-loading, .btn--outline[aria-busy="true"],
.btn--portal:disabled, .btn--portal[aria-disabled="true"], .btn--portal.is-loading, .btn--portal[aria-busy="true"] {
  background: transparent; color: var(--navy); border-color: var(--navy);
}
.btn--ghost:disabled, .btn--ghost[aria-disabled="true"], .btn--ghost.is-loading, .btn--ghost[aria-busy="true"] {
  background: transparent; color: var(--navy); border-color: var(--line);
}
/* sheen zamrożony poza kadrem — bez błysku w trakcie disabled/loading */
.btn--primary.is-loading::after,
.btn--primary:disabled::after,
.btn--primary[aria-disabled="true"]::after,
.btn--primary[aria-busy="true"]::after { transform: translateX(-130%); transition: none; }

/* Formularz w trakcie wysyłania — przycisk zablokowany (tekst zmienia JS na „Wysyłanie…"). */
.form-grid.is-sending .btn--primary { pointer-events: none; opacity: 0.82; }

/* Zgoda RODO — stan błędu (subtelny złoty, bez czerwieni). */
.form-consent.is-invalid input[type="checkbox"] { outline: 2px solid rgba(168, 137, 85, 0.55); outline-offset: 2px; }

/* ---------- Modal potwierdzenia kontaktu (sukces / błąd wysyłki) ----------
   Papierowa karta nad lekko przygaszonym, ROZMYTYM tłem (skupienie uwagi).
   Bez glassmorphismu na karcie, bez czerwieni, bez ikon „aplikacyjnych". */
.contact-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 100);
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: rgba(20, 32, 46, 0.28);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.contact-modal-backdrop[hidden] { display: none; }

.contact-modal {
  position: relative;
  width: min(100%, 620px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-panel);
  box-shadow: 0 32px 90px rgba(20, 32, 46, 0.18);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--navy);
  outline: none;
}
.contact-modal--error { border-left-color: rgba(168, 137, 85, 0.78); }

.contact-modal__close {
  position: absolute;
  top: 0.85rem; right: 0.9rem;
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  font-size: 1.4rem; line-height: 1; color: var(--muted);
  cursor: pointer; border-radius: var(--radius-paper);
  transition: color var(--motion-fast, 160ms) var(--ease), background-color var(--motion-fast, 160ms) var(--ease);
}
.contact-modal__close:hover { color: var(--gold); }
.contact-modal__close:focus-visible { outline: 2px solid rgba(168, 137, 85, 0.55); outline-offset: 2px; }

.contact-modal__eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.6rem;
}
.contact-modal__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0;
}
.contact-modal__text { margin-top: 0.85rem; color: var(--muted); line-height: 1.7; max-width: 42em; }
.contact-modal__contact {
  margin-top: 1rem;
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem;
  font-size: 0.95rem;
}
.contact-modal__contact[hidden] { display: none; }   /* [hidden] musi bić display:flex */
.contact-modal__contact-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.contact-modal__contact-icon { width: 16px; height: 16px; flex: none; color: var(--gold); }
.contact-modal__contact a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-modal__contact a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.contact-modal__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.5rem; }
.contact-modal__actions[hidden] { display: none; }   /* [hidden] musi bić display:flex */

/* Animacja — spokojny fade (+ delikatny slide-up karty). */
.contact-modal-backdrop.is-entering { animation: contact-backdrop-in 360ms var(--ease) both; }
.contact-modal-backdrop.is-entering .contact-modal { animation: contact-modal-in 380ms var(--ease) both; }
@keyframes contact-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes contact-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-modal-backdrop.is-entering,
  .contact-modal-backdrop.is-entering .contact-modal { animation: none; }
}

.form-consent a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.form-consent a:hover { color: var(--gold); }
.form-consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.8438rem;
  color: var(--muted);
  line-height: 1.55;
}
.form-consent input[type="checkbox"] {
  margin-top: 0.25em;
  width: 16px; height: 16px;
  accent-color: var(--gold);
  flex-shrink: 0;
}

/* Panel pomocniczy „Co warto opisać" */
.contact-help {
  border-left: 2px solid var(--gold);
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2rem);
  position: sticky; top: calc(var(--header-height, 118px) + 1.5rem);
}
.contact-help__title {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 1.1rem;
}
.contact-help ul { list-style: none; margin: 0; padding: 0; }
.contact-help li {
  position: relative; padding-left: 1.1rem; margin-bottom: 0.75rem;
  color: var(--muted); font-size: 0.95rem; line-height: 1.6;
}
.contact-help li:last-child { margin-bottom: 0; }
.contact-help li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; background: var(--gold); border-radius: 50%;
}

/* Hero kontaktu (split) — stackowanie na mobile: scena ze zdjęciem → panel */
@media (max-width: 900px) {
  .contact-hero--split { grid-template-columns: 1fr; min-height: 0; }
  .contact-hero__media { min-height: 30rem; }
  .contact-hero__overlay-copy { left: 1.5rem; right: 1.5rem; bottom: 2rem; max-width: none; }
  .contact-access-panel { margin: 0; padding: clamp(2rem, 7vw, 2.75rem) clamp(1.5rem, 5vw, 2rem); }
  /* mobile: ikony nieco mniejsze, e-mail może się łamać (przez <wbr>) */
  .contact-access-item .contact-icon svg { width: 1.55rem; height: 1.55rem; }
  .contact-access-item__text a[href^="mailto:"] { white-space: normal; }
}
@media (max-width: 760px) {
  .contact-hero__media { min-height: 28rem; }
  .contact-hero__media img,
  .contact-hero__media video { object-position: center center; }
}
/* przy wideo i ograniczonym ruchu — chowamy klip, zostaje statyczny poster/obraz */
@media (prefers-reduced-motion: reduce) {
  .contact-hero__media video { display: none; }
}
@media (max-width: 900px) {
  /* mobile — normalny, symetryczny padding kontenera + pełna szerokość, bez poziomego scrolla */
  .contact-form-section .container {
    padding-left: clamp(1.25rem, 4vw, 2.5rem);
    padding-right: clamp(1.25rem, 4vw, 2.5rem);
  }
  .contact-form-layout { grid-template-columns: 1fr; }
  .contact-help { position: static; }
}
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Podstrony — nagłówek strony ---------- */

.page-head { padding: clamp(3.5rem, 7vw, 5.5rem) 0 0; }

.page-head .lead { margin-top: 0; }

/* Podejście (O mnie) — układ redakcyjny: lewa kolumna intro, prawa lista procesu.
   Bez kart, ikon, cieni i ozdobników; spokojne separatory między elementami. */
.approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.approach-intro .lead { margin-top: 1.5rem; max-width: 30em; }

.approach-list { list-style: none; margin: 0; padding: 0; }

.approach-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.1rem, 2.2vw, 1.6rem);
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}

.approach-item:first-child { padding-top: 0; border-top: 0; }
.approach-item:last-child { padding-bottom: 0; }

.approach-item__num {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  line-height: 1.4;
  padding-top: 0.1rem;
}

.approach-item__body h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.approach-item__body p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 44em;
}

@media (max-width: 860px) {
  .approach-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---------- Strona błędu 404 ----------
   Spokojny, pomocniczy ekran (nie landing, nie typowy błąd). Wyśrodkowany w
   pionie, dużo oddechu; kod 404 to główny, lecz przygaszony akcent typograficzny.
   Bez headera, menu, ilustracji i ikon ostrzegawczych.
   UWAGA: 404.html ma teraz WŁASNĄ, wbudowaną (inline) kopię tych reguł, aby działać
   jako strona błędu serwowana pod DOWOLNYM adresem (np. /publikacje/cos-tam) bez
   zależności od zewnętrznego CSS. Zmiany wyglądu 404 wprowadzaj w OBU miejscach. */
.error-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(168, 137, 85, 0.07), transparent 34%),
    var(--ivory);
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2.5rem);
}

.error-page__inner {
  width: min(100%, 720px);
  margin: 0 auto;
  text-align: center;
}

/* Sygnet — świadomy znak kancelarii (sam monogram, bez napisu „Szabłowski").
   Wyraźnie większy niż wcześniej i wyśrodkowany. height:auto — znak nie jest
   kwadratem (483×329), więc nie wymuszamy wysokości. */
.error-page__mark {
  width: clamp(5.25rem, 7vw, 6.75rem);
  height: auto;
  margin: 0 auto clamp(2.4rem, 4vw, 3.1rem);
}

/* Kicker = pierwszy element komunikatu 404 (nie podpis pod sygnetem). Wyraźny
   oddech nad nim daje margines sygnetu; pod nim oddech mniejszy, by kicker
   grupował się z kodem 404 i góra nie była rozstrzelona. */
.error-page .kicker { margin-bottom: clamp(2rem, 3vw, 2.6rem); }

/* Kod 404 — duży, lecz subtelny (przygaszone złoto); nie dominuje nad treścią */
.error-page__code {
  font-family: var(--serif);
  font-size: clamp(5rem, 13vw, 9.5rem);
  line-height: 0.9;
  color: rgba(168, 137, 85, 0.26);
  margin: 0 0 clamp(1rem, 2vw, 1.35rem);
  letter-spacing: -0.035em;
}

/* nagłówek — jedna linia na desktopie (vw-skalowanie utrzymuje go w kadrze);
   na mobile łamie się normalnie (patrz @media max-width: 760px) */
.error-page .h-xl {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(2.8rem, 4.7vw, 4.25rem);
  margin-left: auto;
  margin-right: auto;
}

/* Krótka, złota linia — wyśrodkowana; lokalne wzmocnienie bazowej .gold-line,
   by w kontekście 404 zawsze pozostała 56px, a nie domyślny pełnoekranowy <hr>. */
.error-page .gold-line {
  display: block;
  width: 56px;
  height: 1.5px;
  background: var(--gold);
  border: 0;
  margin: clamp(1.35rem, 2vw, 1.65rem) auto;
}

/* lead — wyśrodkowany, kontrolowana szerokość; BEZ justowania do marginesów
   (krótki polski tekst justowany tworzyłby brzydkie odstępy między słowami) */
.error-page .lead {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.error-page .btn-row { margin-top: clamp(2rem, 3vw, 2.35rem); justify-content: center; }

/* Widoczny focus dla przycisków-linków (nawigacja klawiaturą) */
.error-page .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Tablet/telefon — nagłówek łamie się normalnie (bez wymuszania jednej linii) */
@media (max-width: 760px) {
  .error-page .h-xl { white-space: normal; }
}

/* Mobile — mniejszy sygnet, zwarty rytm góry, przyciski jeden pod drugim;
   blok nie osadzony za nisko; bez poziomego scrolla */
@media (max-width: 560px) {
  .error-page { align-items: center; padding: 2.75rem 1.25rem; }
  .error-page__mark { width: clamp(4rem, 18vw, 4.75rem); margin-bottom: 2rem; }
  .error-page .kicker { margin-bottom: 2.75rem; }
  .error-page .btn-row { flex-direction: column; align-items: stretch; }
  .error-page .btn { justify-content: center; }
}

/* ---------- Stopka ---------- */

.site-footer {
  background: var(--navy);
  color: rgba(247, 241, 231, 0.7);
  padding: 4.5rem 0 2.5rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.site-footer__brand img { height: 52px; width: auto; margin-bottom: 1.4rem; }

/* nie narzucamy rozmiaru — .footer-id__name / .footer-id__reg mają własny */
.site-footer__brand p { max-width: 30em; }

.site-footer h4 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

.site-footer a {
  color: rgba(247, 241, 231, 0.78);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 250ms var(--ease);
}

.site-footer a:hover { color: var(--gold); }

/* Dane identyfikacyjne pod logo — techniczne, spokojne */
.footer-id { margin-bottom: 0; }

/* Nazwa kancelarii — główny tekst identyfikacyjny: pogrubiony, najjaśniejszy */
.footer-id__name {
  color: var(--ivory);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 0.85rem;
}

/* NIP, REGON i adres — ta sama wielkość i kontrast co linki „Nawigacja"
   (.site-footer a: 0.9375rem / opacity 0.78); nie mniejsze ani słabsze */
.footer-id__reg,
.footer-id__addr {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(247, 241, 231, 0.8);
  font-weight: 400;
  font-style: normal;
}

.footer-id__reg { margin-bottom: 0.85rem; }

/* E-mail i telefon — osobny, lekko wyróżniony blok kontaktowy pod adresem,
   z większym odstępem, jaśniejszym kolorem i subtelnymi złotymi ikonami */
.footer-contact { margin-top: 1.5rem; display: grid; gap: 0.5rem; }

.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ivory);
  text-decoration: none;
  transition: color 250ms var(--ease);
}

.footer-contact a:hover { color: var(--gold); }

.footer-contact svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  opacity: 0.95;
  flex-shrink: 0;
}

/* Linki prawne w dolnej belce — dyskretne, techniczne */
.site-footer__legal a { color: inherit; text-decoration: none; transition: color 250ms var(--ease); }
.site-footer__legal a:hover { color: var(--gold); }

.site-footer__bottom {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(247, 241, 231, 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8438rem;
  color: rgba(247, 241, 231, 0.45);
}

@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Animacje wejścia (scroll) ---------- */

/* Stan ukrycia do animacji wejścia obowiązuje WYŁĄCZNIE na ekranie (@media
   screen). W druku/PDF reguła nie jest aktywna, więc treść jest widoczna z
   samej architektury — ukrycie nie jest trwałym stanem bazowym, lecz ekranowym
   enhancementem. Bez JS dodatkowo zabezpiecza <noscript> w <head>. */
@media screen {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 650ms var(--ease), transform 650ms var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
}

.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Homepage capture-safe ----------
   Strona główna może zapisać się jako pełnostronicowy obraz, ale TYLKO w jasno
   określonym trybie przechwytywania (html.is-capture — np. ?capture=1 — albo
   html.is-printing przed drukiem). Narzędzia full-page screenshot / „zapisz jako
   obraz" nie zawsze przewijają stronę i nie zawsze uruchamiają IntersectionObserver,
   więc w trybie capture wymuszamy pełną widoczność. W NORMALNYM widoku .page-home
   animacje wejścia (reveal + złota linia) DZIAŁAJĄ na scroll. */
html:is(.is-capture, .is-printing) .page-home .reveal,
html:is(.is-capture, .is-printing) .page-home .reveal-line,
html:is(.is-capture, .is-printing) .page-home .map-anim {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html:is(.is-capture, .is-printing) .page-home .reveal-line .gold-line,
html:is(.is-capture, .is-printing) .page-home .reveal-line.is-visible .gold-line {
  transform: none !important;
  animation: none !important;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* hero__sheen jest statyczny — brak animacji do wyłączenia */

  .reveal { opacity: 1; transform: none; transition: none; }

  .reveal-line .gold-line { transform: none; animation: none; }

  .is-visible .map-point,
  .is-visible .map-route { animation: none; }

  .map-route { stroke-dashoffset: 0; }

  /* Zostaw stany wizualne, wyłącz ruch: brak unoszenia CTA, sheen pozostaje
     poza kadrem (bez błysku), złota linia focusu pojawia się bez animacji. */
  .btn--primary:hover,
  .btn--primary:focus-visible { transform: none; }
  .btn--primary::after,
  .form-control::after { transition: none; }
  .btn--primary:hover::after { transform: translateX(-130%); }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Druk / eksport do PDF ----------
   Na ekranie treść pojawia się animacją przy scrollu: .reveal startuje z
   opacity:0, a JS (IntersectionObserver) dodaje .is-visible. Przy druku/PDF
   obserwator nie odpala dla sekcji spoza viewportu, więc bez tego bloku
   pozostałyby niewidoczne (puste pola). Tu — wyłącznie dla druku — wymuszamy
   pełną widoczność i wyłączamy animacje. Widok ekranowy pozostaje bez zmian. */
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Spis treści artykułu: zwinięty na mobile (atrybut hidden z JS) musi być
     w pełni widoczny na wydruku; licznik sekcji i pasek postępu zbędne w PDF */
  .article-toc ol[hidden] { display: block !important; }
  .article-toc__count,
  .reading-progress { display: none !important; }

  /* Dwukolumnowa siatka artykułu nie ma sensu na wydruku — jedna kolumna */
  .article-container--rail { display: block !important; }
  .article-container--rail > .article-toc { position: static !important; max-height: none !important; overflow: visible !important; }

  /* Elementy animowane wejściem ORAZ ich potomkowie — zawsze widoczne w PDF */
  .reveal,
  .reveal-line,
  .map-anim,
  .reveal *,
  .reveal-line *,
  .map-anim * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Złota linia (scaleX) oraz elementy mapy w pełnym stanie końcowym */
  .gold-line,
  .reveal-line .gold-line,
  .reveal-line.is-visible .gold-line {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
  }
  .map-point { opacity: 1 !important; }
  .map-route { stroke-dashoffset: 0 !important; }

  /* Nagłówek nieprzyklejony — nie nakłada się na treść i nie powtarza w PDF */
  .site-header {
    position: static !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .about-grid--bio .portrait { position: static !important; }

  /* Hero z obrazem tła — w druku upraszczamy do ivory, by tekst był pewny.
     Tło i dekoracyjna poświata (mix-blend-mode + blur) bywają różnie renderowane
     przez silnik druku, więc je zdejmujemy; liczy się czytelny tekst. */
  .hero--blend {
    min-height: auto !important;
    overflow: visible !important;
    background: var(--ivory) !important;
  }
  .hero__bg,
  .hero__sheen { display: none !important; }
  .hero__content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Karty/kroki nie powinny pękać w poprzek strony. Całych sekcji NIE blokujemy,
     by nie wymuszać łamania strony i nie tworzyć dużych pustych pól. */
  .spec-card,
  .audience,
  .step,
  .featured-publication,
  .publication-row,
  .practice-accordion__item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Akordeon specjalizacji — w PDF pokazujemy treść WSZYSTKICH pozycji,
     niezależnie od tego, które są rozwinięte na ekranie. */
  .practice-accordion__content { display: block !important; }
  .practice-accordion__panel { visibility: visible !important; overflow: visible !important; }
  .practice-accordion__icon { display: none !important; }
  .practice-accordion__cols { grid-template-columns: 1fr !important; }

  /* Sekcja ciemna „Jak pracuję / How I work" — wymuszamy tło i kolory tekstu,
     by nie wydrukowała się jako pusty granatowy blok ani biały tekst na białym. */
  .section--dark,
  .work-section {
    background: var(--navy) !important;
    color: var(--ivory) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .section--dark *,
  .work-section * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .section--dark h2,
  .section--dark h3,
  .work-section h2,
  .work-section h3 { color: var(--ivory) !important; }
  .section--dark p,
  .work-section p { color: rgba(247, 241, 231, 0.85) !important; }

  /* Druk teł i kolorów zgodnie z projektem (gdy włączona „Grafika tła") */
  html,
  body {
    background: var(--ivory) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ---------- Awaryjny tryb druku wymuszony z JS (html.is-printing) ----------
   JS dodaje klasę html.is-printing w beforeprint / matchMedia('print') ZANIM
   @media print zacznie obowiązywać. Gwarantuje pełną widoczność animowanych
   elementów również w silnikach komponujących warstwy z ekranowego stanu
   (Safari/WebKit). Działa tylko przy druku — nie zmienia normalnego widoku. */
html.is-printing .reveal,
html.is-printing .reveal-line,
html.is-printing .map-anim,
html.is-printing .reveal *,
html.is-printing .reveal-line *,
html.is-printing .map-anim * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

html.is-printing .gold-line,
html.is-printing .reveal-line .gold-line,
html.is-printing .reveal-line.is-visible .gold-line {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}


/* ============================================================
   DOPRACOWANIE RUCHOWE (2026-06-29) — przejścia stron + hover wyróżnionej publikacji.
   ============================================================ */

/* Płynne przejścia między stronami (MPA View Transitions) — spójnie z Portalem.
   Subtelny cross-fade; header sticky świadomie NIE nazwany (uniknięcie migotania
   snapshotu sticky); degraduje się bezpiecznie tam, gdzie brak wsparcia. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 380ms; animation-timing-function: var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Hover wyróżnionej publikacji — spójny z .publication-row (które już reaguje).
   Karta klikalna (data-href + JS); :focus-within domyka klawiaturę przez wewn. .link-arrow. */
.featured-publication { transition: border-color var(--motion-medium) var(--ease), box-shadow var(--motion-medium) var(--ease), transform var(--motion-medium) var(--ease); }
.featured-publication__body h2 { transition: color var(--motion-medium) var(--ease); }
.featured-publication:hover, .featured-publication:focus-within { border-color: rgba(168, 137, 85, 0.5); box-shadow: 0 18px 40px -28px rgba(20, 32, 46, 0.25); transform: translateY(-2px); }
.featured-publication:hover .featured-publication__body h2, .featured-publication:focus-within .featured-publication__body h2 { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .featured-publication { transition: none; }
  .featured-publication:hover, .featured-publication:focus-within { transform: none; }
}

/* ============================================================
   MODERN PREMIUM (2026-06-29): pasek postępu czytania (artykuły) + powrót na górę.
   Markup wstrzykiwany przez main.js (zero zmian w HTML). Dyskretne, on-brand.
   ============================================================ */

/* Pasek postępu czytania — cienka złota linia u góry, rośnie ze scrollem (scaleX, GPU). */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 1001; pointer-events: none; background: rgba(168, 137, 85, 0.18); }   /* 5px + tor */
.reading-progress__bar { height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left center; box-shadow: 0 1px 6px -1px rgba(168, 137, 85, 0.6); }   /* miękka złota poświata = wyraźniejszy, wciąż gustowny */

/* Powrót na górę — dyskretny, pojawia się po przewinięciu (.is-visible). */
.back-to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 1000;
  width: 2.9rem; height: 2.9rem; display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--navy); border: 1px solid var(--line); border-radius: 50%;
  box-shadow: 0 12px 30px -16px rgba(20, 32, 46, 0.35); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--motion-medium) var(--ease), transform var(--motion-medium) var(--ease),
              color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { color: var(--gold); border-color: rgba(168, 137, 85, 0.5); }
.back-to-top:focus-visible { outline: 2px solid rgba(168, 137, 85, 0.55); outline-offset: 3px; }
.back-to-top svg { width: 1.1rem; height: 1.1rem; }
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity var(--motion-medium) linear; transform: none; }
  .back-to-top.is-visible { transform: none; }
}

/* ============================================================
   MIKRO-DETALE PREMIUM (2026-06-29): ::selection, fade obrazów, custom scrollbar.
   ============================================================ */

/* ---------- Zaznaczenie tekstu — PIERWOTNE złoto (0.26) ----------
   Powrót do pierwszej, mocniejszej wersji złota na życzenie (tekst granatowy).
   Zachowany TYLKO bezpiecznik czytelności na ciemnych sekcjach (jasny tekst) —
   nie zmienia wyglądu złota tam, gdzie się je ocenia (treść na jasnym tle). */
::selection { background: rgba(168, 137, 85, 0.26); color: var(--navy); }
::-moz-selection { background: rgba(168, 137, 85, 0.26); color: var(--navy); }

/* Ciemne sekcje — jasny tekst zaznaczenia (czytelność) */
.section--dark *::selection, .site-footer *::selection, .contact-hero *::selection { color: var(--ivory); }
.section--dark *::-moz-selection, .site-footer *::-moz-selection, .contact-hero *::-moz-selection { color: var(--ivory); }

/* Płynne pojawianie obrazów po doczytaniu. Klasy dodaje main.js TYLKO obrazom
   jeszcze niewczytanym (te z cache widać od razu — bez migotania). Bramka html.js
   = bez JS obrazy zawsze widoczne. reduced-motion → bez fade. */
.img-fade { opacity: 0; filter: blur(6px); }   /* klasa dodawana TYLKO przez JS = samobramkujące (bez JS brak klasy → obraz widoczny) */
.img-fade.is-in { opacity: 1; filter: blur(0); transition: opacity 480ms var(--ease), filter 480ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .img-fade { opacity: 1; filter: none; } .img-fade.is-in { transition: none; } }

/* Custom scrollbar — cienki, brandowo stonowany (Webkit + Firefox). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(168, 137, 85, 0.35); border-radius: var(--radius-pill); border: 2px solid var(--ivory); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(168, 137, 85, 0.6); background-clip: padding-box; }
html { scrollbar-width: thin; scrollbar-color: rgba(168, 137, 85, 0.45) transparent; }

/* ============================================================================
   PUBLIKACJE — „Odsłanianie kategorii" (wdrożenie zaakceptowanej wizualizacji
   Premium+, 2026-07-08). Źródło: wizualizacje-publikacje-odslanianie.html.
   Reguły nadpisują wcześniejsze deklaracje publikacji (później w pliku = wygrywa
   przy równej specyficzności). Zakres desktop; mobile = osobny etap — przenosimy
   tylko to, co utrzymuje spójność po zmianie struktury wiersza.
   ============================================================================ */

/* ---------- Rytm strony publikacji (jedna skala odstępów) ---------- */
body.page-publications{
  --rhythm-s:clamp(.9rem, 1.5vw, 1.2rem);
  --rhythm-m:clamp(1.5rem, 2.8vw, 2rem);
  --rhythm-l:clamp(2.5rem, 5vw, 3.5rem);
}
body.page-publications .page-head .lead{ margin-top:var(--rhythm-s); }
body.page-publications .publication-tools{ margin-bottom:calc(var(--rhythm-l)*.88); }
body.page-publications .featured-grid{ margin-bottom:calc(var(--rhythm-l)*.88); }
body.page-publications .featured-grid__items{ gap:var(--rhythm-m); }
body.page-publications .publications-index{ margin-top:calc(var(--rhythm-l)*.88); }

/* ---------- Rzemiosło typograficzne (scope: strona publikacji) ---------- */
body.page-publications{
  text-rendering:optimizeLegibility;
  hanging-punctuation:first allow-end last;
  font-feature-settings:"liga" 1,"calt" 1;
  font-optical-sizing:auto;
}
body.page-publications ::selection{ background:rgba(168,137,85,.22); color:var(--navy); }
body.page-publications .h-xl{ letter-spacing:-0.012em; }
body.page-publications .h-lg{ letter-spacing:-0.008em; }
.featured-editorial-card__title,
.publication-list .publication-row__text h3{ text-wrap:balance; }
body.page-publications .lead,
.category-lead,
.featured-editorial-card__excerpt,
.publication-list .publication-row__text p{ text-wrap:pretty; font-variant-numeric:oldstyle-nums; }
.featured-editorial-card__title,
.publication-row time{ font-variant-numeric:oldstyle-nums; }
.featured-editorial-card__title{ letter-spacing:-0.006em; }

/* Dyscyplina złota: etykiety sekcji, daty i kickery stonowane (złoto = akcent, nie tapeta) */
.featured-grid__title,
.publication-sidebar__title,
.publication-search span,
.publications-index .kicker{ color:var(--muted); letter-spacing:0.16em; }
body.page-publications .publication-row time{ color:var(--muted); }

/* ---------- Wyszukiwarka: cicha w spoczynku, wyraźna w użyciu ---------- */
.publication-search{ position:relative; }
.publication-search span{ transition:color .3s var(--ease); }
.publication-search input{
  border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent;
  padding:.7rem 2.4rem .7rem .55rem; caret-color:var(--gold);
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.publication-search input::placeholder{ color:rgba(95,102,112,.55); }
/* stan aktywny trzyma się, dopóki jest fraza (.is-filled), nie tylko na focus */
.publication-search input:focus,
.publication-search.is-filled input{
  outline:none; box-shadow:none; border-bottom-color:var(--gold);
  background-color:rgba(168,137,85,.042);
}
.publication-search:focus-within span,
.publication-search.is-filled span{ color:var(--navy); }
/* tylko JEDEN „×": natywny przycisk czyszczenia inputa search ukryty */
.publication-search input[type="search"]{ appearance:none; -webkit-appearance:none; }
.publication-search input[type="search"]::-webkit-search-cancel-button,
.publication-search input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; }

/* własny „×" (SVG, tworzony przez JS): lekki znak, wygodny hit-area 30px,
   hover = sama zmiana koloru (bez kółka tła — za aplikacyjne) */
.pub-clear{
  position:absolute; right:3px; width:30px; height:30px; padding:0; border:0; background:none;
  color:var(--muted); cursor:pointer; line-height:0; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  transition:color .25s var(--ease);
}
.pub-clear svg{ display:block; }
.pub-clear.is-visible{ display:inline-flex; }
.pub-clear:hover{ color:var(--gold); }
.pub-clear:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* sugestie jak spokojna redakcyjna podpowiedź (cieplejszy, miękki cień) */
.publication-suggestions{
  box-shadow:0 24px 60px -34px rgba(120,90,40,.5);
  border:1px solid var(--line); border-radius:var(--radius-card);
}

/* ---------- Kategorie: aktywne podkreślenie 1px (desktop), rysowane od lewej ---------- */
@media (min-width:721px){
  .publication-filter button.is-active::after{ height:1px; }
}

/* ---------- Krótki opis obszaru (category lead) — kursywa, Cormorant ---------- */
.category-lead{
  margin:calc(var(--rhythm-s,1rem)*.88) 0 0; max-width:60ch; min-height:1.5em;
  color:var(--muted); font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.2rem; line-height:1.5; transition:opacity 280ms var(--ease);
}
.category-lead[hidden]{ display:none; }
.category-lead.is-swapping{ opacity:0; }
@media (prefers-reduced-motion: reduce){ .category-lead{ transition:none; } }

/* ---------- Wejście kart/wierszy: opacity-only, spokojne ---------- */
.pub-enter{ opacity:0; transition:opacity 480ms var(--ease); }
.pub-enter.is-in{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .pub-enter,.pub-enter.is-in{ opacity:1 !important; transition:none !important; }
}

/* obraz karty dołącza spokojnie (fade po doczytaniu; klasę nadaje JS) */
.featured-editorial-card__visual img{ opacity:0; transition:opacity 520ms var(--ease), filter .5s var(--ease); }
.featured-editorial-card__visual img.is-loaded{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .featured-editorial-card__visual img{ opacity:1 !important; transition:none !important; }
}
/* łagodny placeholder, gdy grafika artykułu się nie wczyta */
.featured-editorial-card__visual.is-broken img{ display:none; }
.featured-editorial-card__visual.is-broken::before{
  content:""; position:absolute; inset:14px; border:1px solid var(--line); border-radius:var(--radius-line); opacity:.7;
}

/* podświetlenie trafień — spokojne złote tło, bez żółtego markera */
.publication-list mark,
.featured-grid__items mark{ background:rgba(168,137,85,.12); color:inherit; border-radius:var(--radius-paper); padding:0 .08em; }

/* ---------- Karty wyróżnione: 1 duża + lżejsze; spójny kadr 3/2 ---------- */
.featured-editorial-card{ transition:border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); }
/* hover: BEZ uniesienia — karta „rozświetla się" (paper→biel), ramka ciepleje,
   szept cienia; tytuł ciepleje do przygłębionego złota (nie ornament) */
.featured-editorial-card:hover,
.featured-editorial-card:focus-visible{
  transform:none;
  background-color:#fff;
  border-color:rgba(168,137,85,.55);
  box-shadow:0 16px 40px -30px rgba(20,32,46,.25);
}
.featured-editorial-card::after{ display:none; }
.featured-editorial-card__title{ transition:color .3s var(--ease); }
.featured-editorial-card:hover .featured-editorial-card__title,
.featured-editorial-card:focus-visible .featured-editorial-card__title{ color:var(--gold); }
@supports (color: color-mix(in srgb, red 50%, blue)){
  .featured-editorial-card:hover .featured-editorial-card__title,
  .featured-editorial-card:focus-visible .featured-editorial-card__title{ color:color-mix(in srgb, var(--gold) 70%, var(--navy) 30%); }
}
/* kategoria i link budzą się do złota razem z tytułem (spoczynek = muted) */
.pub-card__tag,
.featured-editorial-card__tag{ color:var(--muted); transition:color .3s var(--ease); }
.featured-editorial-card:hover .featured-editorial-card__tag,
.featured-editorial-card:focus-visible .featured-editorial-card__tag{ color:var(--gold); }
.featured-editorial-card__more{ color:var(--muted); transition:color .3s var(--ease); }
.featured-editorial-card:hover .featured-editorial-card__more,
.featured-editorial-card:focus-visible .featured-editorial-card__more{ color:var(--gold); }
.featured-editorial-card__more span{ display:inline-block; transition:transform .3s var(--ease); }
.featured-editorial-card:hover .featured-editorial-card__more span{ transform:translateX(3px); }
/* obraz: spójny kadr, cienka ramka, minimalne wyciszenie barw ożywające na hover */
.featured-editorial-card__visual{ position:relative; aspect-ratio:3/2; border:1px solid var(--line); }
.featured-editorial-card__visual img{ filter:saturate(.96); }
.featured-editorial-card:hover .featured-editorial-card__visual img{ filter:saturate(1) contrast(1) brightness(1.03); }
/* jednolita wysokość kart — excerpt do 3 linii */
.featured-editorial-card__excerpt{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* proporcje: duża karta wiedzie obrazem (~38%), lżejsze kompaktowe (~30%);
   TYLKO >760px — niżej produkcyjny stack 1-kolumnowy z obrazem u góry */
@media (min-width:761px){
  .featured-editorial-card:not(.featured-editorial-card--light){ grid-template-columns:minmax(0,1.2fr) minmax(250px,1fr); }
  .featured-editorial-card--light{ grid-template-columns:minmax(0,1.6fr) minmax(185px,.92fr); }
}
.featured-editorial-card--light{ padding:clamp(1.15rem,2.4vw,1.7rem); }
.featured-editorial-card--light .featured-editorial-card__visual{ aspect-ratio:3/2; }
.featured-editorial-card--light .featured-editorial-card__title{ font-size:1.28rem; }
.featured-editorial-card--light .featured-editorial-card__excerpt{ -webkit-line-clamp:2; }

/* ---------- „Pozostałe publikacje": data | (kategoria/tytuł/opis) | strzałka ---------- */
.publication-list .publication-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start; gap:.15rem 1.6rem;
  transition:border-color 250ms var(--ease), background-color 250ms var(--ease);
}
.publication-list .publication-row time{ grid-column:1; align-self:start; }
.publication-list .publication-row .publication-row__text{ grid-column:2; }
.publication-list .publication-row .publication-row__arrow{ grid-column:3; align-self:center; }
/* kategoria NAD tytułem, w bloku tekstu; ciaśniejszy tracking — „Odpowiedzialność"
   nie rozlewa się i nie konkuruje z tytułem */
.pub-row__cat{ display:block; margin:0 0 .5rem; letter-spacing:.14em; padding-top:0; }
.publication-list .publication-row__text h3{ margin:0 0 .4rem; line-height:1.25; transition:color .25s var(--ease); }
.publication-list .publication-row__text p{ margin:0; max-width:64ch; }
/* hover wiersza: ciepły pas tła + złota kategoria/tytuł + strzałka (3px) */
.publication-list .publication-row:hover,
.publication-list .publication-row:focus-visible{ background-color:rgba(168,137,85,.05); }
.publication-list .publication-row:hover .pub-row__cat,
.publication-list .publication-row:focus-visible .pub-row__cat{ color:var(--gold); }
.publication-row__arrow{ transition:transform .3s var(--ease); }
.publication-row:hover .publication-row__arrow{ transform:translateX(3px); }
/* mobile: kategoria zawsze nad tytułem (struktura wiersza zmieniona — stare reguły
   ≤560 celowały w tag jako bezpośrednie dziecko siatki) */
@media (max-width:720px){
  .publication-list .publication-row{ grid-template-columns:minmax(0,1fr) auto; gap:.1rem 1rem; }
  .publication-list .publication-row time{ grid-column:1; grid-row:1; margin-bottom:.45rem; }
  .publication-list .publication-row .publication-row__text{ grid-column:1; grid-row:2; }
  .publication-list .publication-row .publication-row__arrow{ grid-column:2; grid-row:1 / span 2; }
}

/* ---------- Sortowanie „Kolejność · Polecane · Najnowsze" + „Pokaż kolejne" ---------- */
.pub-index-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.pub-sort{ display:inline-flex; align-items:baseline; gap:.55rem; font-family:var(--sans); font-size:.85rem; padding-bottom:.2rem; }
.pub-sort[hidden]{ display:none; }
.pub-sort__label{ color:var(--muted); letter-spacing:.02em; }
.pub-sort__sep{ color:var(--line); }
.pub-sort__btn{ border:0; background:none; font:inherit; color:var(--muted); cursor:pointer; padding:.1rem 0; position:relative; transition:color .25s var(--ease); }
.pub-sort__btn:hover{ color:var(--navy); }
.pub-sort__btn.is-active{ color:var(--navy); font-weight:500; }
.pub-sort__btn.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--gold); }
.pub-sort__btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:var(--radius-paper); }
.pub-more-wrap{ margin-top:1.6rem; }
.pub-more{ font-family:var(--sans); font-size:.9rem; font-weight:500; color:var(--navy); background:none; border:0; border-bottom:1px solid var(--line); padding:.3rem 0 .35rem; cursor:pointer; transition:border-color .25s var(--ease), color .25s var(--ease); }
.pub-more:hover{ color:var(--gold); border-bottom-color:var(--gold); }
.pub-more:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- Empty state: tekstowe sugestie, spokojne linki ---------- */
.publication-no-results__suggestions{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 0; }
.publication-no-results__suggestions .publication-problem{
  border:0; background:none; border-radius:0; padding:0; margin:0;
  font-family:var(--sans); font-size:.98rem; color:var(--muted);
  position:relative; cursor:pointer; transition:color .2s var(--ease);
}
.publication-no-results__suggestions .publication-problem:hover{ color:var(--gold); }
.publication-no-results__suggestions .publication-problem:not(:last-child)::after{ content:"·"; margin:0 .55rem; color:#8A8F97; }
/* „Wyczyść wyszukiwanie": granat w spoczynku, złoto na hover; mostek „Zobacz wyniki…"
   zostaje złoty — tam jest główną akcją */
.publication-no-results .link-reset-publications:not(.pub-show-all-query){ color:var(--navy); transition:color .25s var(--ease), border-color .25s var(--ease); }
.publication-no-results .link-reset-publications:not(.pub-show-all-query):hover{ color:var(--gold); }
/* most „brak w tym obszarze → wszystkie": chowa pozostałe elementy wariantu A */
.pub-cross{ color:var(--navy); }
.publication-no-results__query.has-cross > p:not(.pub-cross),
.publication-no-results__query.has-cross .publication-no-results__suggestions,
.publication-no-results__query.has-cross > .link-reset-publications:not(.pub-show-all-query){ display:none; }

/* ---------- Elementy pomocnicze ---------- */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Ziarno papieru (desktop) ---------- */
.paper-grain{
  display:block; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
  contain:strict;
}
/* mobile: warstwa fixed + multiply = rekompozycja całej strony przy przewijaniu;
   efekt przy .04 podprogowy, koszt na mobilnych GPU realny → wyłączone (decyzja 2026-07-08) */
@media (max-width:720px){ .paper-grain{ display:none; } }
/* strażniki dostępności — niezależne od szerokości */
@media (prefers-contrast: more){ .paper-grain{ display:none; } }
@media (prefers-reduced-transparency: reduce){ .paper-grain{ display:none; } }

/* ---------- Druk ---------- */
@media print{
  .paper-grain,
  .pub-sort,
  .pub-more-wrap,
  .pub-clear,
  .publication-suggestions{ display:none !important; }
  .pub-enter,
  .pub-enter.is-in{ opacity:1 !important; transition:none !important; }
  .featured-editorial-card__visual img{ opacity:1 !important; }
  .publication-list mark,
  .featured-grid__items mark{ background:transparent !important; font-weight:600; }
}

/* =========================================================================
   LOKALIZACJA — interaktywna karta mapy (wdrożenie wizualizacji, 2026-07-09)
   Marker B jako OSOBNA WARSTWA nad statyczną mapą (nie wypalony w obraz),
   tętno attention/interaction (sygnał lokalizacji), „Kopiuj adres", papierowy
   podgląd. KLUCZOWE: mapa = JEDEN statyczny raster — nic nie animuje obrazu,
   więc mapa jest nieruchoma; „żyje" wyłącznie warstwa markera/tętna.
   Selektory scoped do .kmap / .kmap-zoom → zero wpływu na inne strony.
   ========================================================================= */
.kmap{position:relative;transition:box-shadow .45s var(--ease);}
/* hover/focus: delikatne ocieplenie ramy (ciepły złoty pierścień) */
.kmap:hover,.kmap:focus-within{box-shadow:0 0 0 1px rgba(168,137,85,.28);}
/* realny przycisk na całej mapie — otwiera podgląd (nie figure[role=button]) */
.kmap__open{position:absolute;inset:0;z-index:3;border:0;margin:0;padding:0;background:transparent;cursor:pointer;border-radius:inherit;}
.kmap__open:focus-visible{outline:1.5px solid var(--gold);outline-offset:-4px;}
/* MAPA = STATYCZNY RASTER: stała saturacja + własna buforowana warstwa
   (transform+translateZ+backface); NIC nie animuje obrazu → mapa nie drga,
   nie przesuwa się, nie mięknie. Kadr przybliżony zakotwiczony w punkcie pina. */
.kmap .contact-map__image{filter:saturate(.96);transform:scale(2.1) translateZ(0);transform-origin:var(--pin-x,50%) var(--pin-y,50%);backface-visibility:hidden;}
/* nakładka tonu (hover) — animujemy TYLKO opacity (kompozytor), nigdy obrazu */
.kmap__tone{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(120% 120% at var(--pin-x,50%) var(--pin-y,50%),rgba(168,137,85,.18),rgba(168,137,85,.05) 58%,rgba(168,137,85,0) 100%);transition:opacity .45s var(--ease);will-change:opacity;}
.kmap:hover .kmap__tone,.kmap:focus-within .kmap__tone{opacity:1;}
/* marker B — osobna warstwa nad mapą; kotwica (--pin-x/--pin-y) = punkt styku/ostrze */
.kmap__pin{position:absolute;left:var(--pin-x,50%);top:var(--pin-y,50%);z-index:4;width:0;height:0;pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity 420ms var(--ease),transform 420ms var(--ease);}
.kmap.is-live .kmap__pin{opacity:1;transform:none;}
/* max-width:none — produkcyjny reset img,svg{max-width:100%} zeruje znak przy
   kotwicy o szerokości 0; translate w px (nie %) — odporne na Safari */
.kmap__marker{position:absolute;left:0;top:0;width:26px;height:37px;max-width:none;transform:translate(-13px,-37px);filter:drop-shadow(0 1.5px 3px rgba(20,32,46,.15));}
.kmap__ground{position:absolute;left:0;top:0;width:12px;height:3px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(20,32,46,.14),rgba(20,32,46,0) 70%);}
/* tętno = sygnał lokalizacji: attention (pierwsze wejście, mocniejsze) +
   interaction (świadome interakcje, subtelne). Własna warstwa kompozytora
   (will-change) → animacja NIE repainuje mapy. */
.kmap__pulse{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;border:2px solid var(--gold);background:rgba(168,137,85,.16);transform:translate(-50%,-50%) scale(1);opacity:0;pointer-events:none;will-change:transform,opacity;}
.kmap__pulse.is-attention{animation:kPulseAttn 1050ms var(--ease) 1 both;}
.kmap__pulse.is-interaction{animation:kPulseInter 720ms var(--ease) 1 both;}
@keyframes kPulseAttn{from{opacity:.8;transform:translate(-50%,-50%) scale(1);}to{opacity:0;transform:translate(-50%,-50%) scale(2.4);}}
@keyframes kPulseInter{from{opacity:.44;transform:translate(-50%,-50%) scale(1);}to{opacity:0;transform:translate(-50%,-50%) scale(1.65);}}
/* atrybucja nad markerem, ale nie łapie kliknięć (cała mapa klikalna) */
.kmap .contact-map__attrib{z-index:6;pointer-events:none;}

/* adres + „Kopiuj adres" pod mapą */
.kmap-addr-row{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;justify-content:space-between;}
.kmap-addr-row .contact-map-card__addr{margin-top:0;}
.kmap-copy{border:0;background:none;padding:0 0 .15rem;cursor:pointer;font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--line);transition:color .25s var(--ease),border-color .25s var(--ease);min-width:6.6em;text-align:center;}
.kmap-copy:hover{color:var(--gold);border-bottom-color:var(--gold);}
.kmap-copy:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.kmap-copy.is-done{color:var(--gold);border-bottom-color:transparent;}
/* dyskretny komunikat błędu kopiowania (bez alertu wizualnego) */
.kmap-copy-note{margin:.4rem 0 0;font-family:var(--sans);font-size:.72rem;line-height:1.5;color:var(--muted);}
/* szczegóły dojścia — jedna spokojna linia pod adresem (widoczna domyślnie) */
.kmap-hint{margin:.5rem 0 0;font-family:var(--sans);font-size:.78rem;line-height:1.55;color:var(--muted);max-width:44ch;text-wrap:pretty;}

/* --- powiększony podgląd: papierowa plansza (bez glass/backdrop-filter) --- */
.kmap-zoom{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;background:rgba(247,241,231,.985);opacity:0;pointer-events:none;transition:opacity .35s var(--ease);}
.kmap-zoom.is-open{opacity:1;pointer-events:auto;}
.kmap-zoom__frame{width:min(92vw,1400px);border:1px solid var(--line);border-radius:var(--radius-panel);overflow:hidden;background:var(--paper);box-shadow:0 14px 40px -32px rgba(20,32,46,.22);transform:scale(.985);transition:transform .35s var(--ease);}
.kmap-zoom.is-open .kmap-zoom__frame{transform:scale(1);}
.kmap-zoom__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 1.15rem;border-bottom:1px solid var(--line);background:var(--paper);}
.kmap-zoom__title{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.kmap-zoom__actions{display:inline-flex;align-items:center;gap:1.4rem;}
/* akcje = mała liniowa ikona + tekst; bez tła/pigułek; „Zamknij" ma TEKST */
.kmap-zoom__route,.kmap-zoom__close{display:inline-flex;align-items:center;gap:.4rem;border:0;background:none;margin:0;padding:0 0 .15rem;cursor:pointer;font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.04em;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line);transition:color .25s var(--ease),border-color .25s var(--ease);}
.kmap-zoom__route:hover,.kmap-zoom__close:hover{color:var(--gold);border-bottom-color:var(--gold);}
.kmap-zoom__route:focus-visible,.kmap-zoom__close:focus-visible{color:var(--gold);border-bottom-color:var(--gold);outline:1.5px solid var(--gold);outline-offset:3px;}
.kmap-zoom__ico{width:.9rem;height:.9rem;display:block;flex:none;}
/* papierowy margines wokół mapy w podglądzie */
.kmap-zoom__media{padding:10px;background:var(--paper);}
.kmap-zoom__canvas{position:relative;line-height:0;}
.kmap-zoom__canvas img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover;backface-visibility:hidden;transform:translateZ(0);}
.kmap-zoom__canvas .kmap__pin{position:absolute;left:var(--pin-x,50%);top:var(--pin-y,50%);z-index:5;width:0;height:0;pointer-events:none;opacity:1;transform:none;}
.kmap-zoom__canvas .kmap__marker{width:30px;height:43px;transform:translate(-15px,-43px);}
.kmap-zoom__canvas .kmap__ground{width:14px;height:3.5px;}
.kmap-zoom__canvas .kmap__pulse{width:30px;height:30px;}
.kmap-zoom__attrib{position:absolute;right:.5rem;bottom:.45rem;z-index:6;pointer-events:none;font-family:var(--sans);font-size:.62rem;color:var(--muted);background:rgba(247,241,231,.82);padding:.1rem .4rem;border-radius:var(--radius-paper);}
body.kmap-zoom-open{overflow:hidden;}

/* mobile: nagłówek podglądu w kolumnie, wygodne touch targety */
@media (max-width:600px){
  .kmap-zoom__frame{width:94vw;}
  .kmap-zoom__head{flex-direction:column;align-items:flex-start;gap:.55rem;padding:.85rem 1rem;}
  .kmap-zoom__actions{gap:1.5rem;}
  .kmap-zoom__route,.kmap-zoom__close{padding:.4rem 0;}
  .kmap-zoom__canvas img{max-height:64vh;}
  .kmap-copy{padding:.35rem 0 .15rem;}
}

/* druk: marker na papierze (zasada projektu); podgląd/tętno/filtry — nie */
@media print{
  .kmap-zoom{display:none !important;}
  .kmap__pin{opacity:1 !important;transform:none !important;}
  .kmap__pulse{display:none !important;}
  .kmap .contact-map__image{filter:none !important;}
}

/* reduced motion: bez tętna i bez animacji wejściowych */
@media (prefers-reduced-motion: reduce){
  .kmap__pin{opacity:1 !important;transform:none !important;transition:none !important;}
  .kmap__pulse{animation:none !important;opacity:0 !important;}
  .kmap__tone{transition:none !important;}
  .kmap-zoom,.kmap-zoom__frame{transition:none !important;}
  .kmap-zoom__frame{transform:none !important;}
}

/* =========================================================================
   DOMKNIĘCIE FORMULARZA KONTAKTOWEGO (wdrożenie wizualizacji, 2026-07-09)
   Sukces = modal z pieczęcią (centrowany) → po zamknięciu trwałe potwierdzenie
   w miejscu formularza. Błąd wysyłki = ramka inline między zgodą a submitem.
   Overlay = granatowy wash BEZ blur/glassmorphismu. Pieczęć = wspólny znak
   z Portalem (.seal__ring/.seal__check, viewBox 80, r34, „M27 41 l9 9 l17 -19").
   ========================================================================= */

/* --- PIECZĘĆ (jedna pieczęć, gest 9): okrąg i ptaszek 2.7; ptaszek rysowany pathLength=1.
   MODAL: łuk `.seal__arc` + PEŁNA sekwencja sterowana z main.js (WAAPI, z realnej wysyłki):
   ładowanie 2,4 s → domknięcie 780 ms → dosiad 260 ms → po settle.finished ptaszek 440 ms;
   błąd = spokojny zanik łuku; reduced-motion = stan finalny bezpośrednio (bez WAAPI).
   KARTA form-sent: statyczny pełny `.seal__ring` + narysowany ptaszek. --- */
.seal__ring{fill:none;stroke:var(--gold);stroke-width:2.7;stroke-linecap:round;}
.seal__arc{fill:none;stroke:var(--gold);stroke-width:2.7;stroke-linecap:round;stroke-dasharray:150 64;stroke-dashoffset:0;transform-box:fill-box;transform-origin:center;transform:rotate(0deg);}
.seal__check{fill:none;stroke:var(--gold);stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;}

/* --- OVERLAY: granatowy wash BEZ blur (nadpisuje wcześniejszy blur) --- */
.contact-modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,32,46,.58);}
@media (prefers-reduced-transparency: reduce){ .contact-modal-backdrop{background:rgba(20,32,46,.7);} }
@media (prefers-contrast: more){ .contact-modal-backdrop{background:rgba(20,32,46,.8);} }

/* --- SUKCES: modal wyśrodkowany z pieczęcią (papierowy, quiet luxury) --- */
.contact-modal--sealed{text-align:center;border-left-color:var(--line);padding-top:clamp(2rem,4.5vw,3rem);}
.contact-modal__seal{position:relative;display:block;width:clamp(52px,6.5vw,60px);height:auto;margin:0 0 1rem;}
.contact-modal__seal svg{display:block;width:100%;height:auto;overflow:visible;}
.contact-modal--sealed .contact-modal__seal{width:92px;margin:0 auto 1.4rem;}   /* skala „publiczna" pieczęci (gest 9) */
.contact-modal--sealed .contact-modal__eyebrow{margin-bottom:.7rem;}
.contact-modal--sealed .contact-modal__text{margin-left:auto;margin-right:auto;}
.contact-modal--sealed .contact-modal__actions{justify-content:center;margin-top:1.75rem;}
.contact-modal .btn--primary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* --- intro / formularz ukrywane po sukcesie --- */
.form-card__intro[hidden]{display:none !important;}
.form-grid[hidden]{display:none !important;}

/* --- TRWAŁE POTWIERDZENIE w miejscu formularza (po zamknięciu modala) --- */
.form-sent{text-align:center;padding:clamp(1.6rem,4vw,2.6rem) 1rem;border-radius:var(--radius-card);animation:form-sent-in .5s var(--ease) both;}
.form-sent[hidden]{display:none;}
/* Kontener potwierdzenia jest fokusowany PROGRAMOWO (tabindex=-1, poza tab-order) tylko po to,
   by przenieść czytnik/scroll — bez pierścienia „obwódki". role=status i tak ogłasza treść. */
.form-sent:focus,
.form-sent:focus-visible{outline:none;}
.form-sent__seal{display:block;width:clamp(60px,7.5vw,76px);height:auto;margin:0 auto 1.1rem;}
.form-sent__seal svg{display:block;width:100%;height:auto;overflow:visible;}
.form-sent__eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 .6rem;}
.form-sent__title{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;letter-spacing:-.02em;color:var(--navy);margin:0;}
.form-sent__text{margin:.7rem auto 0;max-width:42ch;color:var(--muted);font-size:1rem;line-height:1.6;}
.form-sent__again{margin-top:1.5rem;border:0;background:none;padding:.15rem 0;cursor:pointer;font-family:var(--sans);font-size:.9rem;font-weight:500;letter-spacing:.02em;color:var(--navy);border-bottom:1px solid var(--line);transition:color .25s var(--ease),border-color .25s var(--ease);}
.form-sent__again:hover{color:var(--gold);border-bottom-color:var(--gold);}
.form-sent__again:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
@keyframes form-sent-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* --- BŁĄD WYSYŁKI: ramka inline między zgodą a submitem (spokojne powiadomienie, NIE modal) --- */
.form-inline-error{grid-column:1 / -1;margin:.2rem 0 0;padding:1.25rem 1.35rem;border-radius:var(--radius-card);
  background:linear-gradient(rgba(168,137,85,.05),rgba(168,137,85,.05)),var(--ivory);
  border:1px solid rgba(168,137,85,.32);border-left:3px solid var(--gold);
  animation:form-inline-error-in .4s var(--ease) both;}
.form-inline-error[hidden]{display:none;}
/* Ramka błędu jest fokusowana PROGRAMOWO (tabindex=-1, poza tab-order) — bez pierścienia
   „obwódki"; role=alert ogłasza treść czytnikowi. */
.form-inline-error:focus,
.form-inline-error:focus-visible{outline:none;}
.form-inline-error__eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 .5rem;}
.form-inline-error__title{font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.2;letter-spacing:-.015em;color:var(--navy);margin:0;}
.form-inline-error__text{margin:.5rem 0 0;font-size:.9rem;line-height:1.55;color:var(--muted);}
.form-inline-error__contact{margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(168,137,85,.22);display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;font-size:.88rem;}
.form-inline-error__contact-item{display:inline-flex;align-items:center;gap:.5rem;}
.form-inline-error__contact-icon{width:16px;height:16px;flex:none;color:var(--gold);}
.form-inline-error__contact a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line);}
.form-inline-error__contact a:hover{color:var(--gold);border-bottom-color:var(--gold);}
@keyframes form-inline-error-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* --- STAN WYSYŁANIA: cienka złota nitka postępu (bez spinnera, bez layout shift) --- */
.send-progress{height:2px;margin-top:.8rem;border-radius:var(--radius-line);background:var(--line);overflow:hidden;opacity:0;transition:opacity .25s var(--ease);}
.form-grid.is-sending .send-progress{opacity:1;}
.send-progress > span{display:block;height:100%;width:38%;border-radius:var(--radius-line);background:var(--gold);transform:translateX(-130%);}
.form-grid.is-sending .send-progress > span{animation:send-progress-slide 1.05s var(--ease) infinite;}
@keyframes send-progress-slide{0%{transform:translateX(-130%);}100%{transform:translateX(360%);}}

/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce){
  /* pieczęć modala: stan finalny ustawia main.js (sealSuccess/sealError w gałęzi reduced-motion) */
  .form-sent{animation:none !important;}
  .form-inline-error{animation:none !important;}
  .form-grid.is-sending .send-progress > span{animation:none !important;width:100%;transform:none;opacity:.55;}
}
html.is-printing .send-progress{display:none !important;}

/* ---------- Dotykowy target (pointer: coarse) ----------
   Na ekranach dotykowych przyciski mają min. 44px realnej wysokości (WCAG target size).
   Desktop (fine pointer) bez zmian — bez niepotrzebnego powiększania. */
@media (pointer: coarse) {
  .btn,
  .contact-route { min-height: 44px; }
}