:root {
  --ink: #111;
  --bg: #fff;
  --muted: #8c8c8c;
  --line: #e6e6e6;
  --pad: clamp(14px, 2vw, 30px);
  --stmt: clamp(16px, 1.5vw, 22px);
  --s: 1; /* scale of floating images; bigger on phones */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.35 "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, p, dl, dd, blockquote { margin: 0; }

/* ---------- fixed chrome (inverts over images) ---------- */
.hdr, .ftr {
  position: fixed;
  left: 0; right: 0;
  z-index: 30;
  padding: var(--pad);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.hdr a, .ftr a { pointer-events: auto; }
.hdr { top: 0; display: grid; grid-template-columns: auto auto 1fr minmax(0, 27rem); gap: 3vw; align-items: start; }
.hdr__logo { display: block; margin: -4px -1.5vw 0 0; }
.hdr__logo img { height: 46px; width: auto; }
.hdr__name { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hdr__tag { font-size: 10.5px; line-height: 1.3; padding-top: 2px; }
.hdr__stmt { font-size: var(--stmt); line-height: 1.12; letter-spacing: -.012em; }
.ftr { bottom: 0; display: flex; justify-content: space-between; align-items: end; font-size: 13px; }
.ftr nav { display: flex; gap: 18px; }
.ftr nav a { opacity: .55; transition: opacity .2s; }
.ftr nav a:hover, .ftr nav a[aria-current] { opacity: 1; }

/* ---------- shared ---------- */
.cta {
  font-size: clamp(22px, 2.3vw, 34px);
  letter-spacing: -.015em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
.cta:hover { text-decoration-thickness: 2px; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- home ---------- */
.hero {
  height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4.5vh;
}
/* last screen: portrait + CTA fill exactly one viewport, page ends here */
.finale {
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 13vh 0 calc(var(--pad) + 46px);
}
.finale .teaser { padding: 0 var(--pad); align-items: center; min-height: 0; }
.finale .portrait { max-height: 62vh; width: auto; justify-self: start; }
.outro { display: grid; place-items: center; }
.thumbs { display: flex; gap: 1.6vw; align-items: flex-start; }
.thumbs a { display: block; will-change: transform; }
.thumbs img { height: calc(6.4vw * var(--s)); width: auto; }
.thumbs a:nth-child(2) { margin-top: 1.2vw; }
.thumbs a:nth-child(4) { margin-top: -.4vw; }

.scatter { position: relative; overflow-x: clip; margin: 14vh 0 4vh; }
.sc {
  position: absolute;
  z-index: 1;
  width: calc(var(--w) * var(--s));
  will-change: transform;
}
.sc img { width: 100%; height: auto; }
.sc span, .card span {
  position: absolute; left: 0; top: calc(100% + 6px);
  font-size: 11px; white-space: nowrap;
  opacity: 0; transition: opacity .25s;
}
.sc:hover span { opacity: 1; }

/* ---------- work index ---------- */
.work { padding: 30vh var(--pad) 22vh; }
.filters { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 4vh; font-size: 13px; color: var(--muted); }
.filters a[aria-current], .filters a:hover { color: var(--ink); }
.filters sup { font-size: 9px; margin-left: 2px; }
.w-list { border-bottom: 1px solid var(--line); }
.w-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) 15rem 7rem;
  align-items: baseline;
  gap: 2vw;
  padding: 1.1vw 0 1.3vw;
  border-top: 1px solid var(--line);
  transition: opacity .3s;
}
.w-list:hover .w-row:not(:hover) { opacity: .22; }
.w-n, .w-c, .w-y { font-size: 12px; color: var(--muted); }
.w-y { text-align: right; }
.w-t { font-size: clamp(26px, 4.4vw, 70px); line-height: 1; letter-spacing: -.03em; }
.w-th { display: none; }
.w-prev {
  position: fixed; left: 0; top: 0; z-index: 10;
  width: 24vw; height: auto;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .25s, transform .35s;
}
.w-prev { max-height: 40vh; width: auto; max-width: 24vw; }
.w-prev.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- project ---------- */
.pj { padding: 30vh var(--pad) 0; }
.pj-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 3vw; margin-bottom: 14vh; }
.pj-title { font-size: clamp(30px, 3.6vw, 56px); font-weight: 400; line-height: 1; letter-spacing: -.03em; margin-bottom: 4vh; }
.pj-meta { display: grid; grid-template-columns: 7.5rem 1fr; gap: 5px 12px; font-size: 12px; }
.pj-meta dt { color: var(--muted); }
.pj-lead { font-size: var(--stmt); line-height: 1.18; letter-spacing: -.01em; max-width: 34ch; }

.pj-text { max-width: 34ch; font-size: 14px; line-height: 1.45; margin: 12vh 0 8vh; }
.pj-text.l { margin-left: 8.33%; }
.pj-text.r { margin-left: 58.33%; }
.pj-quote { font-size: clamp(20px, 2vw, 30px); line-height: 1.15; letter-spacing: -.015em; max-width: 26ch; margin: 14vh 0 10vh 41.66%; }

.pj-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2vw; margin-bottom: 7vh; align-items: start; }
.pj-row figure { margin: 0; }
.pj-row img { width: 100%; height: auto; cursor: zoom-in; background: #f3f3f3; }
.pj-row img[src$=".png"] { background: none; }
.pj-row figcaption { margin-top: 6px; font-size: 11px; color: var(--muted); }

.next {
  display: grid; place-content: center; justify-items: center; gap: 3vh;
  height: 90vh; text-align: center;
}
.next small { font-size: 12px; color: var(--muted); }
.next img { height: 9vw; width: auto; }
.next .cta { font-size: clamp(15px, 1.2vw, 18px); text-underline-offset: 3px; }
.next { height: 60vh; gap: 2vh; }

/* ---------- portrait + teaser ---------- */
.portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.portrait--ph {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(0,0,0,.05) 11px 12px),
    #f4f4f2;
  outline: 1px dashed #c9c9c6;
  outline-offset: -1px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
}
.portrait--ph small { font-size: 10.5px; opacity: .8; }

.teaser {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2vw;
  align-items: end;
  padding: 14vh var(--pad) 10vh;
}
.teaser .portrait { grid-column: 2 / 5; }
.teaser__text { grid-column: 6 / 11; display: grid; gap: 4vh; justify-items: start; }
.teaser__label { font-size: 12px; color: var(--muted); }
.teaser__lead { font-size: clamp(22px, 2.5vw, 38px); line-height: 1.1; letter-spacing: -.02em; max-width: 22ch; }

/* ---------- about ---------- */
.about { padding: 30vh var(--pad) 18vh; }
.about__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2vw; align-items: start; }
.about__portrait { grid-column: 1 / 4; }
.about__bio { grid-column: 5 / 12; font-size: clamp(20px, 2vw, 30px); line-height: 1.15; letter-spacing: -.015em; max-width: 34ch; }
.about__bio p + p { margin-top: .8em; }

.about__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2vw;
  margin: 18vh 0 0; padding-top: 2vh; border-top: 1px solid var(--line);
}
.about__stats dt { font-size: clamp(44px, 6vw, 96px); line-height: 1; letter-spacing: -.04em; }
.about__stats dd { margin-top: 10px; font-size: 12px; color: var(--muted); max-width: 18ch; }

.about__h { font-size: 12px; font-weight: 400; color: var(--muted); margin-bottom: 4vh; }
.about__approach { margin-top: 18vh; }
.about__approach ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2vw; padding: 0; margin: 0; list-style: none; }
.about__approach li { border-top: 1px solid var(--ink); padding-top: 14px; }
.about__num { font-size: 11px; color: var(--muted); }
.about__approach h3 { font-size: clamp(18px, 1.6vw, 24px); font-weight: 400; letter-spacing: -.01em; margin: 3vh 0 1.5vh; }
.about__approach p { font-size: 13.5px; line-height: 1.45; max-width: 36ch; color: #444; }

.about__exp { margin-top: 18vh; }
.exp {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr);
  gap: 2vw;
  padding: 2.4vh 0 2.8vh;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.exp:last-child { border-bottom: 1px solid var(--line); }
.exp__when { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.exp__role { font-size: clamp(18px, 1.6vw, 24px); font-weight: 400; letter-spacing: -.01em; line-height: 1.15; }
.exp__role span { display: block; color: var(--muted); }
.exp__desc { font-size: 13px; line-height: 1.45; color: #444; max-width: 52ch; }
.about__lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6vh 2vw; margin-top: 18vh; font-size: 12.5px; }
.about__lists h2 { font-size: 12px; font-weight: 400; color: var(--muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.about__lists ul { padding: 0; margin: 0; list-style: none; }
.about__lists li { margin-bottom: 5px; }
.about__cta { display: grid; justify-items: center; gap: 3vh; margin-top: 22vh; text-align: center; }

.contact { height: 100vh; display: grid; place-content: center; justify-items: center; gap: 4vh; text-align: center; }
.contact .cta { font-size: clamp(24px, 4.2vw, 64px); white-space: normal; word-break: break-word; }
.contact ul { display: flex; gap: 20px; padding: 0; margin: 0; list-style: none; font-size: 13px; color: var(--muted); }

/* ---------- lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; grid-template-rows: 1fr auto;
  padding: 6vh 4vw 3vh;
  background: rgba(255,255,255,.97);
  cursor: zoom-out;
}
.lb[hidden] { display: none; }
.lb img { max-height: 84vh; width: auto; object-fit: contain; }
.lb p { font-size: 12px; color: var(--muted); min-height: 1.3em; padding-top: 10px; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  :root { --s: 2.1; --stmt: 15px; }
  .hdr { grid-template-columns: auto 1fr; gap: 8px 14px; }
  .hdr__logo img { height: 38px; }
  .hdr__tag { display: none; }
  .hdr__stmt { grid-column: 1 / -1; max-width: 30ch; }
  .ftr { font-size: 12px; }
  .ftr nav { gap: 12px; }
  .thumbs { gap: 3vw; }
  .work, .pj, .about { padding-top: 26vh; }
  .w-row { grid-template-columns: 2.2rem 1fr auto; gap: 10px; padding: 14px 0; }
  .w-c { display: none; }
  .w-th { display: block; grid-column: 2 / -1; width: auto; max-width: 46%; max-height: 34vh; margin-top: 8px; }
  .w-prev { display: none; }
  .pj-head { grid-template-columns: 1fr; gap: 6vh; }
  .pj-text.l, .pj-text.r, .pj-quote { margin-left: 0; }
  .pj-row { grid-template-columns: 1fr; gap: 14px; }
  .pj-row figure { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .pj-row figure:nth-child(even) { width: 78%; margin-left: auto !important; }
  .next img { height: 24vw; }
  .teaser { grid-template-columns: 1fr; gap: 5vh; padding: 10vh var(--pad) 16vh; }
  .teaser .portrait, .teaser__text { grid-column: 1 / -1; }
  .teaser .portrait { width: 70%; }
  .finale { height: auto; padding: 8vh 0 calc(var(--pad) + 40px); gap: 8vh; }
  .finale .portrait { max-height: none; width: 70%; }
  .about__intro { grid-template-columns: 1fr; gap: 5vh; }
  .about__portrait, .about__bio { grid-column: 1 / -1; }
  .about__portrait { width: 70%; }
  .about__stats { grid-template-columns: 1fr 1fr; gap: 5vh 4vw; margin-top: 10vh; }
  .about__approach, .about__lists { margin-top: 12vh; }
  .about__approach ol, .about__lists { grid-template-columns: 1fr; gap: 5vh; }
  .about__exp { margin-top: 12vh; }
  .exp { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- hero: gentle motion + scroll hint ---------- */
.hero { position: relative; }
.thumbs img { animation: drift 5.5s ease-in-out infinite; }
.thumbs a:nth-child(2) img { animation-delay: -1.4s; animation-duration: 6.2s; }
.thumbs a:nth-child(3) img { animation-delay: -2.8s; animation-duration: 5s; }
.thumbs a:nth-child(4) img { animation-delay: -4.1s; animation-duration: 6.8s; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.scroll-hint {
  position: absolute; left: 50%; bottom: 11vh; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 4px;
  font-size: 12px; color: var(--muted);
  transition: opacity .4s;
}
.scroll-hint i { font-style: normal; font-size: 16px; animation: nudge 1.6s ease-in-out infinite; }
.scroll-hint.gone { opacity: 0; pointer-events: none; }
@keyframes nudge { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(7px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .thumbs img, .scroll-hint i { animation: none; } }

/* hero thumbnails: caption on hover */
.thumbs a { position: relative; }
.thumbs span {
  position: absolute; left: 0; top: calc(100% + 8px);
  font-size: 11px; white-space: nowrap;
  opacity: 0; transform: translateY(-3px); transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.thumbs a:hover span, .thumbs a:focus-visible span { opacity: 1; transform: none; }

.sc--back { z-index: 0; }

/* ---------- project told room by room (.lj) — layout copied from the REWIR Studio project page ---------- */
.lj {
  --gutter: var(--pad); --fg: var(--ink); --soft: #f3f3f0; --line: #e4e4df;
  --fs-s: 11px; --fs-m: 20px; --fs-l: 34px; --head: 110px; --logo-h: 72px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  padding: 22vh 0 0;
}
.lj figure { margin: 0; }
.lj .muted { color: var(--muted); }
.lj .small { font-size: var(--fs-s); }
.lj .label { display: inline-flex; align-items: center; gap: .55em; font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .08em; }
.lj .plus { position: relative; display: inline-block; width: 9px; height: 9px; flex: none; transition: transform .5s var(--ease); }
.lj .plus::before, .lj .plus::after { content: ""; position: absolute; background: currentColor; }
.lj .plus::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.lj .plus::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.lj .fade-up { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.lj .fade-up.in { opacity: 1; transform: none; }

/* metryczka + opowieść */
.lj .p-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 0 var(--gutter) 140px; }
.lj .p-intro-side { grid-column: 1 / 5; }
.lj .p-meta { display: flex; flex-direction: column; font-size: 12px; }
.lj .p-meta div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.lj .p-meta div:last-child { border-bottom: 1px solid var(--line); }
.lj .p-meta dt { color: var(--muted); }
.lj .p-meta dd { margin: 0; }
.lj .p-story { grid-column: 6 / 12; display: flex; flex-direction: column; gap: 20px; font-size: var(--fs-m); line-height: 1.3; }
.lj .p-lead { font-size: var(--fs-l); line-height: 1.12; letter-spacing: -.02em; }

/* ścieżka zwiedzania: sala po sali — tekst przyklejony po lewej, obrazy po prawej */
.lj .g-frame { overflow: hidden; background: var(--soft); position: relative; }
.lj .p-chapters { padding: 0 var(--gutter) 160px; }
.lj .p-chapters > .label { margin-bottom: 28px; }
.lj .p-chapter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 28px 0 120px; border-top: 1px solid var(--fg); }
.lj .p-chapter-text { grid-column: 1 / 5; align-self: start; position: sticky; top: var(--head); display: flex; flex-direction: column; gap: 14px; padding-right: var(--gutter); }
.lj .p-chapter-num { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--fg); border-radius: 50%; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.lj .p-chapter-text h3 { margin: 0; font-size: var(--fs-l); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }
.lj .p-chapter-text p:last-child { color: var(--muted); line-height: 1.45; max-width: 46ch; }
.lj .p-chapter-media { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 56px; }
.lj .p-chapter-media .g-wide { grid-column: 1 / -1; }
.lj .p-chapter-media .g-wide .g-frame { aspect-ratio: 16 / 9; }
.lj .p-chapter-media .g-left { grid-column: 1 / 5; }
.lj .p-chapter-media .g-right { grid-column: 5 / 9; margin-top: 10vh; }
.lj .p-chapter-media .g-left .g-frame, .lj .p-chapter-media .g-right .g-frame { aspect-ratio: 16 / 10; }
.lj .p-chapter-media .g-frame img { position: absolute; left: 0; top: -18%; width: 100%; height: 136%; max-width: none; object-fit: cover; will-change: transform; }
.lj .p-drawing { display: flex; flex-direction: column; gap: 10px; grid-column: 1 / -1; }
.lj .p-drawing img { width: 100%; height: auto; mix-blend-mode: multiply; }

/* plansze identyfikacji: przyklejony ekran, przewijanie przesuwa plansze w bok */
.lj .p-boards { height: calc(100vh + var(--n) * 70vh); }
.lj .p-boards-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; gap: 20px; padding: var(--head) 0 calc(var(--logo-h) + var(--gutter) * 1.5); }
.lj .p-boards-head { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--gutter); }
.lj .p-boards-head .muted { font-variant-numeric: tabular-nums; }
.lj .p-boards-track { flex: 1; min-height: 0; display: flex; align-items: center; gap: 4vw; padding: 0 var(--gutter); width: max-content; will-change: transform; }
.lj .p-board { height: min(100%, calc((100vw - 2 * var(--gutter)) * 1980 / 2800)); aspect-ratio: 2800 / 1980; }
.lj .p-board img { width: 100%; height: 100%; max-width: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 40px -24px rgba(0, 0, 0, .3); }

/* kadry: trzy kolumny, każda przesuwa się z inną prędkością */
.lj .p-frames { padding: 0 var(--gutter) 200px; }
.lj .p-frames > .label { margin-bottom: 28px; }
.lj .p-frames-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.lj .p-frames-col { display: flex; flex-direction: column; gap: var(--gutter); }
.lj .p-frames-col:nth-child(2) { margin-top: 14vh; }
.lj .p-frames-col:nth-child(3) { margin-top: 6vh; }
.lj .p-frames img { width: 100%; height: auto; background: var(--soft); }
.lj .g-credit { text-align: right; margin-top: 18px; }

/* plan wystawy: pionowa zakładka przy prawej krawędzi, wysuwa panel z rzutem */
.lj .plan-tab {
  position: fixed; right: 0; top: 50%; z-index: 70; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: inherit;
  height: 168px; justify-content: center; padding: 14px 10px; background: var(--fg); color: var(--bg); font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .08em;
  writing-mode: vertical-rl; transform: translate(100%, -50%); transition: transform .5s var(--ease);
}
.lj .plan-tab .plus { width: 9px; height: 9px; }
.lj .plan-tab.on, .lj .plan-tab[aria-expanded="true"] { transform: translate(0, -50%); }
.lj .plan-tab[aria-expanded="true"] .plus { transform: rotate(45deg); }
.lj .plan-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(92vw, 1140px); padding: var(--gutter); padding-right: calc(var(--gutter) + 44px); background: var(--bg); box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; gap: 20px; overflow: auto; transform: translateX(calc(100% + 40px)); transition: transform .6s var(--ease);
}
.lj .plan-drawer.open { transform: none; }
.lj .plan-drawer[hidden] { display: flex !important; visibility: hidden; }
.lj .plan-drawer.open[hidden] { visibility: visible; }
.lj .plan-drawer figure { display: flex; flex-direction: column; gap: 10px; }
.lj .plan-drawer img { width: 100%; height: auto; }

/* galeria: zdjęcia w różnych skalach z paralaksą, szkic i teksty między nimi */
.lj .p-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 96px; padding: 0 var(--gutter) 160px; }
.lj .p-gallery .g-frame img, .lj .p-gallery .g-frame video { display: block; width: 100%; height: 116%; max-width: none; margin-top: -8%; object-fit: cover; will-change: transform; }
.lj .p-gallery .g-wide { grid-column: 1 / -1; }
.lj .p-gallery .g-wide .g-frame { aspect-ratio: 21 / 9; }
.lj .p-gallery .g-left { grid-column: 1 / 7; }
.lj .p-gallery .g-left .g-frame { aspect-ratio: 4 / 3; }
.lj .p-gallery .g-right { grid-column: 8 / 12; margin-top: 18vh; }
.lj .p-gallery .g-right .g-frame { aspect-ratio: 4 / 5; }
.lj .p-gallery .g-credit { grid-column: 1 / -1; justify-self: end; margin-top: -72px; }
.lj .g-text { grid-column: 6 / 11; align-self: center; display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-m); line-height: 1.3; }
.lj .g-text-right { grid-column: 2 / 7; }
.lj .g-sketch { grid-column: 1 / 5; align-self: center; display: flex; flex-direction: column; gap: 8px; }
.lj .g-sketch img { width: 100%; height: auto; mix-blend-mode: multiply; }

/* wideo: jeden duży kadr */
.lj .p-video { padding: 0 var(--gutter) 140px; }
.lj .p-video > .label { margin-bottom: 28px; }
.lj .p-video figure { display: flex; flex-direction: column; gap: 10px; }
.lj .p-video .g-frame { aspect-ratio: 16 / 9; background: #000; }
.lj .p-video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* proces: jedna klatka, przewijanie zmienia obraz */
.lj .p-process { height: 320vh; }
.lj .p-process-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; gap: 14px; padding: var(--head) var(--gutter) calc(var(--gutter) * 3); }
.lj .p-process-head { display: flex; justify-content: space-between; align-items: center; }
.lj .p-process-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.lj .p-process-frame { position: relative; flex: 1; overflow: hidden; background: var(--soft); }
.lj .p-process-frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.lj .p-process-frame img.on { opacity: 1; }
.lj .p-process-caption { color: var(--muted); max-width: 60ch; min-height: 1.4em; }

/* twórcy */
.lj .p-credits { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 140px var(--gutter); }
.lj .p-credits .label { grid-column: 1 / 4; padding-top: 10px; align-self: start; }
.lj .p-credits dl { grid-column: 4 / 12; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
.lj .p-credits dl div { padding: 10px 0; border-top: 1px solid var(--line); }
.lj .p-credits dt { color: var(--muted); font-size: var(--fs-s); }
.lj .p-credits dd { font-size: var(--fs-m); margin: 2px 0 0; }

@media (max-width: 800px) {
  .lj { --fs-m: 17px; padding-top: 18vh; }
  .lj .p-intro-side, .lj .p-story { grid-column: 1 / -1; }
  .lj .p-story { margin-top: 48px; }
  .lj .p-lead { font-size: 24px; }
  .lj .p-boards { height: calc(100vh + var(--n) * 50vh); }
  .lj .p-chapter { padding-bottom: 72px; }
  .lj .p-chapter-text { grid-column: 1 / -1; position: static; padding: 0 0 28px; }
  .lj .p-chapter-media { grid-column: 1 / -1; grid-template-columns: 1fr; row-gap: 20px; }
  .lj .p-chapter-media .g-left, .lj .p-chapter-media .g-right { grid-column: 1 / -1; margin-top: 0; }
  .lj .p-frames-grid { grid-template-columns: 1fr; }
  .lj .p-frames-col:nth-child(n) { margin-top: 0; }
  .lj .p-frames-col img:nth-child(n+3), .lj .p-frames-col:nth-child(3) { display: none; }
  .lj .p-gallery { row-gap: 56px; }
  .lj .p-gallery .g-left, .lj .p-gallery .g-right, .lj .g-text, .lj .g-text-right, .lj .g-sketch { grid-column: 1 / -1; margin-top: 0; }
  .lj .p-gallery .g-wide .g-frame { aspect-ratio: 4 / 3; }
  .lj .p-process { height: 260vh; }
  .lj .p-credits .label, .lj .p-credits dl { grid-column: 1 / -1; }
  .lj .p-credits dl { grid-template-columns: 1fr; margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .lj .fade-up { opacity: 1; transform: none; } }