/* Sekcja o autorze (.about), ładowana po css/home.css; zmienia tylko tę sekcję.
   Wybrana przez Michała 18.10 spośród sześciu wersji („na zieloną wersję się przyjemniej patrzy […] niech zostanie zielona”):
   wersja Codexa (ciemna zieleń, jasne litery, duże imię) z postacią po lewej i krawędzią pasa przy ramionach.
   Wersje i oceny: sedziowie/o-mnie/BRIEF.md, werdykt.md, final2/O-MNIE-*.md; kopie plików wersji: C:\tmp\ap-glowna\kopie\o-mnie-wersje-2026-10-18.

   Pas #283E32 (OKLCH 0,341 / 0,035 / 160°): zieleń z rodziny swetra na zdjęciu, dużo ciemniejsza; krem #FDF8F5 na niej 10,9:1.
   Ciemne spodnie na pasie mają tylko 1,7:1 (znane, zaakceptowane przy wyborze).

   Sylwetka (kanał alfa zdjęcia 632 × 926): wysokość postaci = 1,465 szerokości. Krawędź pasa biegnie 0,35 szerokości postaci pod czubkiem
   głowy, czyli przez ramiona: nad pasem głowa z górą ramion (przy 0,31 ramię leżało na krawędzi, przy 72 px z wersji Codexa krawędź szła przez oczy).
   Górna krawędź pasa jest liczona od dołu sekcji (100% − 1,115 × szerokość postaci), ale nie niżej niż --up od góry sekcji: gdy kolumna
   tekstu jest wyższa od postaci (duża czcionka przeglądarki), pas zaczyna się przy górze tekstu, bo jasne litery muszą stać na pasie.
   Skrypt ruchu (js/home.js) czyta top pseudoelementu .about::before i o tyle unosi postać: głowa wychodzi ponad pas przy przewijaniu. */

/* szerokość postaci 440 px przy czcionce 16 px (27,5 rem), rośnie z czcionką przeglądarki do 564 px */
.about { --w: min(27.5rem, 38vw, 564px); --kolnierz: .35; --up: calc(var(--w) * var(--kolnierz)); --pas: #283E32;
  margin-top: clamp(20px, 1.6vw, 28px); color: var(--bg); }
.about::before { top: min(calc(100% - var(--w) * (1.465 - var(--kolnierz))), var(--up)); background: var(--pas); }
/* bez pola za postacią: tłem jest sam pas */
.about-photo { --w: min(27.5rem, 38vw, 564px); }
.about-photo::before { content: none; }
.about ::selection { background: var(--bg); color: var(--pas); }

/* pismo: imię 64 px, reszta nagłówka 36 px, akapity 18 px z wierszem 1,6 (jasne litery na ciemnym potrzebują oddechu);
   podpis pod tekstem usunięty 18.10 na słowo Michała („wyjeb jeszcze slopa”) */
.about-text { padding-block: clamp(32px, 3vw, 48px); }
.about h2 { color: var(--bg); font-size: 2.25rem; line-height: 1.16; }
.about h2 span:first-child { font-size: 4rem; line-height: 1.06; margin-bottom: 20px; }
.about-text p { font-size: 1.125rem; line-height: 1.6; margin-top: 16px; }
.about-text h2 + p { margin-top: 28px; }

/* dwie kolumny od 1024 px: postać po lewej na linii kafla „Gry”, tekst 36 rem dosunięty do prawej krawędzi kolumny (linia kafla „Sklep”);
   odstęp robot → tekst 136 px od 1200 px (Michał 18.10: „odsunąć Michała od napisu”), imię i podtytuł po jednym wierszu, akapity po dwa */
@media (min-width: 64em) {
  .about-in { grid-template-columns: var(--w) minmax(0, 1fr); column-gap: 64px; }
  .about-photo { grid-column: 1; grid-row: 1; justify-content: flex-start; }
  .about-text { grid-column: 2; grid-row: 1; max-width: 36rem; justify-self: end; }
}
/* 1024–1199 px: kolumna tekstu węższa, więc mniejszy nagłówek, żeby tekst zmieścił się na pasie pod linią ramion */
@media (min-width: 64em) and (max-width: 74.99em) {
  .about h2 { font-size: 1.75rem; }
  .about h2 span:first-child { font-size: 3rem; }
}

/* jedna kolumna (do 1023 px przy czcionce 16 px; próg w em): tekst, pod nim postać, pas pod całą sekcją, bo jasne litery na kremie
   byłyby niewidoczne. Pas maluje .about-in::before na całą szerokość okna; .about::before jest schowany z top 0, więc skrypt ruchu
   unosi postać o swoje minimum (48 px) */
@media (max-width: 63.99em) {
  .about, .about-photo { --w: min(27.5rem, 72vw); }
  .about { margin-top: 0; }
  .about::before { display: none; top: 0; }
  .about-in { position: relative; grid-template-columns: minmax(0, 1fr); }
  .about-in::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1);
    background: var(--pas); }
  .about-text { margin-top: 0; padding-top: 40px; padding-bottom: 40px; }
  .about-photo { padding-top: 0; }
  .about h2 { font-size: 1.625rem; }
  .about h2 span:first-child { font-size: 2.5rem; }
  .about-text p { font-size: 1.0625rem; }
  .about-text h2 + p { margin-top: 24px; }
}
@media (forced-colors: active) {
  .about-in::before { border: 1px solid CanvasText; }
}
/* druk: tło pasa się nie drukuje, więc ciemne litery */
@media print {
  .about, .about h2 { color: #2D2A26; }
}