/* index.css — style tylko dla strony głównej. Ładowany po style.css.
   style.css zostaje nietknięty, bo obsługuje regulamin i politykę
   prywatności, gdzie tła fotograficznego być nie może. */

/* --- stałe tło całej strony ---------------------------------------------
   Mechanizm przeniesiony z warsztaty.css bez zmian konstrukcyjnych:
   osobny element position:fixed, nie background-attachment:fixed. Powód jest
   ten sam co tam — na iOS Safari `fixed` przy tle jest wadliwe: tło skacze
   przy przewijaniu albo przestaje być nieruchome po schowaniu paska adresu.
   inset:0 zamiast height:100vh, bo 100vh na mobile odnosi się do wysokości
   bez paska adresu i zostawia szparę u dołu.

   brightness(.40) nie jest wartością „na oko". Hero nie ma nad sobą gradientu
   .page-bg — leży na samym zdjęciu — a podtytuł wypada nad jasnym fragmentem
   kadru. Przy .52 tło pod nim miało rgb(132,132,127) i podtytuł dawał 3,29;
   tam nawet czysta biel osiąga tylko 3,57, więc żaden kolor tekstu progu nie
   domknie i jedynym lewarem jest jasność zdjęcia. Zmierzone: .44 → 4,35,
   .43 → 4,54 (granicznie), .40 → 5,08. Wybrane .40 daje realny zapas. */
.bg-layer{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url(/home-jam.jpg) center center/cover no-repeat;
  filter:brightness(.40) contrast(1.05) saturate(.9);
}

/* --- 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Ą, podczas gdy zdjęcie stoi.

   Wartości dobrane pod TEN kadr, nie przepisane z /warsztaty. Dwie różnice
   wobec tamtej strony wynikają wprost ze zdjęcia i z geometrii:

   1. Dół kadru to jasna podłoga. Ponieważ .bg-layer jest `fixed`, dolna
      część OKNA pokazuje jasną podłogę przy każdym przewinięciu — nie tylko
      wtedy, gdy jesteśmy na końcu dokumentu. Strona jest krótka, więc każdy
      akapit potrafi w czasie przewijania przejść przez ten jasny pas.
      Dlatego gradient jest tu mocny na całej długości, nie tylko u dołu.

   2. Ostatnie stopnie idą wyżej niż na /warsztaty (tam .93 → .97).
      Pod stopką i dolnymi sekcjami krycie sięga .99, żeby jasna podłoga
      nie podbiła tła pod tekstem o najniższym kryciu w całym arkuszu. */
.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,14,28,.45) 0%,
    rgba(0,16,32,.70) 12%,
    rgba(0,18,36,.84) 32%,
    rgba(0,16,32,.89) 55%,
    rgba(0,12,26,.93) 76%,
    rgba(0,8,18,.96) 90%,
    rgba(0,4,10,.98) 100%);
}
/* Treść ponad gradientem. style.css nie nadaje .wrap kontekstu nakładania,
   więc ustawiamy go tutaj — bez tego gradient przykryłby tekst. */
.wrap{position:relative;z-index:1}

/* --- hero na pełny ekran -------------------------------------------------
   Mechanizm przepisany z warsztaty.css bez zmian: wysokość 100vh z zapasem,
   wyśrodkowanie w pionie flexem, minimum 560 px.

   Kolejność `height:100vh` a potem `height:100dvh` jest celowa i nie jest
   duplikatem — pierwsza linia to zapas dla przeglądarek bez obsługi dvh,
   druga ją nadpisuje tam, gdzie dvh działa. Na mobile 100vh liczy się bez
   paska adresu i zostawia szparę u dołu, dlatego dvh jest tu właściwą
   jednostką, a vh tylko awaryjną.

   Hero stoi POZA .page-body, więc gradient .page-bg zaczyna się dopiero pod
   nim — nad hero jest samo zdjęcie z .bg-layer, tak jak na /warsztaty.
   Żadna media query go nie dotyka: flex i dvh załatwiają każdą szerokość. */
.hero{
  position:relative;
  z-index:1;
  height:100vh;
  height:100dvh;
  min-height:560px;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
  margin:0;
}
/* Szerokość i padding jak w .wrap ze style.css (860 px / clamp 20–40 px),
   żeby logo miało w hero dokładnie tyle, co kolumna treści niżej. */
.hero-in{
  position:relative;z-index:1;
  max-width:860px;width:100%;
  padding:0 clamp(20px,5vw,40px);
  text-align:center;
  margin-bottom:clamp(96px,15vh,160px);
}
.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;
}
.hero-lead strong{color:var(--cream)}

/* --- H1 dostępny, niewidoczny -------------------------------------------
   H1 zniknął z widoku, ale NIE z dokumentu: to jedyny nagłówek pierwszego
   poziomu na stronie, a alt logo go nie zastąpi. Ukrycie przez clip-path
   na pudełku 1×1 px — element zostaje renderowany i czytany przez czytniki
   ekranu oraz roboty. Ukrycie przez schowanie wyświetlania albo widoczności
   wyrzuciłoby go z drzewa dostępności, więc oba te sposoby są tu wykluczone. */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* --- logo na pełną szerokość kontenera treści ----------------------------
   Na pozostałych stronach .brand jest małym kafelkiem w pasku: płytka z tłem,
   obramowaniem i paddingiem, a w środku symbol i sygnet obok siebie. Tutaj
   płytka znika w całości, bo każdy jej piksel odbierałby logo szerokość —
   przy padding:0 i width:100% sygnet ma dokładnie tyle, co kolumna treści.

   Proporcje niesie sam plik (logo.svg ma viewBox 800 × 300, atrybuty width
   i height zostają w HTML), więc height:auto wystarcza i nic się nie
   deformuje. Poniżej 720 px reguła jest ta sama — logo skaluje się razem
   z kontenerem, bo 100% odnosi się do jego szerokości. */
.brand{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.6vw,14px);
  width:100%;
  margin:0 0 clamp(28px,4vw,44px);
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
}
.brand-word{width:100%;max-width:none;height:auto;display:block}

/* --- karta pod wordmarkiem ------------------------------------------------
   Konstrukcyjnie to samo co `.note` w style.css: półprzezroczyste ciemne
   tło, cienka ramka, ten sam `--r` na rogach. Dzięki temu hero mówi tym
   samym językiem wizualnym co kolumna treści niżej — a na pozostałych
   stronach `.brand` i tak jest kartą (tło, ramka, `--r`, cień); index.css
   rozbiera ją tylko po to, żeby logo dostało pełną szerokość kolumny.
   Tutaj karta wraca, bez paddingu i bez cienia.

   Ostra krawędź jest tu w porządku i nie jest niedopatrzeniem. Winieta
   usunięta z /warsztaty 26.08 obejmowała niemal cały kadr, więc jej brzeg
   przecinał zdjęcie w przypadkowym miejscu i czytał się jak szew. Ta karta
   jest wielkości napisu i ma rozmiar rzeczy, nie tła — prostokąt o takich
   proporcjach czyta się jako element interfejsu, tak samo jak `.note`.

   Kontrast niesie wyłącznie przyciemnienie tła. Rozmycia nie ma i nigdy
   nie było ono do kontrastu potrzebne — trzy rundy dostrajania filtra
   rozmywającego tło dały gorszy efekt wizualny niż zwykły prostokąt.

   Marginesy karty są liczone od samych liter, nie od pustego pola
   w pliku: logo-tight.svg ma viewBox przycięty do rysunku, więc pudełko
   obrazka przylega do napisu i cały luz musi dać `inset` — stąd wartości
   większe niż wtedy, gdy część marginesu wnosił jeszcze sam plik.
   W poziomym clampie przy szerokich oknach wiąże dolna granica, a przy
   wąskich górna, więc margines na mobile reguluje się współczynnikiem
   `vw`, nie granicą — podniesienie samej granicy nic tam nie daje,
   dopóki wartość z `vw` jest od niej bardziej ujemna. */
.brand::before{
  content:"";
  position:absolute;
  inset:clamp(-30px,-3.4vw,-18px) clamp(-34px,-3vw,-12px);
  z-index:-1;
  border-radius:var(--r);
  background:rgba(0,8,18,.5);
  border:1px solid rgba(250,249,246,.10);
}

/* --- wskazówka przewijania ----------------------------------------------
   Cienka pionowa kreska u dołu hero. Element dekoracyjny, aria-hidden,
   nie link — cel kliknięcia szerokości jednego piksela byłby gorszy niż
   jego brak. Pulsowanie wyłączone przy prefers-reduced-motion. */
.hero-scroll{
  position:absolute;
  left:50%;
  bottom:clamp(24px,4.5vh,44px);
  transform:translateX(-50%);
  width:1px;
  height:clamp(40px,7vh,64px);
  background:linear-gradient(to bottom,
    rgba(250,249,246,0) 0%,
    rgba(250,249,246,.85) 55%,
    rgba(250,249,246,0) 100%);
  animation:heroPulse 3.6s ease-in-out infinite;
}
@keyframes heroPulse{
  0%,100%{opacity:.28}
  50%{opacity:.9}
}
@media (prefers-reduced-motion:reduce){
  .hero-scroll{animation:none;opacity:.6}
}

/* --- symbol otwierający sekcję ------------------------------------------
   Symbol zszedł z hero i otwiera „Aktualne zajęcia" — pierwsza rzecz
   widoczna po przewinięciu. Kafelek pod nim jest w pliku symbol.svg,
   nie w CSS; ten sam plik stoi już w stopce. */
.sec-sym{margin:0 0 clamp(6px,1.4vw,12px)}
.sec-sym img{width:clamp(44px,6vw,60px);height:auto;display:block;margin:0 auto}