/* Portfolio Vanity — kierunek A (Spis). Marka V-0038: NHG, Instrument Serif, tekst #000, linie 1 px, promień 20 px. */
@font-face { font-family: "Vanity Display"; font-weight: 400; src: local("NHaasGroteskDSPro-45Lt"); }
@font-face { font-family: "Vanity Display"; font-weight: 500; src: local("NHaasGroteskDSPro-55Rg"); }
@font-face { font-family: "Vanity Display"; font-weight: 600; src: local("NHaasGroteskDSPro-65Md"); }
@font-face { font-family: "Vanity Display"; font-weight: 700; src: local("NHaasGroteskDSPro-75Bd"); }
:root {
  --u: calc(100vw / 2000); --pad: 114; --top: 64; --ix-h1: 96; --ix-nm: 84; --ix-note: 20; --ix-notew: 620;
  --fd: "Vanity Display", "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs: "Instrument Serif", Georgia, serif;
  --grad: linear-gradient(180deg, #ff4425, #991630);
  color-scheme: light;
}
* { box-sizing: border-box }
html, body { margin: 0; background: #fff; color: #000 }
body { font-family: var(--fd); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
a { color: inherit; text-decoration: none }
:focus-visible { outline: 2px solid #000; outline-offset: 4px }
.nav :focus-visible { outline-color: #fff }
.grain { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; image-rendering: pixelated }
.arr { width: 1.05em; height: 1.05em; flex: 0 0 auto; transition: transform .3s }
a:hover > .arr, a:hover .arr { transform: translate(2px, -2px) }

/* menu */
.nav { position: fixed; left: calc(var(--pad) * var(--u)); top: calc(var(--top) * var(--u)); z-index: 6; display: flex; align-items: center; gap: max(18px, calc(40 * var(--u)));
  background: #000; color: #fff; border-radius: 999px; padding: max(6px, calc(8 * var(--u))) max(6px, calc(8 * var(--u))) max(6px, calc(8 * var(--u))) max(20px, calc(28 * var(--u))) }
.nav .logo svg { height: max(22px, calc(30 * var(--u))); width: auto; display: block; margin-right: max(4px, calc(8 * var(--u))) }
.nav .lk { font: 600 max(14px, calc(18 * var(--u)))/1 var(--fd); padding: 10px 0 }
.nav .cta { position: relative; display: inline-flex; align-items: center; gap: 12px; background: #fff; color: #000; border-radius: 999px; height: max(42px, calc(54 * var(--u))); padding: 0 max(18px, calc(22 * var(--u))) 0 max(20px, calc(26 * var(--u))); font: 600 max(14px, calc(18 * var(--u)))/1 var(--fd); white-space: nowrap }

/* typografia */
.wrap { position: relative; z-index: 2; padding: max(110px, calc(200 * var(--u))) calc(var(--pad) * var(--u)) max(80px, calc(160 * var(--u))) }
.cap { display: block; font: 700 max(11px, calc(13 * var(--u)))/1.3 var(--fd); letter-spacing: .1em; text-transform: uppercase; margin: 0 }
.cap55 { font: 500 max(11px, calc(13 * var(--u)))/1.35 var(--fd); letter-spacing: .04em; text-transform: uppercase; margin: 0 }
.h1 { font: 600 max(40px, calc(var(--ix-h1) * var(--u)))/1 var(--fd); margin: 0 }
.h1 span { display: block; font-weight: 400; font-size: .7em; line-height: 1.12; margin-top: .16em }
.txt { font: 500 max(15px, calc(20 * var(--u)))/1.45 var(--fd); margin: 0 }
.sf { display: block; font: 400 max(40px, calc(110 * var(--u)))/1 var(--fs) }

/* lista */
.head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: max(40px, calc(80 * var(--u))) }
.note { max-width: calc(var(--ix-notew) * var(--u)); font-size: max(15px, calc(var(--ix-note) * var(--u))) }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #000 }
.row { display: grid; grid-template-columns: calc(300 * var(--u)) 1fr calc(380 * var(--u)) 20px; align-items: center; gap: 20px; padding: calc(26 * var(--u)) 0; border-bottom: 1px solid #000 }
.row .nm { font: 400 max(34px, calc(var(--ix-nm) * var(--u)))/1 var(--fs); transition: transform .5s cubic-bezier(.2,.7,.2,1) }
.row:hover .nm, .row:focus-visible .nm { transform: translateX(calc(24 * var(--u))) }
.row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); transform: scale(0); transition: transform .3s }
.row:hover .dot, .row:focus-visible .dot { transform: scale(1) }
.prev { position: fixed; z-index: 5; left: 0; top: 0; width: calc(380 * var(--u)); aspect-ratio: 1; border-radius: 20px; overflow: hidden; pointer-events: none; opacity: 0; transform: scale(.8) }
.prev.is-glass { overflow: visible; border-radius: 0 }
.glass-cv { position: absolute; left: -7%; top: -7%; width: 114%; height: 114% }
.prev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0 }

/* projekt */
.proj { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; gap: calc(110 * var(--u)) }
.side { position: sticky; top: max(110px, calc(200 * var(--u))); align-self: start; display: flex; flex-direction: column; gap: max(16px, calc(26 * var(--u))) }
.back { display: inline-flex; align-items: center; gap: 10px; font: 600 max(14px, calc(17 * var(--u)))/1 var(--fd); width: max-content }
.meta { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; align-items: baseline; padding: 18px 0; border-top: 1px solid #000; border-bottom: 1px solid #000 }
.imgs { display: flex; flex-direction: column; gap: max(10px, calc(20 * var(--u))) }
.ph { display: block; border-radius: 20px; overflow: hidden; background: #f5f5f5 }
.ph img { width: 100%; height: auto; display: block }
.vid { aspect-ratio: 16 / 9; background: #000 }
.vid iframe { width: 100%; height: 100%; border: 0; display: block }
/* kolaż z Figma Site: kawałki na białym tle składają się w jeden pas, bez kart i odstępów */
.imgs.stack { gap: 0 }
.imgs.stack .ph { border-radius: 0; background: none }
/* film strony Vanity w ekranie iMaca (ekran w 01.webp: x 25–908, y 23–520 z 934×788) */
.device { padding: 9% 9% 7% }
.imac { position: relative }
.imac > img { width: 100%; height: auto; display: block }
.imac .scr { position: absolute; left: 2.677%; top: 2.919%; width: 94.647%; height: 63.198%; background: #000; overflow: hidden }
.imac .scr iframe { width: 100%; height: 100%; border: 0; display: block }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: max(28px, calc(48 * var(--u))) max(10px, calc(20 * var(--u))) }
.tile { margin: 0 }
.tile .mk { aspect-ratio: 4 / 3; border-radius: 20px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; padding: 12% }
.tile .mk img { width: 64%; height: 46%; object-fit: contain; mix-blend-mode: multiply }
.tile .mk .vlogo { width: 46%; height: auto; color: #000 }
.tile .wm { font: 700 max(28px, calc(56 * var(--u)))/1 var(--fd); letter-spacing: .02em }
.tile figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 2px 0; font: 600 max(15px, calc(18 * var(--u)))/1.2 var(--fd) }
.tile figcaption .cap55 { text-align: right }
.next { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: max(60px, calc(140 * var(--u))); padding-top: max(24px, calc(40 * var(--u))); border-top: 1px solid #000 }
.next > .cap { display: inline-flex; align-items: center; gap: 10px }
.next:hover .sf { transform: translateX(calc(16 * var(--u))) }
.next .sf { transition: transform .5s cubic-bezier(.2,.7,.2,1); margin-top: 8px }

@media (max-width: 760px) {
  .nav { left: 16px; top: 16px; gap: 16px; padding-right: 20px } .nav .cta { display: none }
  .wrap { padding: 96px 16px 64px }
  .head { display: block } .note { margin-top: 16px }
  .row { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 0 } .row > .cap55 { display: none } .row > .t { display: block; grid-column: 1 / -1 }
  .proj { display: block } .side { position: static; margin-bottom: 28px }
  .tiles { grid-template-columns: 1fr }
  .next { flex-direction: column; align-items: start }
}
@media (hover: none) { .prev { display: none } }

/* Przejście Cube między stronami portfolio (spis ↔ projekty, projekt ↔ projekt): strona obraca się jak ściana sześcianu.
   View Transitions między dokumentami (Chrome 126+, Safari 18.2+); inne przeglądarki przechodzą zwyczajnie. Menu i ziarno stoją. */
@view-transition { navigation: auto }
.nav { view-transition-name: nav }
.grain { view-transition-name: grain }
::view-transition-group(root) { animation-duration: .9s; animation-timing-function: cubic-bezier(.65, 0, .35, 1) }
::view-transition-image-pair(root) { isolation: auto }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .9s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); backface-visibility: hidden; mix-blend-mode: normal }
::view-transition-old(root) { transform-origin: 100% 50%; animation-name: cube-out }
::view-transition-new(root) { transform-origin: 0 50%; animation-name: cube-in }
html:active-view-transition-type(back)::view-transition-old(root) { transform-origin: 0 50%; animation-name: cube-out-back }
html:active-view-transition-type(back)::view-transition-new(root) { transform-origin: 100% 50%; animation-name: cube-in-back }
@keyframes cube-out { to { transform: perspective(1800px) translateX(-100%) rotateY(-90deg); filter: brightness(.7) } }
@keyframes cube-in { from { transform: perspective(1800px) translateX(100%) rotateY(90deg); filter: brightness(.7) } }
@keyframes cube-out-back { to { transform: perspective(1800px) translateX(100%) rotateY(90deg); filter: brightness(.7) } }
@keyframes cube-in-back { from { transform: perspective(1800px) translateX(-100%) rotateY(-90deg); filter: brightness(.7) } }
::view-transition-group(nav), ::view-transition-group(grain) { animation: none }
::view-transition-old(nav), ::view-transition-old(grain) { display: none }
::view-transition-new(nav), ::view-transition-new(grain) { animation: none }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none } }

/* ---------- strony projektów v2: treść 1:1 z vanity.figma.site (13.11.2026) ----------
   Wymiary w px oryginału przy oknie 1440 (--k = 1 px oryginału). Suwaki ?adjust zmieniają zmienne --pf-*. */
:root { --k: calc(100vw / 1440); --pf-pad: 123; --pf-top: 178; --pf-media: 900; --pf-gap: 40; --pf-side: 254;
  --pf-fs: 14; --pf-row: 34; --pf-lab: 81; --pf-back: 14; --pf-tl: 10; --pf-next: 48; --pf-nextl: 12;
  --pf-ff: var(--fd) }
.pf { position: relative; z-index: 2; padding: max(110px, calc(var(--pf-top) * var(--k))) calc(var(--pf-pad) * var(--k)) max(64px, calc(120 * var(--k))) }
.pf-grid { display: grid; grid-template-columns: calc(var(--pf-media) * var(--k)) minmax(0, calc(var(--pf-side) * var(--k))); gap: calc(var(--pf-gap) * var(--k)); align-items: start }
.pf-media { display: flex; flex-direction: column; gap: 0; min-width: 0 }
.pf-media > img { display: block; width: 100%; height: auto }
.pf-side { position: sticky; top: max(110px, calc(var(--pf-top) * var(--k))); padding-top: calc(20 * var(--k)); font-family: var(--pf-ff); font-size: max(13px, calc(var(--pf-fs) * var(--k))); letter-spacing: 0; line-height: 1.35; color: #000 }
.pf-back { display: inline-block; font-weight: 400; font-size: max(12px, calc(var(--pf-back) * var(--k))); margin-top: calc(28 * var(--k)); opacity: .55; transition: opacity .2s }
.pf-back:hover { opacity: 1 }
.pf-meta { display: grid; grid-template-columns: calc(var(--pf-lab) * var(--k)) 1fr; margin: 0; row-gap: 0 }
.pf-meta dt { font-weight: 400; min-height: calc(var(--pf-row) * var(--k)) }
.pf-meta dd { margin: 0; font-weight: 600; min-height: calc(var(--pf-row) * var(--k)) }
.pf-meta .pf-opis { grid-column: 1 / -1; min-height: calc((var(--pf-row) + 4) * var(--k)) }
.pf-desc p { margin: 0; font-weight: 600 }
.pf-next { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: max(48px, calc(96 * var(--k))); padding-top: max(18px, calc(28 * var(--k))); border-top: 1px solid #000; font-family: var(--pf-ff) }
.pf-next-l { font-size: max(11px, calc(var(--pf-nextl) * var(--k))); font-weight: 600; letter-spacing: .06em; text-transform: uppercase }
.pf-next-n { display: inline-flex; align-items: center; gap: .3em; font: 400 max(30px, calc(var(--pf-next) * var(--k)))/1 var(--fs); transition: transform .5s cubic-bezier(.2,.7,.2,1) }
.pf-next:hover .pf-next-n { transform: translateX(calc(-12 * var(--k))) }
.pf-next-n .arr { width: .5em; height: .5em }
/* Logofolio: kafel 900×546 z ramką #f0f0f0, logo w miejscu i wielkości z oryginału */
.lf-tile { position: relative; margin: 0; aspect-ratio: 900 / 546; border: 1px solid #f0f0f0; background: #fff; container-type: inline-size; overflow: hidden }
.lf-tile + .lf-tile { margin-top: -1px }
.lf-tile > img { position: absolute; display: block; max-width: none }
.lf-top, .lf-by { position: absolute; left: calc(12 / 900 * 100%); margin: 0; font-size: max(9px, calc(var(--pf-tl) / 900 * 100cqw)); letter-spacing: -.02em; line-height: 1.25 }
.lf-top { top: calc(11 / 546 * 100%); font-family: var(--fd) } .lf-top b { display: block; font-weight: 600 }
.lf-by { bottom: calc(12 / 546 * 100%); font-family: var(--fd) } .lf-by b { display: block; font-weight: 600 }
.lf-yr { position: absolute; right: calc(12 / 900 * 100%); bottom: calc(8 / 546 * 100%); margin: 0; font: 600 max(9px, calc(var(--pf-tl) / 900 * 100cqw)) var(--fd) }
.lf-wm { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1 }
.lf-vanity { font: 400 calc(95.633 / 900 * 100cqw)/1.2836 Teko, sans-serif; letter-spacing: -.04em; color: #040404 }
.lf-pp { font: 700 calc(31.247 / 900 * 100cqw)/1.2836 Oxanium, sans-serif; letter-spacing: .22em; color: #142431; padding-left: .22em }
/* Vanity Website: złożenie iMaca jak w oryginale (pudełko 900×720) */
.vw { position: relative; aspect-ratio: 900 / 720 }
.vw > img, .vw > iframe { position: absolute; display: block; border: 0 }
@media (max-width: 760px) {
  :root { --pf-fs-m: 14; --pf-tl-m: 10; --pf-next-m: 34 }
  .pf { padding: 96px 16px 56px }
  .pf-grid { display: flex; flex-direction: column-reverse; gap: 24px; align-items: stretch }
  .pf-media { width: 100% } /* kafle Logofolio i iMac Vanity Website nie mają własnej szerokości (13.11) */
  .pf-side { position: static; font-size: calc(var(--pf-fs-m) * 1px) }
  .pf-meta { grid-template-columns: 76px 1fr } .pf-meta dt, .pf-meta dd { min-height: 28px } .pf-meta .pf-opis { min-height: 30px }
  .lf-top, .lf-by, .lf-yr { font-size: calc(var(--pf-tl-m) * 1px) }
  .pf-next-n { font-size: calc(var(--pf-next-m) * 1px) }
  .vw > img:first-child { left: 0 !important }
}

.lf-px { position: absolute; display: block; z-index: 1 }