/* ==========================================================
   marbili.pl — style
   Jeden krój (Stolzl), jeden kolor tekstu, złamana biel w tle.
   ========================================================== */

:root {
  --paper: #f5f4f0;
  --ink: #232220;
  --media: #e9e7e1;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2h18v18h-6V12.2L6.2 22 2 17.8 11.8 8H4z'/%3E%3C/svg%3E") center / contain no-repeat;
  --data: coordinates, ui-monospace, Menlo, monospace;   /* krój dla danych: numery, daty, współrzędne */
  --orange: #ff8b1f;   /* żywy, ekranowy pomarańcz: menu, kontakt i stopka */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --s2: 16px; --s3: 24px; --s4: 48px; --s5: 88px; --s6: 140px;
  --gutter: 64px;
  --bar: 52px;       /* wysokość paska menu po przewinięciu */
  --bar-top: 136px;  /* wysokość paska na samej górze strony: więcej miejsca nad logo i menu */
}
@media (max-width: 1280px) { :root { --gutter: 44px; } }
@media (max-width: 1024px) { :root { --gutter: 32px; --s6: 72px; } }
@media (max-width: 1000px) { :root { --bar: 50px; --bar-top: 96px; } }
@media (max-width: 768px)  { :root { --gutter: 20px; --s5: 48px; --s6: 56px; } }

/* ---------- baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 16px);
  overflow-x: clip;   /* clip zamiast hidden: nie psuje menu na iOS */
  background: var(--paper);
}
body {
  margin: 0;
  padding-top: var(--bar-top);
  font: 15px/1.6 stolzl, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; font: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; background: var(--media); }
::selection { background: var(--ink); color: var(--paper); }

/* drobny druk: etykiety, numery, menu */
.small { font-size: 11.5px; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; }

.wrap { width: 100%; padding-inline: var(--gutter); }   /* pełna szerokość ekranu, jak plansza menu */
.sec { padding-top: var(--s6); }

/* dane jak nadruk na bilecie: numery, liczniki, daty, godzina, lata, współrzędne */
.foot__stamp,
.sec__head span,
.card__meta .small:first-child,
.nav-list .small,
.talk time,
.bio__place,
.menu__coords,
.foot__route {
  font-family: var(--data); font-weight: 500;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* nagłówek sekcji po prawej, dopisek po lewej */
.sec__head {
  display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s4);
  text-align: right;
}

/* ---------- kursor: kropka w kolorze tekstu, nad linkami zmienia się w pierścień ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 2147483647;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink); border: 1.5px solid var(--ink);
  pointer-events: none; opacity: 0;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: opacity .15s ease, width .3s var(--ease), height .3s var(--ease), background-color .2s ease;
}
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 40px; height: 40px; background: transparent; }
@media (hover: hover) and (pointer: fine) { *, *::before, *::after { cursor: none !important; } }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- pasek: logo z lewej, hamburger z prawej ---------- */
.nav-shell { position: fixed; inset: 0 0 auto; z-index: 2147483000; isolation: isolate; }   /* pasek i menu ponad wszystkim */
.nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  /* wysokość ustawia skrypt: zmniejsza się płynnie razem z przewijaniem, od --bar-top do --bar */
  height: var(--bar-now, var(--bar-top)); padding-inline: var(--gutter);
  background: var(--paper);
  transition: background-color 0s linear .6s;
}
.is-open .nav { background: transparent; transition: none; }
.nav__mark { font-size: 15.4px; line-height: 1; white-space: nowrap; }
.nav__toggle {
  position: relative;
  width: 26px; height: 16px; padding: 0; border: 0; background: none; color: inherit;
}
/* hamburger: dwie cienkie kreski; dolna krótsza, wydłuża się po najechaniu; po otwarciu tworzą X */
.nav__toggle span {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: var(--ink);
  transition: transform .45s var(--ease), top .45s var(--ease), right .45s var(--ease);
}
.nav__toggle span:first-child { top: 4px; }
.nav__toggle span:last-child  { top: 11px; right: 8px; }
.nav__toggle:hover span:last-child { right: 0; }
.is-open .nav__toggle span:first-child { top: 7.5px; transform: rotate(45deg); }
.is-open .nav__toggle span:last-child  { top: 7.5px; right: 0; transform: rotate(-45deg); }

/* zasłona na pas strony widoczny pod planszą menu */
.nav-shell::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background: rgba(35, 34, 32, .55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.is-open::before { opacity: 1; visibility: visible; transition: opacity .6s ease; }

/* krótkie menu na pasku: widoczne po zjechaniu z pierwszego ekranu (tylko na komputerze) */
.nav__mini {
  position: absolute; left: 50%; top: 50%;
  display: flex; gap: var(--s3);
  transform: translateY(-50%);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
html.past-hero .nav__mini { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.is-open .nav__mini { opacity: 0; visibility: hidden; }
.nav__mini a:hover, .nav__mini a.is-current { text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 900px) { .nav__mini { display: none; } }

/* przycisk „do góry”: pomarańczowe koło ze strzałką */
.totop {
  position: fixed; right: var(--gutter); bottom: var(--s4); z-index: 2147482000;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--orange);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .4s var(--ease), background-color .3s ease, visibility 0s linear .4s;
}
.totop::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px;
  background: var(--ink);
  -webkit-mask: var(--arrow); mask: var(--arrow);
  transform: rotate(-45deg);   /* strzałka z kontaktu obrócona w górę */
  transition: transform .35s var(--ease);
}
.totop:hover::after { transform: rotate(-45deg) translate(2px, -2px); }
html.past-hero .totop { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .4s var(--ease), background-color .3s ease; }
html.is-menu-open .totop { opacity: 0; visibility: hidden; }
/* na pomarańczowym kontakcie i stopce przycisk odwraca kolory */
html.on-orange .totop { background: var(--ink); }
html.on-orange .totop::after { background: var(--paper); }
@media (max-width: 768px) { .totop { width: 48px; height: 48px; bottom: var(--s3); } }

/* ---------- menu: plansza zjeżdża od góry, 90% wysokości ekranu; pas strony na dole zostaje widoczny ---------- */
.menu {
  position: fixed; inset: 0 0 auto 0; z-index: 1;
  height: 90vh; height: 90svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto;
  column-gap: var(--s4);
  padding: calc(var(--bar-top) + var(--s3)) var(--gutter) var(--s4);
  background: var(--orange);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .8s var(--ease), visibility 0s linear .8s;
}
.is-open .menu { transform: none; visibility: visible; transition: transform .8s var(--ease); }

/* lista z numerami (pierwszy ekran i plansza menu): z prawej, numer za nazwą jak pole na bilecie */
.nav-list li { text-align: right; }
.nav-list a {
  display: inline-flex; align-items: baseline; gap: .8em;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.2; letter-spacing: -.03em;
}
.nav-list a .small { min-width: 2.2em; text-align: right; }
.nav-list a:hover .nav-list__label, .nav-list a.is-current .nav-list__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.menu__nav { grid-column: 7 / -1; grid-row: 1; justify-self: end; }

.menu__claim {
  grid-column: 1 / -1; grid-row: 3;
  font-size: clamp(2.6rem, 8.4vw, 8.6rem); line-height: .98; letter-spacing: -.05em;
}
/* koordynaty Barcelony: z prawej, tuż nad hasłem */
.menu__coords { grid-column: 10 / -1; grid-row: 2; align-self: end; justify-self: end; text-align: right; padding-bottom: var(--s3); }

/* telefon i tablet: na planszy tylko menu — duże, z lewej, na dole pod kciukiem */
@media (max-width: 900px) {
  .menu { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .menu__coords, .menu__claim { display: none; }
  .menu__nav { grid-column: 1; grid-row: 2; justify-self: start; }
  .menu .nav-list li { text-align: left; }
  .menu .nav-list a { font-size: clamp(2.6rem, 11vw, 4.4rem); line-height: 1.08; letter-spacing: -.04em; gap: .4em; }
  .menu .nav-list a .small { min-width: 0; }
}

/* przy otwartym menu strona pod spodem stoi w miejscu (skrypt pamięta pozycję) */
html.is-menu-open { overflow: hidden; }
html.is-menu-open body { position: fixed; inset-inline: 0; }

/* ---------- pierwszy ekran ---------- */
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto 1fr auto;
  column-gap: var(--s4);
  min-height: calc(100svh - var(--bar-top));
  padding-block: var(--s4);
}
.hero__who  { grid-column: 1 / span 5; grid-row: 1; }
/* linki do sociali zaczynają się dokładnie na pionowej osi środka strony (cofnięte o pół odstępu kolumn) */
.hero__meta { grid-column: 7 / span 3; grid-row: 1; margin-left: calc(var(--s4) / -2); display: flex; gap: var(--s5); font-variant-numeric: tabular-nums; }
.hero__meta a:hover { text-decoration: underline; }
.hero__nav  { grid-column: 10 / -1; grid-row: 1; justify-self: end; }
/* cztery role w pomarańczu, rozstawione na całą szerokość przez środek ekranu */
.hero__band {
  grid-column: 1 / -1; grid-row: 3;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  color: var(--orange);
  /* przy przewijaniu role stoją w połowie ekranu, aż pierwszy ekran się skończy i wjadą projekty */
  position: sticky; top: 50vh; top: 50svh; z-index: 1; align-self: start;
}
.hero__lead {
  grid-column: 1 / span 9; grid-row: 5; align-self: end; max-width: 19ch;
  padding-bottom: clamp(24px, 6vh, 80px);
  font-size: clamp(2.2rem, 5.6vw, 5.6rem); line-height: 1.02; letter-spacing: -.045em;
  text-wrap: pretty;
}
.hero__side {
  grid-column: 10 / -1; grid-row: 5; align-self: end;
  padding-bottom: clamp(24px, 6vh, 80px);
  font-size: 13.5px;
}
/* telefon i tablet: jeden spokojny układ przyklejony do dołu ekranu —
   imię u góry, niżej role jedna pod drugą, pod nimi duże zdanie i opis */
@media (max-width: 900px) {
  .hero__grid {
    display: flex; flex-direction: column;
    padding-block: var(--s4) var(--s5);
  }
  .hero__nav, .hero__meta { display: none; }   /* menu jest w hamburgerze, sociale w kontakcie */
  .hero__band {
    position: static; margin-top: auto;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding-bottom: var(--s4);
  }
  .hero__lead { align-self: stretch; max-width: none; padding-bottom: 0; font-size: clamp(2.1rem, 9vw, 3.4rem); }
  .hero__side { align-self: stretch; max-width: 40ch; padding-top: var(--s3); padding-bottom: 0; }
}

/* ---------- projekty: 3 równe kolumny, środkowa lekko opuszczona ---------- */
.work {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  align-items: start;
}
.work .card:nth-child(3n + 2) { margin-top: var(--s5); }
/* tablet: 2 kolumny, prawa lekko opuszczona */
@media (max-width: 1000px) {
  .work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s3); }
  .work .card:nth-child(3n + 2) { margin-top: 0; }
  .work .card:nth-child(2n) { margin-top: var(--s5); }
}
/* telefon: jedna kolumna, wszystkie prace tej samej szerokości */
@media (max-width: 600px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .work .card:nth-child(2n) { margin-top: 0; }
}

/* mikroanimacja: praca wjeżdża od dołu, gdy pierwszy raz pojawi się na ekranie
   (klasa .js na html: bez skryptu prace są po prostu widoczne) */
.js .card { opacity: 0; transform: translateY(56px); transition: opacity .9s ease, transform 1.1s var(--ease); }
.js .card.is-in { opacity: 1; transform: none; }

/* druga wersja zdjęcia po najechaniu */
.card__swap { position: relative; }
.card__swap img + img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; }
.card:hover .card__swap img + img { opacity: 1; }

/* podpis: numer, tytuł, kategoria */
.card__meta {
  display: grid; grid-template-columns: 3.2em max-content minmax(0, 1fr);
  align-items: baseline; column-gap: var(--s2); row-gap: 4px;
  margin-top: var(--s2);
}
.card__title { line-height: 1.2; }
.card__meta .small:last-child:not(:first-child) { text-align: right; }
/* w wąskiej pracy (dowolny ekran) kategoria schodzi pod tytuł */
.card { container-type: inline-size; }
@container (max-width: 440px) {
  .card__meta { grid-template-columns: 2.6em minmax(0, 1fr); }
  .card__meta .small:nth-child(3):not(:first-child) { grid-column: 2; text-align: left; }
}

/* ---------- hasło „Make it happen.” ---------- */
.marquee { margin-top: var(--s6); overflow-x: clip; pointer-events: none; user-select: none; }
.marquee__track {
  display: flex; width: max-content;
  animation: run 120s linear infinite;   /* tempo ustawia skrypt */
}
.marquee span {
  padding: 0 .3em .08em 0;
  font-size: clamp(3.05rem, 10.15vw, 9.14rem); line-height: 1.05; letter-spacing: -.04em;
  white-space: nowrap;
}
@keyframes run { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- klienci ---------- */
.clients {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s4);
  padding-block: var(--s4);
}
.clients__label { grid-column: 1 / span 3; }
.clients__label span { display: block; margin-top: 8px; max-width: 26ch; font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.clients__names { grid-column: 4 / span 9; display: flex; flex-wrap: wrap; gap: .1em .5em; }
.clients__names li { font-size: clamp(1.05rem, 2.1vw, 1.75rem); line-height: 1.24; letter-spacing: -.026em; }
.clients__names li::after { content: ','; }
.clients__names li:last-child::after { content: '.'; }
@media (max-width: 900px) {
  .clients { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); }
  .clients__label, .clients__names { grid-column: 1; }
}

/* ---------- wystąpienia: rok z przodu ---------- */
.talk {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 30%);
  align-items: baseline; column-gap: var(--s4);
  padding-block: var(--s3);
}
.talk h3 {
  font-size: clamp(1.05rem, 1.9vw, 1.5rem); line-height: 1.22; letter-spacing: -.024em;
  text-wrap: pretty; transition: transform .3s var(--ease);
}
.talk:hover h3 { transform: translateX(10px); }
@media (max-width: 1100px) {
  .talk { grid-template-columns: 60px minmax(0, 1fr); column-gap: var(--s3); row-gap: 8px; }
  .talk p { grid-column: 2; }
}
@media (max-width: 700px) {
  .talk { grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s2); padding-block: var(--s2); }
  .talk h3 { font-size: 1.05rem; line-height: 1.3; }
  .talk:hover h3 { transform: none; }
}

/* ---------- o mnie ---------- */
.bio__h2 {
  margin-bottom: var(--s5);
  text-align: right;
  font-size: clamp(3rem, 10vw, 9.5rem); line-height: .9; letter-spacing: -.05em;
}
.bio__lead {
  max-width: 30ch; margin-bottom: var(--s6);
  font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: -.035em;
  text-wrap: pretty;
}
.bio__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s4); }
.bio__place { grid-column: 1 / span 3; }
.bio__notes {
  grid-column: 5 / span 8;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4);
}
.bio__notes h3 { margin-bottom: var(--s2); }
.bio__notes p { max-width: 36ch; font-size: 14px; }
@media (max-width: 820px) {
  .bio__lead { margin-bottom: var(--s5); }
  .bio__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  .bio__place, .bio__notes { grid-column: 1; }
  .bio__place { order: 2; }
}
@media (max-width: 560px) {
  .bio__notes { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
}

/* ---------- specjalizacje ---------- */
.spec {
  display: flex; flex-wrap: wrap; gap: .3em 1.1em; max-width: 62ch;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem); line-height: 1.22; letter-spacing: -.024em;
}
/* ta sama strzałka co w kontakcie, przed każdą specjalizacją */
.spec li::before {
  content: ''; display: inline-block;
  width: .5em; height: .5em; margin-right: .3em; vertical-align: .05em;
  background: currentColor;
  -webkit-mask: var(--arrow); mask: var(--arrow);
}

/* ---------- kontakt ---------- */
.contact__links {
  display: flex; flex-wrap: wrap; gap: .1em .6em;
  font-size: clamp(2rem, 6vw, 5rem); line-height: 1; letter-spacing: -.045em;
}
/* strzałka: pełny, geometryczny piktogram w kolorze tekstu, po najechaniu wyskakuje w górę i w prawo */
.contact__links a::after {
  content: ''; display: inline-block;
  width: .42em; height: .42em; margin-left: .14em; vertical-align: .62em;
  background: currentColor;
  -webkit-mask: var(--arrow); mask: var(--arrow);
  transition: transform .35s var(--ease);
}
.contact__links a:hover::after { transform: translate(.12em, -.12em); }
.contact__sub { margin-top: var(--s4); }

/* sekcja kontakt i stopka na pomarańczu */
.contact {
  margin-top: var(--s6); padding-block: var(--s5); background: var(--orange);
}

/* ---------- stopka ---------- */
.foot { padding-block: var(--s5) calc(var(--s4) + 80px); background: var(--orange); }   /* u dołu miejsce na przycisk „do góry” */
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); }
.foot__stamp span { margin-right: 1.2em; }

/* ---------- ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .js .card { opacity: 1; transform: none; }
  .menu, .nav, .nav__mini, .nav-shell::before, .nav__toggle span, .totop, .totop::after, .talk h3, .contact__links a::after { transition: none !important; }
}