/* PORTFOLIO · strona pokazowa „Przedmiot” (biblioteka HVMBAK, Nº 004) */

:root {
  --tlo: #f1f1ef;
  --tekst: #111111;
  --tekst-2: #6d6d66; /* przepis: #77776f; przyciemnione, bo #77776f na #f1f1ef daje tylko 3,99:1 */
  --linia: #d6d6d0;

  --serif: "Instrument Serif", "Times New Roman", Times, serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --m: 32px;            /* margines boczny */
  --odstep: 24px;       /* odstęp między pracami */
  --sekcja: clamp(112px, 11vw, 176px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --wejscie: 1200ms;
}

@media (max-width: 699px) {
  :root { --m: 16px; --sekcja: 96px; }
}

/* ---------- podstawy ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--tlo);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 400 13px/1.5 var(--mono);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

::selection { background: var(--tekst); color: var(--tlo); }

a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.etykieta {
  font: 400 13px/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-2);
}

/* ---------- nawigacja ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  column-gap: 2ch;
  padding: max(12px, env(safe-area-inset-top)) max(var(--m), env(safe-area-inset-right)) 0 max(var(--m), env(safe-area-inset-left));
  color: #fff;
  line-height: 20px;
  mix-blend-mode: difference;
  pointer-events: none;
}
.nav a, .nav p { pointer-events: auto; }
.nav a { display: inline-block; padding-block: 6px; }
.nav-nazwa { justify-self: start; }
.licznik { justify-self: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav-linki { justify-self: end; }
.nav-linki ul { display: flex; gap: 2ch; }

/* licznik: każda cyfra to bębenek 0–9 */
.kolo { display: inline-block; height: 20px; overflow: hidden; vertical-align: top; }
.kolo-tor { display: block; transform: translateY(calc(var(--c, 0) * -20px)); transition: transform 600ms var(--ease); }
.kolo-tor span { display: block; height: 20px; }

@media (max-width: 699px) {
  .nav {
    grid-template-columns: 1fr auto;
    grid-template-areas: "nazwa licznik" "linki linki";
    row-gap: 0;
  }
  .nav-nazwa { grid-area: nazwa; }
  .licznik { grid-area: licznik; justify-self: end; padding-block: 6px; }
  .nav-linki { grid-area: linki; justify-self: stretch; }
  .nav-linki ul { justify-content: space-between; }
  .nav a { padding-block: 4px; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 64px;
  overflow-x: clip;
}

.pas {
  margin-block: auto;
  height: 28vh;
  height: 28svh;
  min-height: 150px;
  overflow: hidden;
}
.pas-tor {
  display: flex;
  gap: var(--odstep);
  width: max-content;
  height: 100%;
  will-change: transform;
}
.pas img {
  width: auto;
  height: 100%;
  max-width: none;
  background: var(--bg);
}

.hero-linia {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  padding: 0 var(--m);
  margin-top: 40px;
  margin-bottom: clamp(14px, 1.6vw, 24px);
}

.nazwa {
  /* zapas bez skryptu: szerokość liter „Przedmiot” to ok. 3,35 em */
  font: 400 calc((100vw - 2 * var(--m)) / 3.4) / .8 var(--serif);
  letter-spacing: -.02em;
  padding: 0 var(--m);
  margin-bottom: calc(var(--m) - .06em);
  white-space: nowrap;
}
.nazwa span { display: inline-block; }

@media (max-width: 699px) {
  /* telefon: pas tuż pod nawigacją, co najmniej 40svh, i wypełnia wszystko do linijki nad nazwą */
  .hero { padding-top: calc(max(12px, env(safe-area-inset-top)) + 72px); }
  .pas { margin-block: 0; flex: 1 0 auto; height: 40vh; height: 40svh; }
  .hero-linia { display: block; text-wrap: balance; margin-top: 24px; }
}

/* ---------- siatka prac ---------- */

.siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--odstep);
  align-items: start;
  padding: var(--sekcja) var(--m);
}
.siatka.uklad { display: block; position: relative; }
.siatka.uklad .praca { position: absolute; top: 0; left: 0; will-change: transform; }

.kadr {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.kadr img { width: 100%; height: auto; transform-origin: 50% 50%; }

.podpis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 2ch;
  align-items: baseline;
  padding-top: 10px;
}
.podpis .nr, .podpis .rok, .podpis .klient { color: var(--tekst-2); }
.podpis .tytul { margin-right: 1ch; }

@media (max-width: 1099px) {
  .siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .siatka { grid-template-columns: minmax(0, 1fr); }
  .siatka.uklad { display: grid; }
  .siatka.uklad .praca { position: static; }
}

/* ---------- praca na cały ekran ---------- */

.pelna {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 88px var(--m) 32px;
  background: var(--bg);
  color: var(--tlo);
}
.pelna .kadr {
  width: min(100%, calc(70vh * var(--r)));
  width: min(100%, calc(70svh * var(--r)));
  /* brzegi zdjęcia miękko przechodzą w tło sekcji (tło = mediana pikseli przy krawędziach) */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
.pelna-podpis {
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  column-gap: 2ch;
  margin-top: 28px;
}
.pelna-tytul {
  font: 400 28px/1.15 var(--serif);
  text-align: center;
}
.pelna-tytul em { font-style: italic; }
.pelna-meta { justify-self: end; display: flex; gap: 2ch; }

@media (max-width: 699px) {
  .pelna { padding: 96px var(--m) 24px; }
  .pelna-podpis { grid-template-columns: auto 1fr; grid-template-areas: "tytul tytul" "nr meta"; row-gap: 10px; }
  .pelna-podpis .nr { grid-area: nr; }
  .pelna-tytul { grid-area: tytul; text-align: left; }
  .pelna-meta { grid-area: meta; }
}

/* ---------- indeks: wąska tabela i pionowa galeria ---------- */

/* Bez skryptu sama tabela. Ze skryptem sekcja ma tor: ekran plus krok przewijania na każdą pracę (--n ustawia app.js),
   a scena przykleja się do ekranu, dopóki galeria nie dojdzie do ostatniej pracy. */
.indeks { padding-top: var(--sekcja); }
.indeks-scena {
  --scena-gora: 72px;
  --scena-dol: 32px;
  --glowa: 74px;        /* 14 + 20 + 40: linia nad etykietą, etykieta, odstęp do tabeli */
  display: flex;
  flex-direction: column;
  padding: 0 var(--m);
}
.js .indeks-tor { --krok: 36vh; --krok: 36svh; height: calc(100vh + (var(--n, 12) - 1) * var(--krok)); height: calc(100svh + (var(--n, 12) - 1) * var(--krok)); }
.js .indeks-scena {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-top: var(--scena-gora);
  padding-bottom: var(--scena-dol);
}

.indeks-glowa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--linia);
  margin-bottom: 40px;
}
.indeks-glowa .etykieta { line-height: 20px; }

.indeks-uklad {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 48px;
}

.indeks-tabela {
  border-collapse: collapse;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.indeks-tabela th {
  font-weight: 400;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-2);
  padding: 0 3ch 12px 0;
  border-bottom: 1px solid var(--linia);
}
.indeks-tabela td {
  padding: 12px 3ch 12px 0;
  border-bottom: 1px solid var(--linia);
  vertical-align: baseline;
  color: var(--tekst-2);
  transition: color 300ms ease;
}
.indeks-tabela .i-rok { padding-right: 0; text-align: right; }
.indeks-tabela tr.aktywny td { color: var(--tekst); }

/* galeria: praca na środku płasko, sąsiedzi pochyleni (położenia, rozmiary i perspektywę liczy app.js) */
.galeria, .g-ster { display: none; }
.js .galeria {
  display: block;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent);
}
.g-el {
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--bg);
  backface-visibility: hidden;
  will-change: transform;
}
.g-el.obok { cursor: pointer; }
.g-el img { width: 100%; height: 100%; max-width: none; }

/* strzałki: na komputerze przy prawej krawędzi galerii, na wysokości jej środka */
.js .g-ster {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  right: var(--m);
  top: calc(var(--scena-gora) + var(--glowa) + (100% - var(--scena-gora) - var(--glowa) - var(--scena-dol)) / 2);
  translate: 0 -50%;
  z-index: 2;
}
.g-strz {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--linia);
  border-radius: 0;
  background: transparent;
  color: var(--tekst);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.g-strz svg { width: 14px; height: 14px; overflow: visible; }
.g-strz path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: square; }
.g-nizej svg { rotate: 180deg; }
.g-strz[aria-disabled="true"] { color: var(--linia); cursor: default; }
@media (hover: hover) {
  .g-strz:not([aria-disabled="true"]):hover { border-color: var(--tekst); }
}

/* tablet i telefon: galeria na górze sceny, pod nią tabela jako bęben wyboru (trzy wiersze, aktywny zawsze w środku) */
@media (max-width: 899px) {
  .indeks-scena { --scena-gora: 88px; --scena-dol: max(16px, env(safe-area-inset-bottom)); }
  .indeks-glowa { margin-bottom: 0; padding-top: 10px; }
  .js .g-ster { position: static; translate: none; flex-direction: row; }
  .g-strz { width: 36px; height: 36px; }
  .indeks-uklad { display: flex; flex-direction: column-reverse; gap: 16px; }
  .js .galeria { flex: 1; min-height: 0; }
  .js .indeks-lista {
    height: calc(3 * var(--wiersz));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  }
  .indeks-lista { --wiersz: 41px; }
  .indeks-tabela, .indeks-tabela tbody { display: block; width: 100%; }
  .indeks-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .indeks-tabela tbody { will-change: transform; }
  .indeks-tabela tr {
    display: grid;
    grid-template-columns: 4ch auto minmax(0, 1fr) auto;
    column-gap: 1.5ch;
    align-items: baseline;
    height: var(--wiersz);
    padding-top: 10px;
    border-bottom: 1px solid var(--linia);
  }
  .indeks-tabela td { display: block; padding: 0; border: 0; }
  .indeks-tabela .i-klient { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 699px) {
  .indeks-scena { --scena-gora: calc(max(12px, env(safe-area-inset-top)) + 76px); }
}

/* ---------- studio ---------- */

.studio, .kontakt { padding: 0 var(--m); }

.studio {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--odstep);
  padding-top: var(--sekcja);
}
.studio > .etykieta {
  grid-column: 1 / -1;
  padding-top: 14px;
  border-top: 1px solid var(--linia);
  margin-bottom: 56px;
}
.studio-tekst {
  grid-column: 4 / -1;
  font: 400 40px/1.12 var(--serif);
  letter-spacing: -.005em;
  text-wrap: pretty;
  max-width: 27em;
}
.studio-lista {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--odstep);
  margin-top: 64px;
  border-top: 1px solid var(--linia);
}
.studio-lista li {
  padding: 12px 2ch 12px 0;
  border-bottom: 1px solid var(--linia);
  text-wrap: pretty;
}

@media (max-width: 1099px) {
  .studio-tekst, .studio-lista { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .studio > .etykieta { margin-bottom: 32px; }
  .studio-tekst { font-size: 32px; line-height: 1.1; }
  .studio-lista { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
}

/* ---------- kontakt i stopka: ostatni ekran ---------- */

.koniec {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--sekcja);
  overflow-x: clip;
}
.kontakt {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.kontakt > .etykieta { padding-top: 14px; border-top: 1px solid var(--linia); }

.mail {
  display: block;
  margin-top: auto;
  padding-top: 96px;
  font: 400 calc((100vw - 2 * var(--m)) / 7) / .9 var(--serif);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.mail > span { display: inline-block; }
.mail .w { display: inline; }
.mail:hover { text-decoration-thickness: .025em; text-underline-offset: .12em; }
.mail:focus-visible { outline-offset: 8px; }

.kontakt-dane {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  margin-top: clamp(28px, 3vw, 44px);
  padding-bottom: 20px;
}

.stopka {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  margin: 0 var(--m);
  padding: 14px 0 max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--linia);
  color: var(--tekst-2);
}
.stopka .drobny { text-align: right; text-wrap: pretty; }

@media (max-width: 699px) {
  .mail { padding-top: 72px; font-size: calc((100vw - 2 * var(--m)) / 4.3); line-height: .86; }
  .mail .w { display: block; }
  .kontakt-dane { flex-direction: column; gap: 4px; }
  .stopka { flex-direction: column; gap: 6px; }
  .stopka .drobny { text-align: left; }
}

/* ---------- ruch ---------- */

/* wejście zdjęcia: maska od dołu i skala w masce */
.ruch .kadr { clip-path: inset(100% 0 0 0); }
.ruch .kadr img { transform: scale(1.12); }
.ruch .kadr.widoczny { clip-path: inset(0); transition: clip-path var(--wejscie) var(--ease); }
.ruch .kadr.widoczny img { transform: none; transition: transform var(--wejscie) var(--ease); }

/* hero: pas i nazwa wchodzą od dołu po wczytaniu kroju */
.ruch .pas, .ruch .nazwa span { clip-path: inset(100% 0 0 0); }
.ruch .nazwa span { transform: translateY(.12em); }
.ruch.gotowe .pas { clip-path: inset(0); transition: clip-path var(--wejscie) var(--ease); }
.ruch.gotowe .nazwa span { clip-path: inset(-.1em 0 -.2em 0); transform: none; transition: clip-path var(--wejscie) var(--ease) 120ms, transform var(--wejscie) var(--ease) 120ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}