/* Z MOJEGO WARSZTATU + KANONY — pierwsza sekcja pod wodą ścieżki Updates (#dostep; 06.10.2026 wieczorem). Zastąpiła „Wybrane za ciebie” z wąską taflą
   i trzema krokami (kopia w _kopie/2026-10-06-przed-warsztatem/), a ta wcześniej „Kurs od środka” z murem tabliczek (_kopie/2026-10-06-przed-finalem/).
   Kuba 06.10: nowa treść od niego słowo w słowo (nagłówek „Z mojego warsztatu”, akapit, „Kanon komponuje prompty za Ciebie.” z opisem), a o układzie:
   „troszeczkę mi się nie podoba… nie jestem pewien, czy chciałbym to przedstawiać w ten sposób”. Wybrał w narzędziu
   https://warsztat.hvmbak-landing.pages.dev/ (~/Desktop/strony/HVMBAK-DOSTEP, pliki warsztat*) wariant 2 „Szeroka tafla”: „zrobimy to w ten sposób”.
   Wszystko w osi strony, jak przejście „ale” → szkło z cytatem w sekcji 2: etykieta, nagłówek, akapit, nitka → słowo „na przykład” → nitka,
   szeroka tafla szkła w dwóch RÓWNYCH szpaltach: z lewej etykieta i nazwa, z prawej zdanie główne i opis. Włosowa kreska między szpaltami leży
   w osi strony, dokładnie pod nitką łącznika. Obie nitki są RÓWNE (--L), dolna dochodzi do krawędzi szkła.
   Zdania zamykającego sekcję („to jedyny kurs AI…”) NIE MA: Kuba uznał je za „za płytkie”, przejście do oferty będzie robione inaczej.
   Zmiany wyglądu najpierw w narzędziu, potem tutaj (reguły wybranego wariantu z warsztat-sekcje.css, bez przedrostka [data-u]).

   Zmierzone w em (HVMBAK Pro): „Z MOJEGO WARSZTATU” 20,21 · „WARSZTATU” pochyłe 10,80 · „KANONY” 7,65 (z ™ ok. 8,1).

   ODDZIELENIE OD WODY: sekcja nieprzezroczysta (tło --papier, position:relative, z-index nad płótnem #liquid), płótno obcięte clip-path
   do górnej krawędzi sekcji (--lq-dol liczy src/dostep.js), a granicę rysuje krawędź szkła (.krawedz z index.html). */

.kn-wyb{position:relative;z-index:2;background:var(--papier);color:var(--black);
  --f-etyk:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  padding:calc(var(--vh,1svh)*14) 5vw calc(var(--vh,1svh)*14)}
/* winieta tła: ciemniejsze rogi, subtelnie, nic więcej */
.kn-wyb::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 92% at 50% 48%,rgba(13,13,13,0) 56%,rgba(13,13,13,.06) 100%)}
.kn-wyb .krawedz .blysk{animation-delay:-12s}        /* trzy krawędzie szkła na stronie nie błyskają równo */
.kn-in{position:relative;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}

.kn-etyk{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 22px;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;line-height:1;color:rgba(13,13,13,.62)}
.kn-etyk i{flex:none;width:9px;height:2.5px;background:var(--bordo)}
.kn-h{margin:0;font-family:var(--display);font-weight:900;font-kerning:normal;text-transform:uppercase;line-height:1.06;letter-spacing:0;font-size:clamp(30px,3.7vw,52px)}
.kn-h span{white-space:nowrap}
.kn-h .it{font-style:italic;color:var(--bordo)}
.kn-p{margin:clamp(20px,2vw,28px) auto 0;max-width:33em;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;font-size:clamp(17px,1.5vw,21px);
  line-height:1.45;color:rgba(13,13,13,.82);text-wrap:pretty}
.kn-p+.kn-p{margin-top:.75em}

/* łącznik: to samo słowo-spójnik bordo co „więc / ale / do tego” na ścieżce i „ale” przed cytatem; nad nim i pod nim nitka tej samej długości */
.kn-most{--L:clamp(34px,3.6vw,52px);display:flex;flex-direction:column;align-items:center;width:100%}
.kn-lacz{position:relative;margin:calc(22px + var(--L) + 10px) 0 0;padding:0 0 calc(10px + var(--L));font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;line-height:1;color:var(--bordo);white-space:nowrap}
.kn-lacz::before,.kn-lacz::after{content:'';position:absolute;left:50%;width:1px;height:var(--L);background:var(--bordo)}
.kn-lacz::before{top:calc(-10px - var(--L))}
.kn-lacz::after{top:22px}                             /* 12 px słowa + 10 px oddechu; koniec nitki = górna krawędź tafli */

/* tafla z kanonem (.szklo i .pdz-h z index.html): dwie równe szpalty, kreska między nimi w osi strony (pod nitką łącznika).
   Z lewej etykieta i nazwa (w pionie na środku), z prawej zdanie główne i opis. */
.kn-kan{width:min(1040px,100%);text-align:left}
.kn-kan .tresc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.kn-kol-n{display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:clamp(30px,3.2vw,46px) clamp(22px,2.6vw,38px) clamp(32px,3.4vw,48px) clamp(28px,3.2vw,46px)}
.kn-kol-o{display:flex;flex-direction:column;justify-content:center;border-left:1px solid rgba(13,13,13,.16);
  padding:clamp(30px,3.2vw,46px) clamp(28px,3.2vw,46px) clamp(32px,3.4vw,48px) clamp(26px,3vw,42px)}
.kn-kh{font-size:clamp(28px,3.35vw,48px);line-height:1}
.kn-kh .tm{white-space:nowrap}
.kn-kh .tm::after{content:'TM';display:inline-block;position:relative;font-size:.3em;line-height:1;top:-1.54em;margin-left:.06em}     /* HVMBAK Pro nie ma znaku ™: składa się z jego liter */
.kn-ke{font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1;
  color:rgba(13,13,13,.62);white-space:nowrap}
.kn-kl{margin:0;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:600;font-size:clamp(19px,1.74vw,25px);line-height:1.22;
  color:var(--black);text-wrap:balance}
.kn-kt{margin:clamp(10px,1.1vw,14px) 0 0;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;font-size:clamp(16px,1.2vw,17.5px);
  line-height:1.5;color:rgba(13,13,13,.84);text-wrap:pretty}

/* płótno wody kończy się na górnej krawędzi tej sekcji (zmienną liczy dostep.js; 0 = nic nie obcina) */
#liquid{clip-path:inset(0 0 var(--lq-dol,0px) 0)}

@media(max-width:820px){
  .kn-wyb{padding:calc(var(--vh,1svh)*10) 18px calc(var(--vh,1svh)*11)}
  .kn-etyk{margin-bottom:16px;font-size:9.5px;letter-spacing:.06em}
  .kn-h{font-size:calc((100vw - 36px)/11.7)}                    /* dwie linie; „WARSZTATU” (10,80 em) zajmuje 92 % szerokości, z zapasem po bokach */
  .kn-h span{display:block}
  .kn-p{margin-top:18px;font-size:16.5px;line-height:1.46}
  .kn-p+.kn-p{margin-top:.7em}
  .kn-most{--L:30px}
  .kn-lacz{margin-top:calc(20px + var(--L) + 10px);font-size:11px;letter-spacing:.12em;text-indent:.12em}
  .kn-lacz::after{top:21px}
  /* tafla: szpalty jedna pod drugą, bez kreski; nazwa na całą szerokość tafli */
  .kn-kan{width:100%}
  .kn-kan .tresc{display:block;padding:20px 18px 22px}
  .kn-kol-n{gap:12px;padding:0}
  .kn-kol-o{display:block;border-left:0;padding:0}
  .kn-kh{font-size:calc((100vw - 72px)/8.3)}
  .kn-ke{font-size:9.5px;letter-spacing:.06em}
  .kn-kl{margin-top:18px;font-size:20px;line-height:1.24}
  .kn-kt{margin-top:10px;font-size:15px;line-height:1.44}
}