/* ============================================================================
site-6b.css — components & layout for the 6b direction.
Consumes tokens-6b.css only. Load order: fonts-6b → tokens-6b → site-6b.
============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Plynny scroll ZDJETY 20.08: obserwator reveal przerywal kazda plynna animacje i natywny
skok do #kotwicy nie dochodzil (m.in. dolacz #telefony - poprawka k). Skok natychmiastowy
dziala niezawodnie, plynny i tak byl martwy. Pomiar: kontakt.html / dolacz-do-nas.html. */
body {
margin: 0;
background: var(--paper);
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* `height: auto` musi tu stać: bez niego atrybut `height` z HTML zostaje wysokością
renderu, a `width: 100%` ściska samą szerokość — obraz wychodzi zdeformowany.
Zgłoszenie klubu z 01.09.2026 („zdjeica na kompueterze sal sa zniekszatłcone”):
zmierzone 12 z 12 zdjęć sal, odchylenie proporcji od −51,5% do −63,6%. Kadrowanie
świadome (`object-fit`) jest ustawiane niżej, per komponent, i tej reguły nie dotyczy. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: var(--focus); outline-offset: 2px; }
::selection { background: var(--gold); color: var(--ink); }
/* ---- Layout primitives ------------------------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.band { position: relative; }
.band--red { background: var(--red); color: var(--on-red); }
.band--ink { background: var(--ink); color: var(--on-ink); }
.band--paper { background: var(--paper); color: var(--text-body); }
.band__pad { padding-block: var(--band-y); }
/* Pasmo, które kończy się komponentem dojeżdżającym do krawędzi (pas grup), a po którym
idzie pasmo w tuszu. Dolny odstęp zostawiał jasny prążek między dwiema ciemnymi masami
— 52 px na 1440 i 28 px na 390 — i czytał się jak niedokończona sekcja. */
.band--flush-b { padding-bottom: 0; }
/* ---- Shared type atoms ------------------------------------------------- */
.eyebrow {
font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-eyebrow);
letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.eyebrow--red { color: var(--red); }
.display {
font-family: var(--font-display); font-style: italic; font-weight: 800;
text-transform: uppercase; line-height: .98; letter-spacing: .002em;
text-wrap: balance;
}
/* MEGA tier — an architectural type-moment (gauntlet R1). Spend on a FEW anchors
only; the escalation reads as intent against the quiet label tier around it. */
.display--mega { font-size: var(--fs-mega); line-height: .9; letter-spacing: -.005em; }
.gold-dot { color: var(--gold); }
.lead { font-family: var(--font-body); line-height: 1.7; text-wrap: pretty; }
/* section header with rule (Grupy / Gdzie trenujemy) */
.sec-head {
display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
border-bottom: 2.5px solid var(--line-strong); padding-bottom: 14px; margin-bottom: 32px;
}
.sec-head__note {
margin-left: auto; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-eyebrow);
letter-spacing: .12em; text-transform: uppercase; color: var(--red);
}
.sec-head__lead { max-width: 62ch; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.8; color: var(--text-body); margin: -14px 0 2px; text-wrap: pretty; }
.sec-head--ink { border-color: rgba(255,255,255,.85); }
/* R12 — „type as punctuation": tytuł sekcji na tier --fs-section (chapter break), nie label. */
.sec-head__title { font-size: var(--fs-section); }
/* ---- Buttons ----------------------------------------------------------- */
.btn {
--bg: var(--ink); --fg: #fff;
display: inline-flex; align-items: center; justify-content: center; gap: .5em;
font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-15);
text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
padding: 15px 26px; border: 0; background: var(--bg); color: var(--fg);
cursor: pointer; transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn:active { transform: translateY(0); }
.btn--white { background: #fff; color: var(--red); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--red { background: var(--red); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border: 2px solid #fff; padding: 13px 24px; }
.btn--ghost:hover { background: #fff; color: var(--ink); }
.btn--sm { padding: 12px 18px; font-size: var(--fs-body-sm); }
.btn--lg { padding: 17px 30px; font-size: var(--fs-btn-lg); }
/* stan „zapisy wkrótce” — nieklikalny, przygaszony (obozy bez oferty, poprawki klubu 19.08) */
.btn.is-soon { opacity: .68; cursor: default; pointer-events: none; }
/* złoty „chip" CTA w nawigacji. Skos zdjęty na prośbę klubu 22.08.2026: „wszystkie napisy
tego typu na stronie są w prostokątach […] bo teraz jest rombem". Reszta chipa bez zmian. */
.chip-cta {
display: inline-block; background: var(--gold);
padding: 13px 20px; box-shadow: var(--sh-cta); text-decoration: none; border: 0; cursor: pointer;
transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.chip-cta > span {
display: block;
font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-body);
text-transform: uppercase; letter-spacing: .05em; color: var(--ink);
}
.chip-cta:hover { filter: brightness(1.05); transform: translateY(-2px); }
/* text link with underline accent */
.link-arrow {
font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-eyebrow);
letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
border-bottom: 2px solid currentColor; padding-bottom: 3px; white-space: nowrap;
transition: opacity var(--dur-fast) var(--ease);
}
.link-arrow:hover { opacity: .72; }
/* ============================================================================
HEADER / NAV (overlaid on hero; solidifies on scroll)
============================================================================ */
.site-header {
position: absolute; top: 0; right: 0; left: 0; z-index: 50;
transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), top var(--dur) var(--ease);
}
/* Gdy pasek ogłoszeń jest obecny, nieprzyklejony nagłówek schodzi pod niego (nadal overlay na hero). */
body:has(.promo) .site-header:not(.is-stuck) { top: var(--promo-h); }
.site-header.is-stuck {
position: fixed; top: 0; background: var(--ink); box-shadow: var(--sh-header);
}
/* ============================================================================
PASEK OGŁOSZEŃ (wąski, zamykany; w normalnym flow nad nagłówkiem, chowa się przy scrollu)
============================================================================ */
.promo { position: relative; z-index: 40; background: var(--ink); min-height: var(--promo-h); }
.promo__in { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--promo-h); padding-block: 8px; padding-right: 36px; }
.promo__txt { font-family: var(--font-body); font-size: var(--fs-body-sm); color: #fff; text-align: center; letter-spacing: .01em; margin: 0; text-wrap: balance; }
.promo__txt b { color: var(--gold); font-weight: 700; }
.promo__txt a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.promo__txt a:hover { color: var(--gold); }
.promo__x { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; background: transparent; border: 0; color: rgba(255,255,255,.6); font-size: var(--fs-promo-x); line-height: 1; cursor: pointer; border-radius: var(--r); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.promo__x:hover { color: #fff; background: rgba(255,255,255,.1); }
.promo.is-hidden { display: none; }
.nav {
display: flex; align-items: center; gap: 24px;
padding-block: 20px;
}
.brand { display: flex; align-items: center; gap: 15px; flex: none; text-decoration: none; }
.brand__crest { height: 58px; width: auto; filter: drop-shadow(var(--sh-crest)); }
.is-stuck .brand__crest { height: 46px; }
.brand__wordmark {
font-family: var(--font-display); font-style: italic; font-weight: 800;
font-size: var(--fs-wordmark); letter-spacing: .01em; color: #fff; text-transform: uppercase;
line-height: .9; text-shadow: var(--tsh-wordmark); white-space: nowrap;
}
.brand__wordmark img { height: 25px; width: auto; } /* when real wordmark-white.png is dropped in */
.nav__links {
display: flex; align-items: baseline; gap: 16px; list-style: none; margin: 0; padding: 0;
font-family: var(--font-ui); font-style: italic; font-weight: 600; font-size: var(--fs-nav);
text-transform: uppercase; letter-spacing: .05em;
}
.nav__links a { position: relative; color: #fff; text-decoration: none; opacity: .92; text-shadow: var(--tsh-nav); padding-bottom: 3px; transition: opacity var(--dur-fast) var(--ease); }
.nav__links a:hover { opacity: 1; }
.nav__links > li > a:not([aria-current="page"])::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold);
transform: scaleX(0); transform-origin: left; transition: transform var(--dur-mid) var(--ease-out);
}
.nav__links > li > a:not([aria-current="page"]):hover::after { transform: scaleX(1); }
.nav__links > li > a[aria-current="page"] { opacity: 1; border-bottom: 3px solid var(--gold); }
/* --- dropdowny w pasku desktop (Obozy / Klub) --- */
.nav__links .nav__has-sub { position: relative; }
.nav__sub-toggle {
position: relative;
font: inherit; letter-spacing: inherit; color: #fff; background: none; border: 0; cursor: pointer;
display: inline-flex; align-items: center; gap: .35em; padding: 0 0 3px; opacity: .92;
text-transform: uppercase; text-shadow: var(--tsh-nav); -webkit-tap-highlight-color: transparent;
transition: opacity var(--dur-fast) var(--ease);
}
.nav__sub-toggle:hover { opacity: 1; }
.nav__has-sub[data-active] > .nav__sub-toggle { opacity: 1; }
/* złote podkreślenie grupy: rośnie na hover, trwałe gdy sekcja aktywna (spójne z linkami).
Selektor kwalifikowany tagiem `button` — to realny element i jednocześnie sygnał
„podkreślenie afordancji linku/przycisku", ten sam register co podkreślenie linków wyżej. */
button.nav__sub-toggle::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold);
transform: scaleX(0); transform-origin: left; transition: transform var(--dur-mid) var(--ease-out);
}
.nav__has-sub:hover > .nav__sub-toggle::after,
.nav__has-sub[data-active] > .nav__sub-toggle::after { transform: scaleX(1); }
.nav__caret { font-size: .62em; line-height: 1; transition: transform var(--dur-mid) var(--ease-out); }
.nav__has-sub:hover .nav__caret,
.nav__has-sub:focus-within .nav__caret,
.nav__sub-toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__sub {
position: absolute; top: calc(100% + 8px); left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 224px; list-style: none; margin: 0; padding: 6px 0;
background: var(--ink); border-top: 3px solid var(--gold); box-shadow: var(--sh-header);
opacity: 0; visibility: hidden; z-index: 70;
transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), visibility 0s linear var(--dur-mid);
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub,
.nav__sub-toggle[aria-expanded="true"] + .nav__sub {
opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.nav__sub li { margin: 0; }
.nav__sub a {
display: block; padding: 9px 20px; white-space: nowrap; color: #fff; opacity: .82;
text-shadow: none; font-style: italic;
transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__sub a::after { display: none; } /* dropdown-items nie dostają złotego podkreślenia paska */
.nav__sub a:hover { opacity: 1; background: rgba(255,255,255,.08); color: var(--gold); }
.nav__sub a[aria-current="page"] { opacity: 1; color: var(--gold); }
.nav__tail { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: none; }
.nav__toggle { display: none; }
/* mobile nav panel */
.nav__burger {
display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer;
padding: 6px; margin: -6px; -webkit-tap-highlight-color: transparent;
}
.nav__burger span { display: block; width: 24px; height: 2.5px; background: #fff; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
/* Panel musi się przewijać. Przy obu rozwiniętych akordeonach treść ma 986 px na ekranie
844 px, a `body` jest w tym czasie zablokowane — bez własnego przewijania ostatnie
pozycje menu były nieosiągalne. `overscroll-behavior` trzyma gest w panelu. */
.nav-panel {
display: none; position: fixed; inset: 0; z-index: 60; background: var(--ink);
padding: 88px var(--gutter) 40px; flex-direction: column; gap: 4px;
overflow-y: auto; overscroll-behavior: contain;
}
.nav-panel.is-open { display: flex; }
.nav-panel a {
font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: var(--fs-panel-link);
text-transform: uppercase; color: #fff; text-decoration: none; padding: 12px 0;
border-bottom: 1px solid var(--hair-ink);
}
.nav-panel a:last-of-type { border-bottom: 0; }
.nav-panel .btn { margin-top: 18px; }
/* --- akordeony w panelu mobilnym (Obozy / Klub) --- */
.nav-panel__group { border-bottom: 1px solid var(--hair-ink); }
.nav-panel__acc {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: var(--fs-panel-link);
text-transform: uppercase; color: #fff; background: none; border: 0; cursor: pointer;
padding: 12px 0; text-align: left; -webkit-tap-highlight-color: transparent;
}
.nav-panel__acc .nav__caret { font-size: .5em; color: var(--gold); }
.nav-panel__group[data-active] > .nav-panel__acc { color: var(--gold); }
.nav-panel__sub { display: none; padding: 2px 0 12px 14px; }
.nav-panel__acc[aria-expanded="true"] + .nav-panel__sub { display: block; }
.nav-panel__sub a {
display: block; font-family: var(--font-ui); font-style: italic; font-weight: 600; font-size: var(--fs-nav);
letter-spacing: .04em; text-transform: uppercase; color: var(--on-ink-soft); text-decoration: none;
padding: 9px 0; border-bottom: 0;
}
.nav-panel__sub a:hover, .nav-panel__sub a[aria-current="page"] { color: var(--gold); }
/* `fixed`, nie `absolute`: panel jest teraz kontenerem przewijania, więc krzyżyk przypięty
do niego odjeżdżałby z treścią. Panel i tak zajmuje cały ekran, więc kotwica jest ta sama. */
.nav-panel__close {
position: fixed; top: 22px; right: var(--gutter); background: none; border: 0;
color: #fff; font-size: var(--fs-2xl); line-height: 1; cursor: pointer; font-family: var(--font-body);
}
/* ============================================================================
HERO
============================================================================ */
.hero { position: relative; min-height: clamp(560px, 62vw, 840px); overflow: hidden; color: #fff; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* Dolna rampa niesie czytelność copy (hero__inner ma align-items: flex-end, więc tekst siedzi
przy dolnej krawędzi). Rampa zaczyna się wyżej i kończy mocniej niż w wersji pierwotnej, bo
kadr home to od 12.08.2026 dzieci w BIAŁYCH judogach — pomiar na starym zdjęciu dawał podpisowi
7,3:1, na nowym 3,3:1 przy tej samej regule. Podniesienie rampy wraca ponad próg WCAG. */
.hero__grad {
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(15,15,16,.5) 0, rgba(15,15,16,.14) 20%, rgba(120,10,14,0) 32%, rgba(120,10,14,.54) 64%, rgba(120,10,14,.88) 100%);
}
.hero__topgrad { position: absolute; left: 0; right: 0; top: 0; height: 150px;
background: linear-gradient(to bottom, rgba(15,15,16,.72) 0, rgba(15,15,16,.5) 55%, rgba(15,15,16,0) 100%); }
.hero__inner { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 30px; min-height: inherit; padding-block: 26px 38px; }
.hero__copy { max-width: 720px; }
.hero__title { font-size: var(--fs-hero); line-height: .86; color: #fff; text-shadow: var(--tsh-hero); }
.hero__sub { margin-top: 16px; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.7; color: rgba(255,255,255,.92); text-shadow: var(--tsh-lead); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.hero__play { margin-left: auto; display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; flex: none; }
.hero__play-ring { width: 64px; height: 64px; border-radius: 50%; border: 2.5px solid #fff; display: grid; place-items: center; flex: none; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hero__play:hover .hero__play-ring { background: rgba(255,255,255,.16); transform: scale(1.06); }
.hero__play:active .hero__play-ring { transform: scale(.98); }
.hero__play span { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; text-transform: uppercase; letter-spacing: .08em; }
/* ============================================================================
TICKER (black bar)
============================================================================ */
.ticker { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 26px;
padding-block: 22px; }
.ticker__label { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.ticker__label--gold { color: var(--gold); }
.ticker__info { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--on-ink-soft); }
.ticker__info b { font-family: var(--font-display); font-style: normal; font-weight: 600; color: #fff; }
.ticker__sep { width: 1px; height: 16px; background: var(--gold); opacity: .8; flex: none; }
/* ============================================================================
DROGA SMOKA (belt path — variant 9b: photo + ladder)
============================================================================ */
.droga { display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; }
.droga__photo { position: relative; overflow: hidden; min-height: 456px; }
.droga__photo img { width: 100%; height: 100%; min-height: 456px; object-fit: cover; object-position: 50% 30%; }
.droga__photo-cap {
position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 34px 26px;
background: linear-gradient(to top, rgba(15,15,16,.9) 0, rgba(15,15,16,0) 100%);
}
.droga__photo-cap h2 { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: var(--fs-band); text-transform: uppercase; color: #fff; line-height: .95; }
.droga__photo-cap p { margin-top: 12px; max-width: 40ch; font-size: var(--fs-body); line-height: 1.7; color: rgba(255,255,255,.8); }
.droga__panel { background: var(--ink); padding: 40px 34px 36px; display: flex; flex-direction: column; }
.ladder { display: flex; flex-direction: column; margin-top: 4px; }
.ladder__row { display: flex; align-items: center; gap: 14px; padding: 11px 10px; margin: 0 -10px; border-bottom: 1px solid rgba(255,255,255,.1); transition: background-color var(--dur) var(--ease); }
.ladder__row:last-child { border-bottom: 0; }
.ladder__row:hover { background: rgba(255,255,255,.05); } /* pas reaguje: wiersz lekko rozjaśnia (tekstura, nie afordancja klika) */
/* Zawiązany pas: kolor/gradient z .b-* prześwieca przez maskę-sylwetkę (węzeł + końce).
Na ciemnym panelu bez obrysu (pasy same wybijają się z inku). */
.ladder__belt { width: 44px; height: 32px; flex: none;
-webkit-mask: var(--belt-tie) center / contain no-repeat;
mask: var(--belt-tie) center / contain no-repeat; }
.ladder__name { font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: var(--fs-14); color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.ladder__meta { margin-left: auto; font-family: var(--font-body); font-size: var(--fs-micro); color: var(--on-ink-faint); }
.droga__panel .btn { align-self: flex-start; margin-top: 24px; }
/* belt colour fills (shared) */
.b-white { background: var(--belt-white); }
.b-wy { background: linear-gradient(90deg, var(--belt-white) 0 50%, var(--belt-yellow) 50%); }
.b-yellow { background: var(--belt-yellow); }
.b-yo { background: linear-gradient(90deg, var(--belt-yellow) 0 50%, var(--belt-orange) 50%); }
.b-orange { background: var(--belt-orange); }
.b-og { background: linear-gradient(90deg, var(--belt-orange) 0 50%, var(--belt-green) 50%); }
.b-green { background: var(--belt-green); }
.b-blue { background: var(--belt-blue); }
.b-brown { background: var(--belt-brown); }
.b-black { background: var(--belt-black); }
/* ============================================================================
O KLUBIE (about + signup form)
============================================================================ */
/* Un-boxed (gauntlet R6): a full-bleed triptych — solid red copy panel | bright true-colour
studio photo | red signup form, butted with hard vertical seams. No .wrap, no floating
rectangle, and NO tint on the photo (two fresh critics flagged the earlier over-photo scrim
as a red wash where the gis went pink and the image dissolved into the form). Photo leads:
its column is the widest, flanked by the two red rails. Matches the full-bleed rhythm of
the news stage / coach-strip / group-strip. */
/* Kolumna z opisem urosła (13.08.2026: klub przysłał własny, czterokapitowy tekst „O klubie"),
więc czerwony panel dostał więcej światła kosztem obu sąsiadów. */
.about-stage { display: grid; grid-template-columns: 1.3fr 1.35fr .9fr; align-items: stretch; }
.about-stage__copy { background: var(--red); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: clamp(30px, 3.4vw, 54px); }
.about-stage__copy .eyebrow { margin-bottom: 12px; }
/* Nagłówek rail-a ma własny stopień skali (--fs-h2-rail), nie --fs-section: przy stałym rozmiarze
„JUDO DRAGON DLA KAŻDEGO" łamało się na cztery wiersze poniżej ~1200 px (zmierzone: h2 108 →
215 px), co podnosiło cały tryptyk o ponad 100 px i zostawiało pustą biel obok zdjęcia. Zawijanie
jest naturalne (bez
), żeby punkt łamania szedł za szerokością kolumny, nie za znacznikiem. */
.about-stage__copy h2 { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: var(--fs-h2-rail); text-transform: uppercase; color: #fff; line-height: .96; margin: 0 0 20px; text-wrap: balance; }
.about-stage__copy p { font-size: var(--fs-body); line-height: 1.8; color: #fff; margin: 0 0 14px; text-wrap: pretty; }
.about-stage__copy .btn { margin-top: 10px; }
/* Wysokość tryptyku niesie teraz KOLUMNA ZE ZDJĘCIEM (wcześniej dyktował ją 560px iframe
formularza; po zamianie na przycisk kolumna zapisu jest niska, więc zdjęcie musi trzymać
pełny kadr samo — ~750px na desktopie, jak było wcześniej; mobile ma własny override niżej). */
.about-stage__media { position: relative; overflow: hidden; min-height: clamp(500px, 59vw, 760px); }
.about-stage__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* Wariant „arkusz": studyjna wycinanka na białym tle. Kadrowanie `cover` ucinałoby skrajne
osoby z grupy (zdjęcie jest prawie kwadratowe, a kolumna wysoka), więc zdjęcie wchodzi
CAŁE — a białe tło panelu jest przedłużeniem białego tła studia, więc szew zostaje twardy. */
.about-stage__media--sheet { background: #fff; }
.about-stage__media--sheet img { object-fit: contain; object-position: 50% 100%; padding: clamp(16px, 1.8vw, 30px); }
.signup.about-stage__form { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 3vw, 50px) clamp(26px, 3vw, 44px); }
/* signup form card */
.signup { background: var(--red); padding: 26px 26px 28px; color: #fff; }
.signup h2 { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: var(--fs-signup-h2); text-transform: uppercase; color: #fff; line-height: 1; margin: 0 0 6px; }
.signup__note { font-size: var(--fs-body-sm); color: var(--on-red-soft); margin-bottom: 18px; }
.signup__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.signup .field { width: 100%; background: #fff; border: 0; padding: 12px 13px; font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--ink); margin-bottom: 10px; }
.signup__grid .field { margin-bottom: 0; }
.signup .field::placeholder { color: #9a9a9a; }
select.field { color: #9a9a9a; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 15px center, right 10px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select.field:valid { color: var(--ink); }
textarea.field { resize: vertical; min-height: 52px; }
.signup .btn { width: 100%; }
.signup__legal { font-size: var(--fs-micro); line-height: 1.6; color: var(--on-red-soft); margin-top: 12px; }
/* Zapisy w oknie: karta na czerwieni prowadzi do formularza jednym przyciskiem,
a sam formularz Google otwiera się w ostylowanym oknie (patrz .signup-modal).
Klient woli formularz „na stronie", ale bez surowego chromu Google na wejściu. */
.signup__open { margin-top: 4px; }
.signup__alt { font-size: var(--fs-body-sm); color: var(--on-red-soft); margin-top: 14px; }
.signup__alt a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.signup__alt a:hover { color: var(--gold); }
/* Fallback bez JS: formularz osadzony inline w białym insecie (jak wcześniej), żeby
zapisy działały nawet z wyłączonym JavaScriptem. Z JS panel ten jest schowany. */
.signup__embed { background: #fff; border-radius: var(--r); padding: 6px; margin-top: 6px; }
.signup__embed iframe { display: block; width: 100%; height: 560px; border: 0; }
/* ------------------------------------------------------------------ ZAPISY: OKNO (MODAL)
Natywny