/* DAI TO SE - moduł o twórcach na stronie głównej (section.tw#o-nas), wariant 1c „Dwa pola” z Claude Design (6.10.2026).
   Wartości z .wayfinder/cd-export-o-nas/O nas - etap 1.dc.html: okno 1440 (scena 1440 x 836) i 390. Liczby w calc() to piksele z projektu, --u przelicza je na szerokość okna.
   Szerokości pośrednie są moje (eksport to etap 1): scena „komputer” od 1000 px skaluje się z szerokością, pismo ma dolne progi; niżej układ „telefon” w kolumnie do 600 px.
   Każdy stoi na kolorze słoika, który trzyma na zdjęciu (klasyczny i z miodem), nad własnym imieniem i przy własnym fakcie. Znaczniki w index.html, bez skryptu i bez ruchu.
   Luki „[do uzupełnienia]” i link „posłuchaj podkastu” z projektu są pominięte, dopóki właściciele nie podadzą nazw i adresu. */
.tw { background: linear-gradient(90deg, var(--smak-klasyczny) 50%, var(--smak-miod) 50%); color: var(--krem); scroll-margin-top: calc(var(--s-4) * -1); overflow-x: clip; }
.tw__w { max-width: 1440px; margin: 0 auto; container-type: inline-size; }
.tw__scena { --u: calc(100cqw / 1440); position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; min-height: calc(836 * var(--u)); padding: calc(578 * var(--u)) 0 calc(35 * var(--u)); }

/* góra sceny: zdanie wstępu i zdjęcie na szwie kolorów */
.tw__gora { display: contents; }
.tw__kicker { position: absolute; top: calc(40 * var(--u)); left: 0; right: 0; text-align: center; font-family: var(--f-mono); font-weight: 400; font-size: max(14px, calc(16 * var(--u))); line-height: 1.3; }
.tw__foto { position: absolute; left: calc(420 * var(--u)); top: calc(96 * var(--u)); width: calc(600 * var(--u)); aspect-ratio: 4 / 3; overflow: hidden; background: var(--piasek); }
.tw__foto img { position: absolute; left: -8.717%; top: 0; width: 118.467%; height: auto; max-width: none; } /* kadr 780 x 585 z pliku 924 x 694: twarze przed ostrością (decyzja z projektu) */
.tw__imiona { display: none; }

/* osoba: imię Drukiem, pod nim zdanie na szerokość imienia; fakt jako pochylona tabliczka przy zdjęciu */
.tw__os { grid-row: 1; display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
.tw__os--l { grid-column: 1; justify-self: end; margin-right: calc(65 * var(--u)); }
.tw__os--p { grid-column: 2; justify-self: start; margin-left: calc(65 * var(--u)); }
.tw__imie, .tw__i, .tw__imiona { font-family: var(--f-druk); font-weight: 500; line-height: .8; text-transform: uppercase; white-space: nowrap; }
.tw__imie, .tw__i { font-size: calc(104 * var(--u)); }
.tw__i { position: absolute; top: calc(578 * var(--u)); left: 50%; transform: translateX(-50%); }
.tw__tekst { width: 0; min-width: 100%; font-size: max(16px, calc(20 * var(--u))); line-height: 1.4; text-wrap: pretty; }
.tw__rzad { display: contents; }
.tw__fakt { position: absolute; z-index: 1; padding: calc(12 * var(--u)) calc(14 * var(--u)); background: var(--krem); color: var(--tusz); font-family: var(--f-mono); font-size: max(14px, calc(15 * var(--u))); line-height: 1.35; }
.tw__os--l .tw__fakt { left: calc(272 * var(--u)); top: calc(170 * var(--u)); width: calc(236 * var(--u)); transform: rotate(-4deg); }
.tw__os--p .tw__fakt { left: calc(1034 * var(--u)); top: calc(276 * var(--u)); width: calc(270 * var(--u)); transform: rotate(3deg); }
/* dwie gwiazdki Michelin: czerwony klaks z liczbą (ten sam kształt co gwiazdka z czasem w przepisach) */
.tw__gw { position: absolute; z-index: 1; left: calc(958 * var(--u)); top: calc(118 * var(--u)); display: grid; place-items: center; width: calc(150 * var(--u)); aspect-ratio: 150 / 143; transform: rotate(8deg); }
.tw__gw svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--czerwien); }
.tw__gw b { position: relative; padding-left: calc(3 * var(--u)); font-family: var(--f-druk); font-weight: 500; font-size: calc(52 * var(--u)); line-height: 1; }

/* układ „telefon” (projekt 390 px): zdjęcie na całą szerokość, pod nim imiona na dwóch kolorach, potem pas każdego z nich */
@media (max-width: 999px) {
  .tw { background: none; }
  .tw__scena { --u: calc(min(100cqw, 600px) / 390); display: block; min-height: 0; padding: 0; }
  .tw__gora { display: flex; flex-direction: column; align-items: center; padding: 20px 0 29px; background: linear-gradient(90deg, var(--smak-klasyczny) 50%, var(--smak-miod) 50%); }
  .tw__kicker { position: static; font-size: 14px; }
  .tw__foto { position: relative; left: auto; top: auto; width: min(100%, 600px); margin-top: 14px; aspect-ratio: 390 / 293; }
  .tw__foto img { left: -21.564%; top: -4.164%; width: 144.385%; } /* kadr 640 x 480 */
  .tw__imiona { display: grid; grid-template-columns: 1fr calc(40 * var(--u)) 1fr; width: 100%; margin-top: 24px; font-size: calc(28 * var(--u)); text-align: center; }
  .tw__imiona span:first-child { text-align: right; }
  .tw__imiona span:last-child { text-align: left; }
  .tw__i { display: none; }
  .tw__os { gap: 14px; margin: 0; }
  .tw__os--l { padding: 4px max(20px, calc((100% - 600px) / 2)) 32px; background: var(--smak-klasyczny); }
  .tw__os--p { padding: 28px max(20px, calc((100% - 600px) / 2)) 40px; background: var(--smak-miod); }
  .tw__imie { font-family: var(--f-mono); font-weight: 400; font-size: 14px; line-height: 1.2; text-transform: lowercase; }
  .tw__tekst { width: auto; min-width: 0; font-size: 18px; }
  .tw__rzad { display: flex; align-items: center; gap: 12px; }
  .tw__fakt { position: static; padding: 10px 12px; font-size: 14px; }
  .tw__os--l .tw__fakt { align-self: flex-start; width: auto; transform: rotate(-2deg); }
  .tw__os--p .tw__fakt { width: auto; min-width: 0; transform: rotate(2deg); }
  .tw__gw { position: relative; left: auto; top: auto; flex: none; width: 84px; }
  .tw__gw b { padding-left: 2px; font-size: 30px; }
}