/* warsztaty.css — style tylko dla /warsztaty. Ładowany po style.css.
   System typograficzny przeniesiony z obecnosc2026.movementalism.eu:
   Cormorant Garamond na nagłówki, Source Sans 3 na tekst, nadproże + linijka
   + H2 z kursywą jako akcent. Fonty pochodzą z /fonts/ w tym repo —
   zero źródeł zewnętrznych. */

/* --teal-lbl nie jest tu definiowana — dziedziczy sie ze style.css,
   gdzie ma tę samą wartość #3bb3b3. Jedno źródło prawdy dla koloru. */
:root{
  --navy1:#001020;
  --navy3:#001f3f;
  --navy4:#002a52;
  --gray:#6a7080;
  --sh:0 18px 44px rgba(0,0,0,.5);
  /* Barwy części dnia. Plansza drukowana używa #C25100 i #0E6B66, dobranych
     pod kremowe tło — na granatowej karcie oba są za ciemne i paski gubią się
     w tle. Poniżej jaśniejsze warianty TYCH SAMYCH barw: ten sam odcień,
     podniesiona jasność. #C25100 to hsl(25,100%,38%) → --am hsl(27,86%,58%);
     #0E6B66 to hsl(177,77%,24%) → --pm hsl(176,49%,48%). */
  --am:#F08B3A;
  --pm:#3FB8B0;
  /* Złoto WYŁĄCZNIE dla hero. --gold2 (#d4af87) jest dobre wszędzie tam, gdzie
     tekst leży na karcie — nadproża sekcji i kursywy w nagłówkach mają na nim
     6-7 kontrastu. W hero tekst leży wprost na zdjęciu, bez karty i bez
     winiety, i to samo złoto spada tam poniżej progu. Ta zmienna rozjaśnia
     TEN SAM odcień tylko na tę jedną sytuację; --gold2 zostaje nietknięte. */
  --gold-hero:#e8c9a4;
}

/* --- nagłówek strony ---
   Wzorzec trzyma nagłówek na position:fixed i pokazuje go skryptem, dokładając
   klasę .show. Tutaj to samo robi position:sticky — bez JS-u. Różnica jest taka,
   że wzorzec startuje niewidoczny, a ten jest widoczny od początku; nie da się
   inaczej, bo warunkiem pojawienia się był tam pomiar przewinięcia w JS.
   Tło .72 z rozmyciem daje czytelność nad każdym tłem, które pod nim przepływa. */
.site-hdr{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,1.4vh,16px) 40px;
  background:rgba(0,8,16,.72);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(193,154,107,.12);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-hdr{background:rgba(0,8,16,.92)}
}
@media(max-width:900px){.site-hdr{padding:10px 18px}}
/* Logo i symbol bez zmian — znika tylko własna płytka .brand ze style.css,
   bo we wzorcu nagłówek jest paskiem, a nie kafelkiem. */
.site-hdr .brand{
  margin-bottom:0;padding:0;
  background:none;border:0;box-shadow:none;border-radius:0;
  gap:clamp(10px,2vw,16px);
}
.site-hdr .brand-sym{width:clamp(26px,3.4vw,34px)}
.site-hdr .brand-word{width:clamp(118px,17vw,164px)}

/* --- kontener treści i gradient tła --------------------------------------
   Gradient jest dzieckiem .page-body i ma position:absolute, więc rozciąga
   się na całą wysokość treści i PRZEWIJA SIĘ Z NIĄ. Hero stoi poza
   .page-body, więc nie ma nad sobą żadnej warstwy koloru — widać samo zdjęcie.

   Odstępstwo od dosłownego brzmienia zadania: .page-body nie dostaje
   margin-top równego wysokości hero, bo hero zostaje w normalnym przepływie
   i sam tę wysokość zajmuje. Dodanie marginesu zdublowałoby odstęp — dokładnie
   tak działa wzorzec, gdzie zmierzyłem .page-bg zaczynające się na 1482 px
   przy oknie 989 px, czyli 156vh. Tutaj gradient ma zaczynać się na dolnej
   krawędzi hero, więc margines byłby błędem. Gdyby hero wyjąć z przepływu,
   min-height:560px rozjechałby się z marginesem liczonym w vh. */
.page-body{position:relative;z-index:1}
.page-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,16,32,.0) 0%,rgba(0,16,32,.35) 3%,rgba(0,16,32,.70) 7%,
    rgba(0,16,32,.84) 11%,rgba(0,28,56,.86) 12%,
    rgba(0,22,50,.84) 20%,rgba(0,44,36,.82) 28%,rgba(0,55,44,.78) 35%,
    rgba(0,44,36,.82) 42%,rgba(0,12,24,.76) 50%,rgba(28,16,0,.83) 58%,
    rgba(20,10,0,.85) 65%,rgba(0,22,46,.87) 72%,rgba(0,30,52,.85) 80%,
    rgba(0,36,30,.83) 88%,rgba(0,8,16,.93) 95%,rgba(0,4,10,.97) 100%);
}

/* Kolumna tresci szersza niz 860 px ze style.css. Zmiana zyje TYLKO tutaj —
   style.css obsluguje regulamin i polityke prywatnosci, gdzie waska kolumna
   jest zaleta. Wymiar wziety ze wzorca obecnosc2026: .container max-width
   1080 px + padding 48 px, czyli 984 px tresci przy oknie 1280 px.
   clamp(20px,5vw,48px) osiaga 48 px dopiero od 960 px szerokosci okna,
   wiec ponizej zachowuje sie dokladnie jak dotad. */
.wrap{max-width:1080px;padding-left:clamp(20px,5vw,48px);padding-right:clamp(20px,5vw,48px)}

/* --- stałe tło całej strony ---------------------------------------------
   Osobny element position:fixed, nie background-attachment:fixed.
   Powód jest ten sam co na obecnosc2026, gdzie background-attachment nie
   występuje ani razu: na iOS Safari `fixed` przy tle jest wadliwe — tło
   skacze przy przewijaniu albo przestaje być nieruchome po schowaniu paska
   adresu. Element z position:fixed działa tam poprawnie.
   inset:0 zamiast height:100vh, bo 100vh na mobile odnosi się do wysokości
   bez paska adresu i zostawia szparę u dołu. */
.bg-layer{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url(/hero-contact-improvisation.jpg) center center/cover no-repeat;
  filter:brightness(.50) contrast(1.06) saturate(.92);
}
/* Treść ponad warstwą tła. style.css nie nadaje .wrap kontekstu, więc
   ustawiamy go tutaj — bez tego tło przykryłoby całą stronę. */
.wrap{position:relative;z-index:1}

/* --- panel: półprzezroczyste tło sekcji ---
   Krycie dobrane pomiarem kontrastu, nie na oko — patrz komentarz przy .hero. */
.panel{
  background:rgba(0,8,16,.62);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(193,154,107,.14);
  border-radius:var(--r);
  padding:clamp(20px,2.8vw,32px);
  box-shadow:var(--sh);
}
/* Bez rozmycia samo .62 przepuszcza za dużo szczegółu zdjęcia pod tekst —
   ten sam zabieg co w @supports na stronie wzorcowej. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .panel{background:rgba(0,8,16,.88)}
  .card{background:rgba(0,24,48,.9)}
  .packs{background:rgba(0,24,48,.9)}
}

.panel > :last-child{margin-bottom:0}
/* Odstęp między sekcjami niesie .sec, więc nagłówek u góry panelu go nie dubluje. */
.panel > .s-head:first-child{margin-top:0}
.sec{margin:0 0 34px}
.sec:last-of-type{margin-bottom:0}
.organizer,.about{margin-top:0}

/* --- nagłówek sekcji: nadproże, linijka, H2 z kursywą --- */
.s-head{margin:66px 0 22px}
.lbl{
  display:block;
  font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--teal-lbl);
  margin-bottom:13px;
}
.rule{
  width:48px;height:1px;
  background:linear-gradient(to right,var(--teal3),var(--gold));
  margin:0 0 26px;
}
h2.st{
  font-family:"Cormorant Garamond",serif;
  font-weight:300;
  font-size:clamp(30px,4.4vw,52px);
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--cream);
  margin:0 0 22px;
  padding:0;border:0;
}
h2.st em{font-style:italic;color:var(--gold2)}

/* --- hero: pełny ekran, bez panelu ---------------------------------------
   Żadnego pudełka i żadnej winiety: brak tła, krawędzi i zaokrągleń, tekst
   leży wprost na zdjęciu. Jedyne przyciemnienie w hero daje filtr brightness
   na .bg-layer, wspólny dla całej strony. Eliptyczna winieta na pseudoelemencie
   przed treścią hero została usunięta w całości — nie ma tu już żadnej
   dodatkowej warstwy koloru.
   100dvh z zapasem 100vh: na mobile 100vh liczy się bez paska adresu
   i zostawia szparę u dołu. */
.hero{
  position:relative;
  height:100vh;
  height:100dvh;
  min-height:560px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  margin:0;
}
.hero-in{
  position:relative;z-index:1;
  max-width:720px;width:100%;
  padding:0 clamp(22px,5vw,40px);
  text-align:center;
}
.hero-eye{
  display:block;
  font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-hero);
  margin:0 0 18px;
}
.hero h1{
  font-family:"Cormorant Garamond",serif;
  font-weight:300;
  font-size:clamp(34px,6.4vw,74px);
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--cream);
  margin:0 0 22px;
}
.hero h1 em{font-style:italic;color:var(--gold-hero)}
.rule-c{margin-left:auto;margin-right:auto}
.hero-sub{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;font-weight:300;
  font-size:clamp(19px,2.6vw,30px);
  line-height:1.3;
  color:var(--cream);
  margin:0 0 14px;
}
.hero-lead{
  font-size:clamp(15px,1.9vw,18px);
  line-height:1.7;
  color:rgba(250,249,246,.92);
  max-width:34em;margin:0 auto 30px;
}
.hero-meta{
  font-size:12px;letter-spacing:.1em;
  color:rgba(250,249,246,.92);
  margin:18px 0 0;
}
.hero-dates{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.hero-dates li{
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
  margin:0;padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.hero-dates li:last-child{border-bottom:0;padding-bottom:0}
.hd-d{
  flex:0 0 128px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold2);
}
.hd-t{font-family:"Cormorant Garamond",serif;font-size:20px;color:#fff}
.hero-cta{margin:0}

/* --- przyciski --- */
.btn{
  display:block;text-align:center;
  font-size:13.5px;letter-spacing:.03em;
  padding:9px 14px;
  color:var(--gold2);
  background:rgba(0,128,128,.10);
  border:1px solid rgba(193,154,107,.34);
  border-radius:10px;
  transition:background .3s,border-color .3s,color .3s;
}
.btn:hover,.btn:focus-visible{
  color:var(--black);
  background:var(--gold2);
  border-color:var(--gold2);
}
.btn-hero{
  display:inline-block;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 30px;
  color:#fff;
  background:rgba(0,128,128,.34);
  border-color:rgba(212,175,135,.6);
}
.btn-hero:hover,.btn-hero:focus-visible{color:var(--black);background:var(--gold2);border-color:var(--gold2)}

/* --- siatka kart --- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:1fr;
  gap:clamp(12px,1.8vw,18px);
  margin:26px 0 10px;
}
@media(max-width:720px){
  .cards{grid-template-columns:1fr;grid-auto-rows:auto}
}
.card{
  position:relative;
  display:flex;flex-direction:column;
  background:rgba(0,24,48,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(193,154,107,.16);
  border-radius:var(--r);
  padding:22px 20px 20px;
  overflow:hidden;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
/* Akcent u góry karty. Animowany jest pseudoelement wewnątrz karty,
   nigdy sama karta — transform na hoverowanym elemencie zabiera jego
   krawędź spod kursora i hover zaczyna oscylować. */
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--teal3),var(--gold));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .35s ease;
}
/* Hover nie rusza tła: przy dwóch wariantach koloru podmiana tła zmieniałaby
   kartę zieloną w granatową. Wzorzec robi dokładnie to samo — .el-card:hover
   zmienia wyłącznie obramowanie i cień. */
.card:hover{
  border-color:var(--teal3);
  box-shadow:0 8px 26px rgba(0,0,0,.42);
}
.card:hover::before{transform:scaleX(1)}

.c-date{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-lbl);margin-bottom:6px;
}
.c-title{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(20px,2.4vw,25px);font-weight:400;
  color:var(--gold2);line-height:1.2;
  margin:0 0 14px;
}
.c-fact{font-size:13.5px;line-height:1.55;color:rgba(250,249,246,.7);margin-bottom:6px}
.c-fact:last-of-type{margin-bottom:16px}

/* --- ceny --- */
.prices{list-style:none;margin:0 0 14px;padding:0}
.price{margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid rgba(193,154,107,.12)}
.price:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.p-name{display:block;font-size:12px;letter-spacing:.04em;color:rgba(250,249,246,.56);margin-bottom:3px}
.p-val{display:block;font-size:14.5px;color:var(--cream);margin-bottom:9px}

.c-note{font-size:12.5px;line-height:1.6;color:rgba(250,249,246,.55);margin-bottom:16px}

.c-more{margin-top:auto;border-top:1px solid rgba(193,154,107,.14);padding-top:12px}
.c-more summary{
  cursor:pointer;list-style:none;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-lbl);transition:color .3s;
}
.c-more summary::-webkit-details-marker{display:none}
.c-more summary::after{content:" +";color:var(--gold)}
.c-more[open] summary::after{content:" –"}
.c-more summary:hover{color:var(--gold2)}
.c-more p{font-size:13.5px;line-height:1.7;color:rgba(250,249,246,.72);margin:12px 0 0}

/* --- układ dwukolumnowy: tekst obok zdjęcia --- */
.split{display:grid;grid-template-columns:1fr 300px;gap:34px;align-items:center;margin:0 0 10px}
.split-rev .split-text{order:2}
.split-rev .split-fig{order:1}
.split-fig{margin:0}
.split-fig img{
  width:100%;height:auto;display:block;
  max-height:520px;object-fit:cover;
  border-radius:var(--r);
  box-shadow:var(--sh);
  filter:brightness(.94) contrast(1.04);
}
@media(max-width:720px){
  .split{grid-template-columns:1fr;gap:22px}
  .split-rev .split-text,.split-rev .split-fig{order:0}
  .split-fig img{max-height:360px}
}

.packs{
  background:rgba(0,8,16,.34);
  border:1px solid rgba(193,154,107,.16);
  border-radius:var(--r);
  padding:22px 24px;
  margin:16px 0 0;
}
.packs .price{padding-bottom:18px;margin-bottom:18px}
.packs .p-val{font-size:16px;margin-bottom:12px}
.packs .btn{display:inline-block;min-width:150px;margin:0 8px 8px 0}
@media(max-width:520px){.packs .btn{display:block;min-width:0;margin:0 0 8px}}

/* --- sekcja zapisów --- */
.steps{margin:0 0 24px 22px;color:rgba(250,249,246,.8)}
.steps li{margin-bottom:10px;padding-left:4px}

.pay-box{
  background:linear-gradient(135deg,rgba(0,80,80,.26) 0%,rgba(0,8,16,.5) 100%);
  border:1px solid rgba(0,128,128,.3);
  border-radius:var(--r);
  padding:20px 24px;margin:0 0 26px;
}
.pay-box p{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.pay-box p:last-child{margin-bottom:0}
.pay-k{flex:0 0 82px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-lbl)}
.pay-v{color:var(--cream);font-size:16px}

/* --- "Twoja wpłata": wybór wariantu przez :target, bez JS-u ---
   Kliknięcie przycisku ustawia hash, a :target odsłania jeden z trzynastu
   bloków. Podpowiedź znika wtedy dzięki :has(). Gdy :has() nie działa,
   podpowiedź zostaje obok wybranego wariantu — degradacja, nie awaria. */
.pay-pick{margin-top:18px;padding-top:16px;border-top:1px solid rgba(0,128,128,.28)}
.pick-hint{font-size:13.5px;color:rgba(250,249,246,.72);margin:0}
.pick{display:none}
.pick:target{display:block}
/* --- gdzie ląduje skok do kotwicy -----------------------------------------
   Kotwica prowadzi do bloku „Twoja wpłata", który siedzi GŁĘBOKO w sekcji —
   sam skok zostawiał nagłówek „Jak się zapisać" wysoko poza ekranem, a pasek
   .site-hdr (sticky) zasłaniał dodatkowo górę kadru.

   scroll-margin-top odsuwa punkt zaczepienia w górę o tyle, żeby to NAGŁÓWEK
   sekcji wypadł tuż pod paskiem. Potrzebna wartość to:
       D (odległość bloku .pick od nadproża sekcji) + wysokość paska + odstęp

   Wszystkie trzynaście bloków .pick ma to samo D, bo są rodzeństwem w .pay-pick
   i wszystkie poza :target mają display:none — widoczny zawsze zaczyna się
   w tym samym miejscu. Dlatego wystarczy jedna wartość na próg, nie trzynaście.

   Zmierzone D + wysokość paska (px):
       360–400 → 550,9    440 → 523,7    480 → 496,5    520 → 473,8
       560–660 → 446,6    720 → 450,0    800 → 458,8    900 → 442,6
      1024 → 457,6       1280+ → 464,9
   D zmienia się skokami, bo zależy od zawijania tekstu nad blokiem wpłaty.
   Wartości niżej to maksimum z przedziału plus ok. 20 px luzu.

   UWAGA przy edycji treści: każda zmiana w nagłówku sekcji, liście .steps
   albo w .pay-box przesuwa D i unieważnia te liczby. Sprawdzianem jest
   pozycja nadproża „Ostatni krok" po skoku — ma być poniżej paska. */
.pick{scroll-margin-top:480px}
@media(max-width:720px){.pick{scroll-margin-top:470px}}
@media(max-width:520px){.pick{scroll-margin-top:518px}}
@media(max-width:440px){.pick{scroll-margin-top:572px}}
.pay-pick:has(.pick:target) .pick-hint{display:none}
.pick-w{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-lbl);margin:0 0 6px;
}
.pick-a{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(28px,4vw,40px);font-weight:400;line-height:1.1;
  color:var(--cream);margin:0 0 10px;
}
.pick-a-sub{font-family:"Source Sans 3",sans-serif;font-size:14px;color:rgba(250,249,246,.72)}
.pick-t{margin:0}
.pick-t code{
  display:inline-block;font-size:14px;padding:6px 12px;
  background:rgba(0,128,128,.26);
  border:1px solid rgba(59,179,179,.4);
  color:var(--cream);
}

.pay-table{font-size:14px;margin:0 0 20px}
/* Ostatni wiersz tabeli nie jest kolejnym wariantem, tylko uwagą o sufiksie
   dla par — odróżniony kursywą, przygaszonym kolorem i grubszą kreską
   u góry, żeby nie czytało się go jako szóstej pozycji cennika. */
.pay-table .pay-hint td{
  border-top:1px solid rgba(193,154,107,.3);
  padding-top:12px;
  font-style:italic;
  color:rgba(250,249,246,.62);
}
.pay-table .pay-hint strong{font-style:normal;color:var(--gold2)}
.pay-table .pay-hint code{font-style:normal}
.pay-table code{font-size:12.5px;line-height:1.5;display:inline-block;padding:3px 7px;white-space:normal}

/* Poniżej 620px style.css rozkłada tabelę na bloki i chowa nagłówki.
   Etykiety wracają z atrybutu data-label, żeby wiersz dalej był czytelny. */
@media(max-width:620px){
  .pay-table td{display:flex;gap:10px;align-items:baseline;padding:5px 0}
  .pay-table td::before{
    content:attr(data-label);
    flex:0 0 92px;
    font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--teal-lbl);
  }
}

/* --- karta organizatorki: ciemne tło, jasny tekst --- */
.organizer{
  /* Tło i obramowanie niesie wariant .v-navy — karta stoi na 45,2 %
     wysokości .page-bg, gdzie gradient jest zielony rgb(0,31,31). */
  border-width:1px;border-style:solid;
  border-radius:var(--r);
  padding:30px 30px 26px;
  margin:66px 0 10px;
  box-shadow:var(--sh);
}
.org-h{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(24px,3vw,34px);font-weight:300;
  /* Po zmianie typografii w style.css h2 dostało line-height 1.15, czyli
     39.1 px przy 34 px — za ciasno jak na nagłówek karty. Własna wartość
     1.35 daje 45.9 px: luźniej niż 39.1, ale bez powrotu do 61.2. */
  line-height:1.35;
  color:var(--cream);
  margin:0 0 22px;padding:0;border:0;
}
/* Dwie kolumny równej szerokości: po lewej zdjęcie z danymi, po prawej logo.

   align-items:center jest sednem tej reguły, nie ozdobnikiem. Trzy elementy —
   zdjęcie Marty, blok tekstu i logo — mają leżeć na jednej wspólnej osi
   poziomej. Osiąga się to dwoma wyrównaniami naraz: `center` na siatce
   ustawia obie kolumny środkami na osi wiersza, a `center` na wewnętrznym
   flexie .org-left robi to samo ze zdjęciem i tekstem. Żaden z trzech
   elementów nie jest wyrównany do góry ani do dołu. */
.org-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px 32px;
  align-items:center;
}
.org-left{display:flex;gap:20px;align-items:center}
.org-right{display:flex;align-items:center;justify-content:center}
.org-photo{
  width:120px;height:120px;
  border-radius:50%;object-fit:cover;
  display:block;flex-shrink:0;
}
/* Logo w wersji złotej (marta-logo-gold.svg) — własne barwy #e59339 i #fff,
   więc żadnego filtra.

   width:86% zamiast 100% jest warunkiem wyśrodkowania: przy 100% logo
   wypełniało kolumnę i marginesy po obu stronach wynosiły 0 — było
   rozciągnięte, nie wyśrodkowane. min-width:320px zniknęło z tego samego
   powodu — w węższej kolumnie wymuszało szerokość większą niż kolumna.
   margin:auto na elemencie flex pochłania wolne miejsce w OBU osiach,
   więc daje wyśrodkowanie w poziomie i w pionie naraz. */
.org-logo{
  width:86%;max-width:240px;height:auto;
  display:block;
  margin:auto;
}
.org-meta{min-width:0}
.org-name{color:var(--cream);font-weight:600;font-size:17px;margin:0 0 8px}
.org-say{color:rgba(250,249,246,.78);margin:0 0 10px}
.org-tel{margin:0 0 6px}
.org-link{margin:0}
@media(max-width:720px){
  /* Jedna kolumna: logo schodzi pod dane i zostaje wyśrodkowane — robi to
     margin:auto na .org-logo, niezależnie od liczby kolumn. */
  .org-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .org-left{flex-direction:column}
}

/* --- siatka rytmu dnia: trzy terminy na dwie części dnia -----------------
   Cztery kolumny na trzy wiersze. Pierwsza kolumna opisuje część dnia,
   pozostałe trzy to terminy. Pasek pod każdym terminem pokazuje, że poranek
   i popołudnie są w każdym z nich — bez czytania tabeli.
   Paski nie niosą treści, której nie ma w tekście obok, więc dostały
   aria-hidden: dla czytnika ekranu byłyby pustymi elementami. */
.day-grid{
  display:grid;
  grid-template-columns:minmax(120px,1.1fr) repeat(3,1fr);
  gap:12px;
  align-items:center;
  margin:24px 0 0;
}
.dg-sum{
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  line-height:1.55;color:rgba(250,249,246,.66);
  margin:0;
}
.dg-sum strong{color:var(--cream);font-weight:600}
.dg-term{display:flex;flex-direction:column;gap:3px;min-width:0}
.dg-date{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-lbl);
}
.dg-title{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(15px,1.7vw,19px);line-height:1.2;
  color:var(--cream);
}
.dg-part{display:flex;flex-direction:column;gap:2px}
.dg-part-n{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.dg-part-h{font-size:13px;color:rgba(250,249,246,.8)}
.dg-part-note{font-size:11.5px;color:rgba(250,249,246,.6)}
.dg-am .dg-part-n{color:var(--am)}
.dg-pm .dg-part-n{color:var(--pm)}
.dg-bar{height:26px;border-radius:6px}
.dg-bar-am{background:var(--am)}
.dg-bar-pm{background:var(--pm)}

/* Poniżej 720 px cztery kolumny przestają się mieścić. Ten sam kod HTML
   układa się w trzy bloki, po jednym na termin, każdy z paskiem poranka
   i popołudnia pod spodem; opisy części dnia idą raz, jako legenda u góry.
   Robi to `order` — kolejność w kodzie zostaje wierszami, tak jak czyta się
   tabelę na szerokim ekranie. */
@media(max-width:720px){
  .day-grid{grid-template-columns:1fr;gap:8px}
  .day-grid > :nth-child(1){order:1}    /* 3 dni × 2 części */
  .day-grid > :nth-child(5){order:2}    /* Poranek 10:00 — 13:00 */
  .day-grid > :nth-child(9){order:3}    /* Popołudnie 14:00 — 17:00 */
  .day-grid > :nth-child(2){order:4}    /* 13.09 */
  .day-grid > :nth-child(6){order:5}
  .day-grid > :nth-child(10){order:6}
  .day-grid > :nth-child(3){order:7}    /* 18.10 */
  .day-grid > :nth-child(7){order:8}
  .day-grid > :nth-child(11){order:9}
  .day-grid > :nth-child(4){order:10}   /* 22.11 */
  .day-grid > :nth-child(8){order:11}
  .day-grid > :nth-child(12){order:12}
  .dg-term{margin-top:12px}
  .dg-bar{height:20px}
}

/* --- sekcje pełnoekranowe ---
   Wychodzą poza .wrap strukturalnie, jako rodzeństwo kontenera, a nie
   sztuczką na 100vw. Powód: 100vw liczy się razem z paskiem przewijania
   i wywołałoby poziome przewijanie o jego szerokość. */
.bleed{position:relative;z-index:1;margin:0 0 34px}
.bleed-in{max-width:1080px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(20px,5vw,48px)}

/* --- rytm dnia: tło ci-floorwork.jpg na pełną szerokość okna --- */
.rytm{
  background-image:linear-gradient(180deg,rgba(0,8,16,.58) 0%,rgba(0,8,16,.72) 100%),url(/ci-floorwork.jpg);
  background-size:cover;
  background-position:center 55%;
  border-top:1px solid rgba(193,154,107,.1);
  border-bottom:1px solid rgba(193,154,107,.1);
}
/* Karta zajmuje połowę kontenera i stoi przy PRAWEJ krawędzi, żeby lewa
   część tła została odsłonięta — to tam, na ci-floorwork.jpg, są ludzie
   w kontakcie i to oni mają być widoczni.
   Zdjęcie wewnątrz karty usunięte — tło sekcji niesie ten sam przekaz. */
.rytm-card{
  position:relative;
  background:rgba(0,8,16,.62);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(193,154,107,.14);
  border-radius:var(--r);
  padding:clamp(22px,3vw,34px);
  box-shadow:var(--sh);
  max-width:50%;
  margin-left:auto;
}
.rytm-text > :last-child{margin-bottom:0}
/* Poniżej 720 px połowa kontenera jest już nieczytelna — karta wraca
   na pełną szerokość i tło zostaje wyłącznie pod nią. */
@media(max-width:720px){
  .rytm-card{max-width:100%}
}

/* --- Dojo Aikikai: zdjęcie na pełną szerokość, napis na macie --- */
.venue{line-height:0}
.venue-img{
  width:100%;height:auto;display:block;
  max-height:72vh;object-fit:cover;object-position:center 42%;
  filter:brightness(.94) contrast(1.04);
}
/* Mata zajmuje dolne ~40% kadru, więc napis siada w lewym dolnym rogu.
   Tło jest konieczne, nie ozdobne: średnia maty pod podpisem to rgb(45,49,48)
   i daje kontrast 12.5, ale najjaśniejszy piksel w tym obszarze to rgb(158,126,83)
   — tam nadproże spadało do 1.49, nagłówek do 3.59, akapit do 3.23.
   Krycie .62 podnosi najgorszy przypadek powyżej progu. */
.venue-cap{
  position:absolute;left:0;bottom:0;
  max-width:min(560px,86%);
  margin:0 0 clamp(16px,4vw,44px) clamp(18px,5vw,56px);
  padding:clamp(16px,2.4vw,26px);
  background:rgba(0,8,16,.62);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(193,154,107,.14);
  border-radius:var(--r);
  line-height:1.7;
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .venue-cap{background:rgba(0,8,16,.88)}
}
.venue-cap .s-head,.venue-cap p{margin-bottom:0}
/* Nagłówek mniejszy niż w innych sekcjach — przy pełnym stopniu (52 px)
   blok podpisu miał 286 px i górą wchodził na ścianę zamiast siedzieć
   na macie. Zmierzone: początek podpisu przesunął się z 49% na 62% kadru. */
.venue-cap h2.st{font-size:clamp(23px,2.6vw,34px);margin-bottom:10px}
.venue-cap p{color:rgba(250,249,246,.9);font-size:15px}
.venue-cap .rule{margin-bottom:16px}
/* Przy wąskim oknie zdjęcie o proporcji 800×532 ma raptem 266 px wysokości
   i podpis nie mieści się na macie. Wymuszamy wyższy kadr i zjeżdżamy
   punktem kadrowania niżej, żeby mata pozostała w widoku. */
@media(max-width:720px){
  .venue-img{min-height:min(62vh,430px);object-position:center 62%}
}

/* --- o prowadzącym --- */
.about{margin:66px 0 10px}
.about-grid{display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:start}
.about-fig{margin:0}
.about-img{
  width:100%;height:auto;display:block;
  border-radius:var(--r);
  box-shadow:var(--sh);
  filter:brightness(.92) contrast(1.05);
}
.about-name{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(30px,3.6vw,46px);font-weight:300;line-height:1.05;
  color:var(--cream);
  margin:0 0 3px;padding:0;border:0;
}
.about-role{
  display:block;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal-lbl);
  margin-bottom:24px;
}
@media(max-width:720px){
  .about-grid{grid-template-columns:1fr;gap:26px}
}

/* --- dokumenty --- */
.docs{list-style:none;margin:0 0 17px;padding:0}
.docs li{
  padding:9px 0;margin:0;
  border-bottom:1px solid rgba(193,154,107,.12);
  color:rgba(250,249,246,.8);
}
.docs li:last-child{border-bottom:0}

/* --- stopka wyśrodkowana --- */
footer{
  text-align:center;
  background:rgba(0,4,12,.90);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(193,154,107,.12);
  border-radius:var(--r);
  padding:26px clamp(18px,3vw,30px);
  margin-top:40px;
}
footer .f-sym{margin-left:auto;margin-right:auto}
/* Symbol w stopce jest linkiem do strony głównej. style.css nadaje każdemu
   <a> kreskę pod spodem — pod obrazkiem wyglądałaby jak usterka. */
footer .f-sym a{display:block;border:0}

/* --- pojawianie się przy przewijaniu ---------------------------------------
   Odpowiednik data-roll ze wzorca, ale bez JS-u. Wzorzec trzymał elementy
   w stanie opacity:0 / blur(3px) / translateY(24px) / rotateX(5deg) / scale(.975)
   i interpolował je w funkcji pozycji w oknie. To samo robi animation-timeline:
   view() — animacja jest związana z przewijaniem, nie z czasem.

   Stan początkowy żyje WYŁĄCZNIE w klatkach kluczowych wewnątrz @supports.
   Poza tym blokiem nie ma nigdzie opacity:0 ani visibility:hidden na treści,
   więc przeglądarka bez obsługi animation-timeline pokazuje pełną stronę. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .panel,
    .card,
    .packs,
    .organizer,
    .rytm-card,
    .venue-cap,
    .about-grid {
      animation: roll-in linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 30%;
    }
    @keyframes roll-in {
      from {
        opacity: 0;
        filter: blur(3px);
        transform: perspective(1200px) translateY(24px) rotateX(5deg) scale(.975);
      }
      to {
        opacity: 1;
        filter: none;
        transform: perspective(1200px) translateY(0) rotateX(0deg) scale(1);
      }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel,
  .card,
  .packs,
  .organizer,
  .rytm-card,
  .venue-cap,
  .about-grid {
    animation: none;
  }
}

/* --- dwa warianty koloru karty --------------------------------------------
   Zasada zdjęta ze wzorca obecnosc2026 i potwierdzona tam pomiarem: karta
   stoi zawsze w kontrze do gradientu pod nią. We wzorcu .el-card (zieleń
   rgba(0,55,44,.42)) leży na 16,6 % wysokości .page-bg, gdzie gradient ma
   rgb(0,25,53) — granat. .glass (granat rgba(0,8,16,.5)) leży na 28,4 %,
   gdzie gradient ma rgb(0,45,36) — zieleń. Barwy, krycia i rozmycia poniżej
   są przepisane ze wzorca co do wartości, nie dobierane na nowo.

   Wariant każdej sekcji wynika z jej zmierzonej pozycji w .page-bg — tabela
   pomiarów jest w raporcie z tej zmiany, nie w kodzie, bo pozycje zmieniają
   się przy każdej zmianie treści.

   Trzy karty stoją POZA domeną gradientu i dlatego są granatowe niezależnie
   od jego barwy w tym miejscu: sekcja „Terminy" (nadproże na 1,54 % wysokości,
   gdzie α gradientu to dopiero ≈0,13), .rytm-card i .venue-cap (pod nimi leży
   zdjęcie, nie gradient). Zmierzone: zielona karta o kryciu .42 daje tam
   nadprożu 3,73 kontrastu, a podnoszenie krycia zieleni nie ratuje sprawy —
   jej asymptota przy kryciu 1.0 to 5,44. Granat .5 daje 5,23. */
.v-green{
  background:rgba(0,55,44,.42);
  border-color:rgba(0,128,128,.25);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.v-navy{
  background:rgba(0,8,16,.5);
  border-color:rgba(193,154,107,.17);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
/* Bez rozmycia oba warianty przepuszczają za dużo szczegółu zdjęcia —
   krycie idzie w górę, dokładnie jak w @supports na stronie wzorcowej. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .v-green{background:rgba(0,40,32,.88)}
  .v-navy{background:rgba(0,8,16,.88)}
}

/* --- gdzie ląduje skok do kotwic sekcyjnych --------------------------------
   To inny przypadek niż `.pick` wyżej. Tam wartość zależy od odległości bloku
   „Twoja wpłata" od nadproża sekcji, a ta odległość zmienia się razem
   z zawijaniem tekstu — stąd tam cztery progi dobierane pomiarem. Tutaj
   kotwica prowadzi wprost na początek sekcji, więc jedyne, co trzeba minąć,
   to wysokość paska `.site-hdr`.

   Pasek zmienia wysokość dokładnie raz, na progu 900 px: powyżej ma padding
   `clamp(10px,1.4vh,16px)`, poniżej stałe `10px`. Dlatego wystarczą dwie
   wartości, nie cztery.

   112px, a nie 104px, bo przy wysokim oknie `1.4vh` dobija do sufitu 16px
   i pasek rośnie — zmierzone 94,5 px przy 1280×1400 wobec 87,7 px przy
   1280×900. Przy węższych oknach padding jest stały, więc pasek nie
   przekracza 78,4 px i 88px daje tam ten sam zapas. */
#warsaw-series,#organizer{scroll-margin-top:112px}
@media(max-width:900px){#warsaw-series,#organizer{scroll-margin-top:88px}}