/* Moneli Strona: układ redakcyjny (wzór White Cube). Jeden krój, grubość 400, wszystko do lewej, brak linii i ramek.
   Media w stałych formatach: 3:2 (aktualności, wizyta), 4:5 (artyści), 16:9 (wideo). Prace ze sklepu nigdy nie są kadrowane. */
:root{
  --paper:#ffffff; --ink:#111111; --meta:#555555; --line:#e3e3e3; --field:#f1f1f1;
  --font:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter:clamp(16px, 4.2vw, 80px); --gap:clamp(24px, 4vw, 72px); --block:clamp(28px, 4vw, 56px);
  --logo-w:clamp(110px, 10.25vw, 195px); --text-w:36em; --col:62em;
}
html{ background:var(--paper) }
body.ms{ margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.5 var(--font); font-stretch:100%; overflow-x:clip; -webkit-font-smoothing:antialiased }
.ms a{ color:inherit; text-decoration:none }
.ms a:hover{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }
/* odnośniki w prozie zawsze podkreślone */
.ms :is(.ms-body, .bio) :is(p, li, figcaption, cite) a{ text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:1px }
.ms .quiet{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; color:var(--meta) }
.ms .quiet small, .ms .go small{ font-size:11px; margin-left:4px; color:var(--meta) }
.skip{ position:absolute; left:-999px; top:8px; z-index:100; background:var(--ink); color:#fff !important; padding:8px 12px }
.skip:focus{ left:16px }
.ms :is(a, button, summary):focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.ms img{ display:block; max-width:100%; height:auto }
.ms figure{ margin:0 }
.ms :is(h1,h2,h3,h4,p,ul,ol){ margin:0; font-weight:400 }
.ms ul, .ms ol{ padding-left:1.2em }
.ms .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.wrap{ max-width:1720px; margin-inline:auto; padding-inline:var(--gutter); box-sizing:border-box }

/* pasek podglądu (tylko zalogowani przed publikacją) */
.ms-notice{ background:#111; color:#fff; font:400 13px/1.5 system-ui, "Segoe UI", Arial, sans-serif; padding:8px var(--gutter) }
.ms-notice a{ color:#fff; text-decoration:underline; margin-left:12px }

/* nagłówek: Artyści | logo | Sklep na linii liter logotypu; znika przy przewijaniu w dół, wraca w górę */
.mast{ display:block; position:sticky; top:var(--wp-admin--admin-bar--height, 0px); z-index:20; transition:transform .3s ease }
.mast.hide{ transform:translateY(-110%) }
.mast::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:var(--paper); z-index:-1; pointer-events:none }
.mastin{ width:100%; padding:clamp(11px, 1.1vw, 20px) var(--gutter) clamp(9px, 0.9vw, 16px); display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:16px }
.nav{ line-height:1; font-size:13.2px }
.nav a{ display:inline-block; line-height:1 }
.nav small{ font-size:9.9px; margin-left:3px; color:var(--meta) }
.nav-l{ justify-self:start } .nav-r{ justify-self:end }
.brand{ justify-self:center; line-height:0 }
.brand:hover{ text-decoration:none }
/* litery logotypu kończą się 20,5 px nad dołem pliku 136 px (zmierzone w logo.png): ta linia = linia pisma przycisków */
.logo{ width:var(--logo-w); height:auto; margin-bottom:calc(-20.5 / 136 * var(--logo-w) * 136 / 558) }

/* typografia elementów */
.kicker, .is-style-kicker{ font-size:12px; letter-spacing:.14em; text-transform:uppercase }
.sechead{ padding-top:var(--block); color:var(--meta) }
.name{ font-size:clamp(28px, 2.6vw, 44px); line-height:1.1; letter-spacing:-.01em; text-wrap:balance }
.sub, .is-style-sub{ font-size:clamp(20px, 1.6vw, 28px); line-height:1.2; font-style:italic }
.when, .is-style-when{ font-size:15px; line-height:1.45 }
.when span{ display:block }
.lede, .is-style-lede{ font-size:16px; line-height:1.55; max-width:30em }
.go{ display:inline-flex; align-items:center; gap:12px; font-size:16px }
.go::before{ content:"→"; font-size:18px; line-height:1 }
.more{ padding-block:18px 8px }
.empty-note{ color:var(--meta); padding-block:12px }
.col h2, .col .wp-block-heading{ font-size:clamp(28px, 2.6vw, 44px); line-height:1.1; letter-spacing:-.01em; font-weight:400; text-wrap:balance }
.col h3{ font-size:clamp(22px, 1.9vw, 32px); line-height:1.15 }

/* ramki o stałych proporcjach: .contain = całe zdjęcie w ramce (reprodukcje dzieł), inaczej kadr z punktem ogniskowania */
.frame{ position:relative; overflow:hidden; background:#fafafa; width:100%; max-width:100% }
.frame-32{ aspect-ratio:3/2 } .frame-45{ aspect-ratio:4/5 }
.frame img{ width:100%; height:100%; object-fit:cover }
/* całe zdjęcie (reprodukcja pracy): bez ramki 3:2 i bez tła; własne proporcje, nie wyższe niż 70% ekranu, do lewej */
.frame-32.contain{ aspect-ratio:auto; background:none; overflow:visible; width:auto }
.frame-32.contain img{ width:auto; max-width:100%; height:auto; max-height:65vh; object-fit:initial; display:block }
/* kafel 4:5 w trybie „całe”: praca stoi na dolnej krawędzi ramki (jak na półce), bez tła */
.frame-45.contain{ background:none }
.frame-45.contain img{ object-fit:contain; object-position:50% 100% }
.frame.empty{ display:grid; place-items:center; color:#888; font-size:13px; text-align:center; padding:8px; box-sizing:border-box }
.media-link{ display:block; min-width:0 }
.media-link:hover{ text-decoration:none }

/* strona główna: „Teraz” = jedna bieżąca aktualność jako snippet; kolumna tekstu z lewej (góra i dół równo z pracą), praca z prawej na 2/3 */
/* kolumna obrazu zaczyna się dokładnie na lewej krawędzi logotypu (logo stoi na środku, szerokość --logo-w) */
:root{ --sgap:clamp(24px, 3vw, 56px); --col-txt:calc(50% - var(--logo-w) / 2 - var(--sgap)) }
.now{ padding-top:calc(var(--block) + 8px) }
.now .hero{ display:grid; grid-template-columns:var(--col-txt) minmax(0, 1fr); gap:var(--sgap); align-items:start; min-height:18em; max-width:none; padding-bottom:0 }
.hero.no-media{ grid-template-columns:minmax(0, var(--col)) }
.hero .col{ height:0; min-height:100%; display:flex; flex-direction:column; gap:18px; min-width:0 }
.hero.no-media .col{ height:auto }
.hero .col .top{ display:grid; gap:12px; margin-top:1px }
.hero .col .top .kicker{ color:var(--meta); line-height:1 }
.hero .col .top .name{ font-size:clamp(24px, 2.2vw, 40px); line-height:1.1; max-width:12em }
.hero .col .top .when{ font-size:16px; line-height:1.45 } .hero .col .top .when span{ display:block }
.hero .col .bottom{ margin-top:auto; display:grid; gap:14px }
.hero .col .bottom .lede{ font-size:16px; line-height:1.5; max-width:30em }
.hero .col .bottom .go{ line-height:1 }
.hero .col .bottom .quiet{ font-size:14px }
/* ta sama ramka co w opowieści: 3:2 na całą kolumnę 2/3, praca w całości dosunięta do prawej krawędzi; mieści się w ekranie z nagłówkiem */
.hero .media-link{ justify-self:stretch; min-width:0 }
/* obraz na całą szerokość kolumny (od krawędzi logotypu do prawej krawędzi), wysokość z proporcji obrazu */
.hero .frame-32.contain{ width:100%; aspect-ratio:auto }
.hero .frame-32.contain img{ width:100%; height:auto; max-height:none; object-fit:initial }
.hero .col .bottom .go.reveal{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:12px; font:inherit; color:inherit; line-height:1 }
.hero .col .bottom .go.reveal::before{ content:"→"; font-size:18px; line-height:1 }
.hero .col .bottom .go.reveal:hover{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }
.hero .col .bottom .go.reveal:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
/* opowieść: rozwija się pod snippetem; tekst stoi (sticky) z lewej, zdjęcia z wpisu przepływają z prawej, mniejsze niż praca główna */
.story{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .7s cubic-bezier(.22,1,.36,1) }
.story.open{ grid-template-rows:1fr }
/* opowieść: obrazy w stałej ramce 3:2 na zmianę prawa/lewa (2/3 szerokości); tekst (1/3) stoi przyklejony i przechodzi na stronę przeciwną do obrazu */
.story-in{ overflow:hidden }
.story.open .story-in{ overflow:visible; padding-top:clamp(40px, 6vw, 96px) }
/* każdy obraz ma własny wiersz: obraz (2/3, stała ramka 3:2) na zmianę prawa/lewa, obok jego porcja tekstu.
   Tekst zaczyna się równo z górą obrazu i jest przyklejony tylko w obrębie swojego wiersza: trzyma się, aż wiersz się skończy, potem odjeżdża z obrazem. */
.story{ --stop:calc(var(--wp-admin--admin-bar--height, 0px) + 150px) }
.story .srow{ display:grid; grid-template-columns:var(--col-txt) minmax(0, 1fr); gap:var(--sgap); align-items:start }
.story .srow.side-l{ grid-template-columns:minmax(0, 1fr) var(--col-txt) }
.story .srow.side-l .stxt{ order:2 }
.story .stxt{ position:sticky; top:var(--stop); display:grid; gap:16px; max-width:30em; font-size:16px; line-height:1.5 }
/* tekst kolejnego wiersza wyłania się, gdy wiersz wjeżdża w ekran (klasa .in nadawana przez skrypt); pierwszy od razu */
.story .srow .stxt{ opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1) }
.story .srow.in .stxt, .story .srow:first-child .stxt{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .story .srow .stxt{ opacity:1; transform:none; transition:none } }
.story .step{ display:grid; gap:18px; align-content:start }
.story .step > *{ margin:0 }
.story .step h2, .story .step h3{ font-size:clamp(20px, 1.5vw, 24px); line-height:1.2; font-weight:400 }
.story .step blockquote, .story .step .wp-block-pullquote{ border:0; padding:0; margin:0 } .story .step blockquote p{ font-style:italic }
.story .step ul, .story .step ol{ padding-left:1.2em }
.story .cap{ font-size:13px; color:var(--meta); max-width:30em }
.story .links .close{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:12px; font:inherit; color:inherit } .story .links .close::before{ content:"↑"; font-size:18px; line-height:1 }
.story .links .close:hover{ text-decoration:underline; text-underline-offset:.2em } .story .links .close:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.story .links{ display:grid; gap:12px; padding-top:8px } .story .links .quiet{ font-size:14px }
/* wiersze: wysokość wiersza = obraz albo tekst (co wyższe), bez sztucznego zapasu; odstęp między wierszami stały, nie zależny od wysokości ekranu */
.story .flow{ display:grid; gap:clamp(48px, 7vw, 112px) }
.story .flow figure{ display:grid; align-items:start; min-width:0 }
.story .flow figure a{ display:block }
/* stały format: ramka 3:2, praca w całości, dosunięta do zewnętrznej krawędzi */
.story .flow .box{ display:block; width:100% }
/* malowidło dosunięte do krawędzi logotypu: po prawej stronie do lewej krawędzi logo, po lewej do prawej */
.story .flow img{ width:100%; height:auto }
.story .srow:last-child{ margin-bottom:6vh }
@media (prefers-reduced-motion: reduce){ .story{ transition:none } }
/* strona wpisu: te same wiersze, bez zwijania; dodatkowo ramka wydarzenia */
.story.static{ display:block }
.story.static .story-in{ overflow:visible; padding-top:0 }
.story.static .srow .stxt{ opacity:1; transform:none }
.story.static .srow .stxt{ transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1) }
.story.static .srow:not(.in):not(:first-child) .stxt{ opacity:0; transform:translateY(14px) }
.ms-single .story.static{ padding-top:clamp(12px, 2vw, 28px) }
.event .event-row{ display:grid; gap:12px; padding-top:clamp(20px, 3vw, 40px); max-width:var(--col) }
.event .event-row .name{ font-size:clamp(24px, 2.2vw, 40px) }
.event .event-links{ display:flex; flex-wrap:wrap; gap:12px 40px; padding-top:8px }
/* strona główna: „Odwiedź galerię” = krótki snippet jak aktualność: tekst z lewej (góra/dół równo z obrazem), zdjęcie galerii na całą kolumnę z prawej */
.ms-home #wizyta{ display:grid; grid-template-columns:var(--col-txt) minmax(0,1fr); gap:var(--sgap); align-items:start; max-width:none; padding-block:var(--block) }
.ms-home #wizyta .col{ order:-1; height:0; min-height:100%; display:flex; flex-direction:column; gap:14px }
.ms-home #wizyta .col .wp-block-spacer{ flex:1 1 auto; height:auto !important; min-height:12px }
.ms-home #wizyta .col .wp-block-heading{ font-size:clamp(24px, 2.2vw, 40px); line-height:1.1 }
.ms-home #wizyta .media .frame{ aspect-ratio:auto; width:100%; background:none }
.ms-home #wizyta .media img{ width:100%; height:auto; object-fit:initial }
.ms-home #wizyta .media .frame.empty{ aspect-ratio:3/2; background:var(--field) }
/* strzałka „Umów wizytę”: obramowany przycisk (reszta strzałek na stronie zostaje tekstowa) */
.ms-home #wizyta .col .go{ border:1px solid var(--ink); padding:12px 22px; line-height:1; margin-top:4px; transition:background-color .2s ease, color .2s ease }
.ms-home #wizyta .col .go:hover{ background:var(--ink); color:#fff; text-decoration:none }
.ms-home #wizyta .col .go:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
/* strona /wizyta/: opis z lewej, formularz w kolumnie wyrównanej do logotypu */
.ms-wizyta .wz{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; padding-bottom:var(--block) }
.head.wz-head{ max-width:none; justify-items:center; text-align:center } .wz-head .when{ justify-content:center }
.wz-col{ display:flex; flex-direction:column; gap:14px; min-width:0 } .wz-col > .kicker{ color:var(--meta) }
.wz-col > .name{ font-size:clamp(20px, 1.6vw, 26px); line-height:1.2 } .wz-col > .name + .wz-f, .wz-col > .wz-err{ margin-top:10px }
.wz-form{ padding-right:var(--sgap) } .wz-3d{ padding-left:var(--sgap); border-left:1px solid var(--line) }
.wz-f{ display:grid; gap:18px }
.wz-f label{ display:grid; gap:6px; font-size:13px; color:var(--meta) } .wz-f label em{ font-style:normal; opacity:.8 }
.wz-f input, .wz-f select, .wz-f textarea{ font:inherit; font-size:16px; color:var(--ink); background:transparent; border:0; border-bottom:1px solid #bdbdbd; border-radius:0; padding:8px 0; width:100%; box-sizing:border-box }
.wz-f textarea{ resize:vertical; border:1px solid #bdbdbd; padding:10px }
.wz-f input:focus, .wz-f select:focus, .wz-f textarea:focus{ outline:none; border-color:var(--ink) }
.wz-two{ display:grid; grid-template-columns:1fr 1fr; gap:24px } .wz-three{ display:grid; grid-template-columns:1.4fr 1.2fr .8fr; gap:24px }
.wz-when{ border:0; margin:0; padding:0; min-width:0; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:10px 28px; align-items:start }
.wz-when legend{ padding:0 0 10px; font-size:13px; color:var(--meta) }
.wz-cal{ border:1px solid #bdbdbd; padding:10px 12px 12px }
.wz-cal-head{ display:flex; align-items:center; justify-content:space-between; font-size:15px; padding-bottom:6px }
.wz-nav{ all:unset; cursor:pointer; width:32px; height:32px; display:grid; place-items:center; font-size:20px; line-height:1 } .wz-nav[disabled]{ opacity:.2; cursor:default }
.wz-nav:focus-visible{ outline:2px solid var(--ink) }
.wz-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center }
.wz-dow{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--meta); padding:4px 0 6px }
.wz-d, .wz-h{ position:relative; display:block; cursor:pointer }
.wz-d input, .wz-h input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer }
.wz-d span{ display:block; padding:7px 0; font-size:14px; font-variant-numeric:tabular-nums }
.wz-d:hover span{ background:#eeedea } .wz-d input:checked + span{ background:var(--ink); color:#fff }
.wz-d input:disabled + span{ color:#cfcfcf; background:none } .wz-d:has(input:disabled){ cursor:default }
.wz-hours{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px }
.wz-h span{ display:block; border:1px solid #bdbdbd; padding:8px 0; text-align:center; font-size:14px; font-variant-numeric:tabular-nums }
.wz-h:hover span{ border-color:var(--ink) } .wz-h input:checked + span{ background:var(--ink); border-color:var(--ink); color:#fff }
.wz-d input:focus-visible + span, .wz-h input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px }
.wz-sum{ margin:20px 0 0; font-size:15px } .wz-sum:empty{ display:none }
.wz-two-b{ grid-template-columns:.5fr 1fr }
.wz-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.wz-send{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:12px; font-size:16px; justify-self:start; padding-top:8px }
.wz-send::before{ content:"→"; font-size:18px } .wz-send:hover{ text-decoration:underline; text-underline-offset:.2em } .wz-send:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.wz-ok{ display:grid; gap:16px } .wz-err{ color:#a12; padding-bottom:12px }
.wz-3d:hover{ text-decoration:none } .wz-3d .lede{ max-width:32em }
/* zdjęcie sali to szerokie ujęcie (pion 80°, 1918×1118) z punktu startowego sceny; widać wycinek 3:2 = kadr pion 62°:
   szer. tan40·1.7156/(tan31·1.5) = 159.73 %, wys. tan40/tan31 = 139.65 %, środek w środku. Przy przejściu odsłania się reszta (strona.js). */
.wz-shot{ position:relative; display:block; margin-top:10px; aspect-ratio:1918/1118; overflow:hidden; background:#ecebe8 }   /* proporcja zdjęcia karty: całe w kadrze */
.wz-shot img{ position:absolute; display:block; max-width:none; width:100%; height:100%; left:0; top:0; object-fit:cover; transition:transform .6s ease }   /* 1.6.12: zdjęcie to już gotowy kadr startowy (75°), bez powiększania środka */
.wz-3d:hover .wz-shot img{ transform:scale(1.02) }
/* przejście do sali 3D: zdjęcie rośnie do kadru startowego sceny (strona.js), pod nim ciemne tło sali */
.wz-veil{ position:fixed; inset:0; z-index:100000; background:#262627; opacity:0; pointer-events:none; transition:opacity .45s ease; will-change:opacity }
.wz-veil.on{ opacity:1 }
.wz-fly{ position:fixed; left:0; top:0; width:10px; height:10px; max-width:none; max-height:none; z-index:100001; display:block; object-fit:cover; transform-origin:0 0; will-change:transform; opacity:0; pointer-events:none } .wz-fly.show{ opacity:1 }
.wz-fly.go{ transition:transform .6s cubic-bezier(.22,.7,.12,1), clip-path .6s cubic-bezier(.22,.7,.12,1) }
}
@media (prefers-reduced-motion:reduce){ .wz-shot img{ transition:none } }
.wz-3d:hover .name, .wz-3d:hover .go{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }
/* sklep: nagłówek z odnośnikiem po prawej, rząd prac */
.shop .sechead-row{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding-top:var(--block) }
.shop .sechead-row .sechead{ padding-top:0 }
.shop .works{ padding-top:clamp(20px, 3vw, 40px) }

/* aktualności: wiersze (archiwum, starszy układ) */
details > summary{ list-style:none; cursor:pointer }
details > summary::-webkit-details-marker{ display:none }
/* sekcja: otwarty wpis na górze w dużym układzie, pod nim rząd kart (praca + tytuł) pozostałych wpisów */
.rows{ display:flex; flex-wrap:wrap; gap:clamp(28px, 4vw, 56px) clamp(24px, 3vw, 56px); align-items:flex-start }
.rows > .sechead, .rows > .more, .rows > .empty-note{ flex:1 1 100% }
.rows > .row{ flex:0 1 calc((100% - 2 * clamp(24px, 3vw, 56px)) / 3); min-width:0; padding-top:0 }
.rows > .row[open]{ flex:1 1 100%; order:-1 }
.tog{ display:inline-grid; place-items:center; width:1.4em; height:1.4em; font-size:22px; line-height:1; color:var(--meta); align-self:center }
.tog::before{ content:"+" }
details[open] > summary .tog::before{ content:"−" }
/* karta: praca w całości na wspólnej dolnej linii, pod nią tytuł; klik w kartę otwiera wpis */
.rows .row summary{ display:grid; gap:14px; padding:0 }
.rows .row summary .thumb{ display:flex; align-items:flex-end; height:clamp(150px, 15vw, 260px) }
.rows .row summary .thumb img{ max-height:100%; max-width:100%; width:auto; height:auto; display:block }
.rows .row summary .when{ white-space:nowrap; color:var(--meta) }
.rows .row summary .tog{ display:none }
.rows .row .name{ font-size:clamp(22px, 1.9vw, 32px) }
.rows .row summary .name{ font-size:clamp(18px, 1.3vw, 22px); line-height:1.25 }
.rows .row summary:hover .name{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }
.rows .row summary:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.rows .row .name a:hover{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }
.ms-nodates .rows .row .body{ padding-left:0 }
.ms-nodates .rowlink{ grid-template-columns:minmax(0,1fr) }
/* rozwinięcie (anatomia White Cube): kolumna tekstu z lewej, nadtytuł u góry, reszta u dołu równo z dołem obrazu; obraz z prawej na 2/3 */
.rows .row .body{ display:grid; grid-template-columns:minmax(15em, 1fr) minmax(0, 2fr); gap:clamp(24px, 3vw, 56px); align-items:start; min-height:18em; padding:6px 0 44px calc(10em + 24px) }
.rows .row .body.no-media{ grid-template-columns:minmax(0, var(--col)); min-height:0 }
.rows .row .body .col{ height:0; min-height:100%; display:flex; flex-direction:column; gap:18px; min-width:0 }
/* otwarty wiersz: tytuł przechodzi do kolumny obok obrazu (równo z jego górą), w pasku zostaje tylko „−” nad prawą krawędzią obrazu */
.rows .row[open] > summary{ display:block; position:relative; height:34px; padding:0; z-index:2 }
.rows .row[open] > summary .name, .rows .row[open] > summary .when, .rows .row[open] > summary .thumb{ display:none }
.rows .row[open] > summary .tog{ display:inline-grid; position:absolute; right:0; top:0; color:var(--ink) }
.rows > .row[open]{ padding-top:calc(var(--block) - 24px) }
.rows .row[open] > .body{ padding-top:0; padding-bottom:0 }
.rows .row .body .col .title{ display:none }
.rows .row[open] .body .col .title{ display:block }
/* góra i dół kolumny równo z krawędziami obrazu: bez luzu z wysokości linii */
.rows .row .body .col .top{ flex:none; display:grid; gap:12px; margin-top:1px }
.rows .row .body .col .top .kicker{ color:var(--meta); line-height:1 }
.rows .row .body .col .top .title{ font-size:clamp(22px, 1.9vw, 32px); line-height:1.1; max-width:12em; padding-right:2.5em }
.rows .row .body .col .spacer{ flex:1 1 auto; min-height:0 }
.rows .row .body .col .bottom{ flex:0 1 auto; min-height:0; display:flex; flex-direction:column; gap:14px }
.rows .row .body .col .links{ flex:none; padding-top:4px; line-height:1 }
.rows .row .body .col .links .go{ line-height:1; align-items:baseline }
.rows .row .body .col .links .go::before{ line-height:1 }
.rows .row .body .col .text p:last-child{ margin-bottom:0 }
/* kolumna obrazu ma określoną szerokość (2/3), obraz w niej w pełnych proporcjach: bez cyklu „rozmiar pliku → szerokość kolumny” */
.rows .row .body .media-link{ justify-self:stretch; min-width:0 }
.rows .row .body .frame-32.contain{ width:100% }
.rows .row .body .frame-32.contain img{ max-height:84vh; max-width:100%; width:auto }
.rows .row .body .lede{ font-size:16px; line-height:1.5; max-width:30em }
.rows .row .body .when{ color:var(--ink); font-size:16px; line-height:1.45 }
.rows .row .body .when span{ display:block }
/* bez zdjęcia nie ma czym ograniczać wysokości: kolumna rośnie z tekstem */
.rows .row .body.no-media .col{ height:auto; min-height:0 }
.rows .row .body.no-media .col .spacer{ display:none }
.rows .row .body.no-media .text{ overflow:visible }
.rows .row .body .text{ flex:0 1 auto; min-height:0; overflow:hidden; display:grid; gap:14px; align-content:start }
.rows .row .body .text.clipped{ mask-image:linear-gradient(to bottom, #000 calc(100% - 2.6em), transparent); -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 2.6em), transparent) }
.rows .row .body .more{ display:grid; grid-template-rows:0fr; margin-top:-14px; transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1), margin-top .45s cubic-bezier(.22,1,.36,1) }
.rows .row .body .more.open{ grid-template-rows:1fr; margin-top:0 }
.rows .row .body .more-in{ overflow:hidden; display:grid; gap:14px }
.rows .row .body .more p{ margin:0; font-size:15px; line-height:1.5; max-width:32em }
.rows .row .body .go.reveal{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:12px; font:inherit; color:inherit }
.rows .row .body .go.reveal::before{ content:"→"; font-size:18px; line-height:1 }
.rows .row .body .go.reveal:hover{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }
.rows .row .body .go.reveal:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.rows .row .body .full.hidden{ display:none }
@media (prefers-reduced-motion: reduce){ .rows .row .body .more{ transition:none } }
.rowlink{ display:grid; grid-template-columns:minmax(10em, max-content) minmax(0,1fr); gap:24px; align-items:baseline; padding-block:14px }
.rowlink .when{ white-space:nowrap; color:var(--meta) }
.rowlink .name{ font-size:clamp(20px, 1.6vw, 26px) }
.rowlink:hover{ text-decoration:none }
.rowlink:hover .name{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }

/* element: jedna kolumna, zdjęcie nad tekstem (.flip = tekst nad zdjęciem) */
.item{ display:grid; gap:clamp(18px, 2vw, 28px); max-width:var(--col); padding-block:var(--block) }
.item.flip .col{ order:-1 }
.item .media{ min-width:0 }
.col{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; min-width:0 }
.col > *{ margin:0; max-width:100% }
.col .top{ display:grid; gap:18px; max-width:100% }
.col .bottom{ display:grid; gap:22px; max-width:100% }
.col .wp-block-spacer{ min-height:12px; height:12px !important; width:100% }
.col p{ max-width:min(30em, 100%) }
.col .bio p + p{ margin-top:.8em }

/* kafle artystów 4:5 */
.tiles{ display:grid; gap:var(--gap); padding-block:clamp(20px, 3vw, 40px) }
.tiles.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.tiles.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.tiles.cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)) }
.tile{ display:grid; gap:10px; min-width:0; align-content:start }
.tile .name{ font-size:clamp(20px, 1.5vw, 26px); margin-top:4px }
.tile .when{ color:var(--meta) }
.tile:hover{ text-decoration:none }
.tile:hover .name{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }

/* scena artysty: ramka 4:5, karty prac przesuwane (snap), flagowa na środku, sąsiednie wystają z boków */
/* karuzela (model z kiosku v5): tor przesuwany translate3d na warstwie GPU, bez przewijania przeglądarki; palec i mysz przez pointer events */
.stage{ position:relative; aspect-ratio:1/1; width:100%; max-width:100%; overflow:hidden; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab; -webkit-tap-highlight-color:transparent }
.stage.drag{ cursor:grabbing }
.stage .track{ display:flex; height:100%; gap:3%; will-change:transform; backface-visibility:hidden; transform:translate3d(0,0,0); outline:none }
.stage .track:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px }
.stage .slide{ flex:0 0 78%; height:100%; display:flex; align-items:center; justify-content:center; opacity:.4; transition:opacity .35s ease; contain:paint; transform:translateZ(0) }
.stage .slide.on{ opacity:1 }
.stage .slide:hover{ text-decoration:none }
.stage .slide img{ width:100%; height:100%; object-fit:contain; object-position:left center; display:block; -webkit-user-drag:none; pointer-events:none }
/* strefy kliknięcia: lewa i prawa część sceny przesuwa o jedną pracę; środek otwiera pracę; na dotyku stref nie ma (przesuwa się palcem) */
.stage .zone{ position:absolute; top:0; bottom:0; width:30%; cursor:w-resize; z-index:2 }
.stage .zone.next{ right:0; cursor:e-resize }
.stage .zone.prev{ left:0 }
.stage.drag .zone{ cursor:grabbing }
@media (hover: none){ .stage .zone{ display:none } }
.dots{ display:flex; gap:6px; padding-top:4px; min-height:6px }
.dots i{ width:5px; height:5px; border-radius:50%; background:#d4d4d4; display:block }
.dots i.on{ background:var(--ink) }
.stage-tile .name{ margin-top:2px }

/* prace ze sklepu: równa wysokość, pełne proporcje, podpis */
.works{ display:flex; gap:clamp(12px, 1.5vw, 24px); align-items:flex-start; width:100% }
.works + .works{ margin-top:clamp(12px, 1.5vw, 24px) }
.works .cell{ min-width:0 }
.work a{ display:block }
.work a:hover{ text-decoration:none }
.work img{ width:100%; height:auto }
.label{ margin-top:10px; font-size:13px; line-height:1.45; color:var(--meta) }
.label .l1, .label .l2{ display:block }
.label .l1{ color:var(--ink) }
.label cite{ font-style:italic }
.work a:hover .l1{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }

/* pojedyncza aktualność */
.head{ display:grid; gap:18px; padding-block:var(--block) clamp(20px, 3vw, 40px); max-width:var(--col) }
.head .kicker{ color:var(--meta) }
.head h1.name{ font-size:clamp(32px, 3.4vw, 56px); max-width:16em }
.head .when{ display:flex; flex-wrap:wrap; gap:6px 24px; color:var(--meta) }
.head .when a{ color:var(--ink) }
.ms-single .hero{ padding-bottom:var(--block); max-width:var(--col) }
/* treść: jedna kolumna do lewej; tekst 36em, media do szerokości kolumny */
.ms-body{ display:grid; gap:1.1em; padding-bottom:var(--block); max-width:var(--col) }
.ms-body > *{ max-width:var(--text-w); margin:0 }
.ms-body > :is(.wp-block-gallery, .wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-media-text, .wp-block-columns, .works, .item, .wp-block-group, .wp-block-separator, .alignwide, .alignfull){ max-width:none; width:100% }
.ms-body > :is(.wp-block-gallery, .wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-media-text, .wp-block-columns, .works, .item){ padding-block:clamp(12px, 2vw, 28px) }
.ms-body > .item{ padding-block:clamp(12px, 2vw, 28px) }
.ms-body p{ font-size:clamp(16px, 1.2vw, 19px); line-height:1.55 }
.ms-body h2{ font-size:clamp(26px, 2.2vw, 36px); line-height:1.15; padding-top:.6em; text-wrap:balance }
.ms-body h3{ font-size:clamp(20px, 1.6vw, 26px); line-height:1.2; padding-top:.4em }
.ms-body ul, .ms-body ol{ font-size:clamp(16px, 1.2vw, 19px); line-height:1.55 }
.ms-body li + li{ margin-top:.3em }
/* obraz w treści: własne proporcje, nigdy nie rozciągany ponad plik, pionowy nie wyższy niż ekran */
.ms-body .wp-block-image img{ width:auto; max-width:100%; height:auto; max-height:65vh }
.ms-body .wp-block-image.alignleft, .ms-body .wp-block-image.alignright, .ms-body .wp-block-image.aligncenter{ float:none; margin:0 }
.ms-body figcaption{ margin-top:10px; font-size:13px; line-height:1.45; color:var(--meta); text-align:left }
.ms-body .wp-block-separator{ border:0; border-top:1px solid var(--line); width:80px; margin:.6em 0 }
.ms-body .wp-block-quote{ border:0; padding:0; margin:0; max-width:30em }
.ms-body .wp-block-quote p{ font-size:clamp(20px, 1.6vw, 28px); line-height:1.3; font-style:italic }
.ms-body .wp-block-quote cite{ display:block; margin-top:12px; font-size:15px; font-style:normal; color:var(--meta) }
.ms-body .wp-block-pullquote{ border:0; padding:clamp(12px, 2vw, 28px) 0; margin:0; text-align:left; max-width:34em }
.ms-body .wp-block-pullquote blockquote{ margin:0 }
.ms-body .wp-block-pullquote p{ font-size:clamp(24px, 2.4vw, 36px); line-height:1.2; font-style:italic; letter-spacing:-.01em }
.ms-body .wp-block-pullquote cite{ display:block; margin-top:14px; font-size:15px; font-style:normal; color:var(--meta); text-transform:none }
/* galeria: kadr 3:2, 2 kolumny domyślnie, 3 gdy ustawione */
.ms-body .wp-block-gallery.has-nested-images{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(12px, 1.5vw, 24px); margin:0 }
.ms-body .wp-block-gallery.has-nested-images.columns-1{ grid-template-columns:minmax(0,1fr) }
.ms-body .wp-block-gallery.has-nested-images.columns-3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.ms-body .wp-block-gallery.has-nested-images figure.wp-block-image:not(#ms){ width:100%; margin:0; display:block; padding:0 }
/* kadr 3:2 tylko gdy w bloku włączone „Przycinaj obrazy”; bez tego zdjęcia zachowują proporcje (dla reprodukcji prac) */
.ms-body .wp-block-gallery.has-nested-images figure.wp-block-image img{ width:100%; height:auto }
.ms-body .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image img{ aspect-ratio:3/2; object-fit:cover }
.ms-body .wp-block-gallery.has-nested-images:not(.is-cropped){ align-items:end }
.ms-body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{ position:static; background:none; color:var(--meta); padding:0; margin-top:10px; font-size:13px; text-shadow:none }
/* media-text: w jednej kolumnie, zdjęcie nad tekstem (z prawej = tekst nad zdjęciem) */
.ms-body .wp-block-media-text{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(18px, 2vw, 28px); align-items:start }
.ms-body .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{ order:2 }
.ms-body .wp-block-media-text__media{ grid-column:auto !important; grid-row:auto !important; align-self:start }
.ms-body .wp-block-media-text__content{ grid-column:auto !important; grid-row:auto !important; padding:0; display:grid; gap:18px; align-content:start; max-width:var(--text-w) }
.ms-body .wp-block-media-text__media img{ width:auto; max-width:100%; height:auto; max-height:65vh }
.ms-body .wp-block-columns{ display:flex; gap:var(--gap); align-items:flex-start; margin:0 }
.ms-body .wp-block-column{ min-width:0; flex:1 1 0; display:grid; gap:18px; align-content:start }
.ms-body .wp-block-column > *{ max-width:30em }
/* wideo 16:9 */
.ms-body .wp-block-video video{ width:100%; height:auto; aspect-ratio:16/9; background:#000; object-fit:contain }
.ms-body .wp-block-embed{ margin:0 }
.ms-body .wp-block-embed .wp-block-embed__wrapper{ position:relative; aspect-ratio:16/9; background:var(--field) }
.ms-body .wp-block-embed .wp-block-embed__wrapper::before{ display:none }
.ms-body .wp-block-embed .wp-block-embed__wrapper iframe{ position:absolute; inset:0; width:100%; height:100% }
.tail{ display:flex; flex-wrap:wrap; gap:12px 40px; padding-block:12px var(--block) }

/* archiwum: siatka kart, obrazy w całości na wspólnej dolnej linii */
.agrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(40px, 5vw, 80px) var(--sgap); padding-bottom:var(--block) }
.acard{ display:grid; gap:10px; align-content:start; min-width:0 }
.acard:hover{ text-decoration:none }
.acard .athumb{ display:flex; align-items:flex-end; height:clamp(200px, 20vw, 380px); margin-bottom:8px }
.acard .athumb img{ width:100%; height:100%; object-fit:contain; object-position:left bottom; display:block }
.ms-archive .head{ padding-bottom:clamp(16px, 2vw, 32px) }
/* archiwum w języku opowieści: wiersze bez wymuszonej wysokości ekranu, krótszy odstęp */
.archive-rows .flow{ gap:clamp(64px, 9vw, 140px) }
.archive-rows .srow{ min-height:0 }
.archive-rows .srow.no-media{ grid-template-columns:minmax(0, var(--col)) }
.archive-rows .stxt .aname{ font-size:clamp(24px, 2.2vw, 40px); line-height:1.1; font-weight:400; text-wrap:balance }
.archive-rows .stxt .aname a:hover{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }
.archive-rows .stxt .kicker{ color:var(--meta) }
.archive-rows .stxt .lede{ max-width:30em }
.acard .kicker{ color:var(--meta) }
.acard .when{ color:var(--meta) }
.acard .name{ font-size:clamp(20px, 1.6vw, 26px); line-height:1.2; text-wrap:balance }
.acard:hover .name{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }
@media (max-width: 900px){ .agrid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .ms-home #wizyta, .ms-wizyta .wz{ grid-template-columns:minmax(0,1fr) }
  .ms-home #wizyta .col{ order:2; height:auto; min-height:0 } .ms-home #wizyta .col .wp-block-spacer{ display:none }
  .wz-two, .wz-three, .wz-two-b, .wz-when{ grid-template-columns:minmax(0,1fr) }
  .wz-form{ padding-right:0 } .wz-3d{ padding-left:0; border-left:0; border-top:1px solid var(--line); margin-top:clamp(32px, 6vw, 56px); padding-top:24px } }
@media (max-width: 560px){ .agrid{ grid-template-columns:minmax(0,1fr) } .acard .athumb{ height:auto } .acard .athumb img{ width:100% } }
/* archiwum (starszy układ) */
.ms-archive .year{ padding-bottom:12px }
.pagination .nav-links{ display:flex; gap:32px; padding-block:24px }
.pagination .page-numbers{ font-size:16px; text-decoration:underline; text-underline-offset:.2em }
.pagination .page-numbers.current{ color:var(--meta); text-decoration:none }
.pagination h2.screen-reader-text{ display:none }

/* profil artysty: portret 4:5 nad nazwiskiem i biogramem */
/* strona artysty (1.6.22): neutralna, wyśrodkowany nagłówek, duża karuzela prac (ta sama mechanika co na stronie głównej), pod spodem prace i wyjście do sklepu */
.ms-artist .head.art-head{ max-width:none; justify-items:center; text-align:center; padding-bottom:clamp(10px, 1.5vw, 20px) }
.ms-artist .head.art-head .when{ justify-content:center }
.ms-artist .head.art-head .bio{ max-width:34em; font-size:clamp(16px, 1.2vw, 19px); line-height:1.55; text-align:left }
.art-stage{ max-width:min(100%, 1100px); margin:0 auto; padding-block:clamp(10px, 1.5vw, 20px) clamp(20px, 3vw, 40px) }
.art-stage .stage{ aspect-ratio:3/2 }
.art-stage .stage .slide{ flex-basis:72% }
.art-stage .stage .slide img{ object-position:center }
.art-stage .dots{ justify-content:center }
.art-more{ padding-top:clamp(10px, 1.5vw, 20px) }
.shopworks .works{ padding-block:clamp(10px, 1.5vw, 20px) }

/* stopka */
.foot{ margin-top:var(--block); padding-block:28px 48px; display:flex; flex-wrap:wrap; gap:8px 32px; color:var(--meta); font-size:14px }
.foot-brand{ margin-right:auto; color:var(--ink); display:flex; flex-wrap:wrap; gap:4px 16px }
.foot-addr, .foot-year{ color:var(--meta) }

@media (max-width: 900px){
  .frame-32.contain img, .ms-body .wp-block-image img, .ms-body .wp-block-media-text__media img{ max-height:60vh }
  /* telefon: snippet w pionie: nadtytuł, tytuł, praca, tekst, odnośniki */
  .now .hero, .now .hero.no-media{ grid-template-columns:minmax(0,1fr); gap:18px; min-height:0 }
  .now .hero .col{ height:auto; min-height:0; display:contents }
  .now .hero .col .top{ order:1 } .now .hero .media-link{ order:2 } .now .hero .col .bottom{ order:3; margin-top:0 }
  .now .hero .frame-32.contain img{ max-height:none; width:100% }
  .shop .sechead-row{ flex-wrap:wrap }
  /* telefon: opowieść w pionie: tekst, potem zdjęcia z podpisami pod każdym, bez sticky */
  .story-in{ grid-template-columns:minmax(0,1fr) }
  .story.open .story-in{ padding-top:32px }
  /* telefon: każdy wiersz w pionie: obraz, pod nim jego tekst; bez przyklejania */
  .story .flow{ gap:40px }
  .story .srow, .story .srow.side-l{ grid-template-columns:minmax(0,1fr); min-height:0; gap:16px }
  .story .srow .stxt{ position:static; order:2; max-width:none }
  .story .srow figure{ order:1 }
  .story .flow .box{ aspect-ratio:auto; max-height:none } .story .flow img{ height:auto; width:100%; object-fit:initial }
  /* telefon: tylko najnowszy wpis, zawsze rozwinięty: tytuł, zdjęcie, tekst, odnośniki; bez listy i przełączników */
  .rows .row:not(:first-child){ display:none }
  .rows{ display:block }
  .rows > .row{ flex:none }
  .rows .row summary{ grid-template-columns:minmax(0,1fr); row-gap:4px; pointer-events:none; padding-block:0 0 18px }
  .rows .row summary .when{ color:var(--meta) }
  .rows .row summary .tog, .rows .row[open] > summary .tog, .rows .row[open] > summary .thumb{ display:none }
  .rows .row[open] > summary{ display:grid; height:auto; position:static }
  .rows .row[open] > summary .name{ display:block }
  .rows > .row, .rows > .row[open], .rows > .row[open]:first-child{ padding-top:var(--block) !important }
  .rows .row .body, .rows .row .body.no-media{ grid-template-columns:minmax(0,1fr); padding-left:0; min-height:0 }
  .rows .row .body .col{ height:auto; min-height:0; order:2 }
  .rows .row .body .col .spacer, .rows .row .body .col .top{ display:none }
  .rows .row .body .media-link{ order:1 }
  .rows .row .body .text{ overflow:visible }
  .rows .row .body .text.clipped{ mask-image:none; -webkit-mask-image:none }
  .rowlink{ grid-template-columns:minmax(0,1fr); row-gap:2px }
  .tiles.cols-3, .tiles.cols-4{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .works{ flex-wrap:wrap }
  .works .cell{ flex:1 1 calc(50% - 12px) !important }
  .ms-body .wp-block-columns{ flex-wrap:wrap }
  .ms-body .wp-block-column{ flex:1 1 100% }
  .ms-body .wp-block-gallery.has-nested-images.columns-3{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width: 560px){
  .mastin{ padding:18px var(--gutter) 14px }
  .nav{ font-size:13.2px }
  .tiles.cols-2, .tiles.cols-3, .tiles.cols-4{ grid-template-columns:minmax(0,1fr); gap:28px }
  .works .cell{ flex:1 1 100% !important }
  .ms-body .wp-block-gallery.has-nested-images, .ms-body .wp-block-gallery.has-nested-images.columns-3{ grid-template-columns:minmax(0,1fr) }
}
@media (prefers-reduced-motion: reduce){ .mast{ transition:none } }

/* 19.10.2026: stała ramka 3:2 na całą szerokość kolumny (prawa krawędź równo z nagłówkiem). Zdjęcie przygotowane jako poziome 3:2 wypełnia
   ją co do piksela; praca o innych proporcjach stoi w niej cała, dosunięta do zewnętrznej krawędzi (prawej przy obrazie z prawej, lewej z lewej).
   Wielkość reguluje szerokość kolumny tekstu (--col-txt), nie wysokość okna. Blok Odwiedź: mniejszy kadr dosunięty do prawej. Telefon bez zmian. */
@media (min-width: 901px){
  :root{ --col-txt:clamp(18em, 31%, 36em) }
  /* kolumna zdjęcia = szerokość wiersza minus kolumna tekstu i odstęp (jednostki kontenera: .flow i .now są kontenerami);
     każdy poziomy obraz wypełnia ją co do piksela, wysokość z jego proporcji; pionowe i kwadratowe mają limit wysokości 4:5 szerokości kolumny (obrazy od 1,25:1 zawsze na całą szerokość) i stoją przy zewnętrznej krawędzi */
  .story .flow, .now{ container-type:inline-size }
  :is(.now, .story .flow){ --media-h:calc((100cqi - clamp(18em, 31cqi, 36em) - var(--sgap)) * 4 / 5) }
  :is(.hero, .story .flow) .frame-32:not(.contain){ width:100%; aspect-ratio:3/2 }
  :is(.hero, .story .flow) .frame-32.contain{ width:100%; aspect-ratio:auto; background:none; overflow:visible }
  :is(.hero, .story .flow) .frame-32.contain img{ display:block; width:100%; height:auto; max-height:var(--media-h); object-fit:contain; object-position:right top }
  .story .flow figure{ width:100% }
  .story .flow .box{ aspect-ratio:auto }
  .story .flow img{ display:block; width:100%; height:auto; max-height:var(--media-h); object-fit:contain; object-position:right top }
  .story .srow.side-l img, .story .srow.side-l .frame-32.contain img{ object-position:left top }
  .ms-home #wizyta{ --fit-h:min(calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 220px), 48svh) }
  .ms-home #wizyta .media .frame{ width:min(100%, calc(var(--fit-h) * 1.64)); margin-left:auto; aspect-ratio:auto; background:none }
  .ms-home #wizyta .media img{ width:100%; height:auto; max-height:none; object-fit:initial }
}
/* film w opowieści (wideo z biblioteki albo YouTube/Vimeo): odtwarzacz 16:9 na szerokość kolumny, nie wyższy niż obraz */
.story .flow .vid{ display:block; width:100% }
.story .flow .vid figure{ margin:0 }
.story .flow .vid :is(iframe, video){ display:block; width:100%; height:auto; aspect-ratio:16/9; border:0; background:#000 }
@media (min-width: 901px){ .story .flow .vid{ width:100% } }
/* menu na telefonie (1.6.28, 19.10.2026): pływający hamburger na dole na środku, wygląd 1:1 jak w sklepie (mu-plugin moneli-mobile-menu);
   pozycje Artyści, Sklep, Kontakt; odnośniki w nagłówku znikają, logo zostaje na środku */
@media (max-width: 900px){
  .nav-l, .nav-r{ display:none }
  .mastin{ grid-template-columns:1fr; justify-items:center }
  main.wrap{ padding-bottom:96px }
  .ms-hmenu{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 16px); transform:translateX(-50%); z-index:9997 }
  .ms-hmenu__btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 16px; border:2px solid #111; border-radius:999px; background:#111; color:#fff; cursor:pointer; font:inherit; box-shadow:0 6px 20px rgba(0,0,0,.22); -webkit-tap-highlight-color:transparent }
  .ms-hmenu__lines{ display:inline-flex; flex-direction:column; gap:4px }
  .ms-hmenu__lines span{ width:20px; height:2px; background:#fff; border-radius:2px; display:block }
  .ms-hmenu__panel{ position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); width:max-content; min-width:180px; max-width:calc(100vw - 32px); background:#fff; border:1px solid #e4e4e4; border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.20); padding:4px; display:none; text-align:center }
  .ms-hmenu.is-open .ms-hmenu__panel{ display:block }
  .ms-hmenu__item{ display:block; box-sizing:border-box; width:100%; padding:11px 22px; border:0; background:none; border-radius:9px; font:inherit; font-size:15px; line-height:1.2; color:#111; text-decoration:none; cursor:pointer; text-align:center }   /* pozycje na środku, panel zwarty (prośba 19.10.2026) */
  .ms-hmenu__item:active{ background:#f2f2f2 }
  .ms-hmenu__item small{ font-size:11px; margin-left:6px; color:var(--meta) }
  .ms-hmenu__btn:focus-visible{ outline:2px solid #111; outline-offset:3px }
}
@media (min-width: 901px){ .ms-hmenu{ display:none !important } }
/* telefon (1.6.29, 19.10.2026): sekcje są na całą szerokość, więc nadtytuły, tytuły sekcji, nagłówki stron i krótkie kolumny tekstu stoją
   na środku (prośba użytkownika). Dłuższe teksty wierszy aktualności i archiwum zostają do lewej, bo wyśrodkowane akapity źle się czyta. */
@media (max-width: 900px){
  .sechead, .shop .sechead-row, .more, .head, .now .hero .col .top, .now .hero .col .bottom, .ms-home #wizyta .col, .tail, .tile, .wz-form > .kicker, .wz-form > .name, .wz-3d{ text-align:center }
  .shop .sechead-row{ flex-direction:column; align-items:center; gap:10px }
  .head{ justify-items:center; max-width:none }
  .head h1.name{ max-width:none }
  .head .when{ justify-content:center }
  .now .hero .col .top, .now .hero .col .bottom{ justify-items:center }
  .now .hero .col .top .name, .now .hero .col .bottom .lede{ max-width:none }
  .ms-home #wizyta .col{ justify-items:center }
  .tile{ justify-items:center }
  .tile .dots{ justify-content:center }
  .art-stage .dots{ justify-content:center }
  .foot{ justify-content:center; text-align:center }
  .foot-brand{ margin-right:0; width:100%; justify-content:center }
}