/* mbcreative.pl — kierunek "editorial": monochrom, ostre krawędzie, duża typografia, cienkie linie.
   System tokenów wg _KANON-WEB.md. Wartości zmieniaj TU, nie w regułach niżej. */
:root{
  /* odstępy (baza 4) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px;
  --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;
  --gutter:clamp(var(--s-4),4vw,var(--s-12));
  --tap:48px;
  /* typografia. Świadomy wyjątek od "maks. 5 stopni": layout magazynowy stoi na kontraście
     skali, więc poza --t-h1/--t-h2 jest jeden stopień okładkowy --t-giant (kontakt, winieta). */
  --t--1:.8rem; --t-0:1rem; --t-1:1.25rem;
  --t-2:clamp(1.563rem,1.3rem + 1.1vw,2.2rem);
  --t-h1:clamp(2.441rem,1.5rem + 3.6vw,4.4rem);
  --t-h2:clamp(2.6rem,1.4rem + 5vw,5.2rem);
  --t-giant:clamp(3.4rem,1rem + 11.5vw,11rem);
  --lh-tight:1; --lh-body:1.6;
  --track:.14em;
  --font-display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --font-text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* kolor: papier + tusz. Akcentem jest czerń, kolor wnoszą wyłącznie zdjęcia i klipy. */
  --bg:#F4F1EA; --bg-alt:#EAE6DC; --ink:#141211; --muted:#6A655E;
  --line:color-mix(in srgb,var(--ink) 20%,transparent);
  /* forma */
  --radius:0px; --container:1280px; --measure:60ch;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ============ baza ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:var(--s-24)}
html.lb-open{overflow:hidden}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-text); font-size:clamp(1rem,.96rem + .2vw,1.125rem);
  line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
img,video,svg{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:inherit; border-radius:var(--radius)}
h1,h2{font-family:var(--font-display); font-weight:400; line-height:var(--lh-tight); letter-spacing:-.02em; text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-1); font-weight:600; line-height:1.25; letter-spacing:-.01em}
.serif{font-family:var(--font-display); font-weight:400; font-size:var(--t-2); line-height:1.1; letter-spacing:-.01em}
.label{font-family:var(--font-text); font-size:var(--t--1); font-weight:500; line-height:1.4; letter-spacing:var(--track); text-transform:uppercase}
.muted{color:var(--muted)}
.lead{font-size:var(--t-1); line-height:1.45; color:var(--muted); max-width:40ch}
.num{font-variant-numeric:tabular-nums}

.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(var(--s-16),9vw,var(--s-32))}
.section--alt{background:var(--bg-alt)}
.section--ink{
  background:var(--ink); color:var(--bg);
  --line:color-mix(in srgb,var(--bg) 26%,transparent);
  --muted:color-mix(in srgb,var(--bg) 70%,transparent);
}
.section-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--s-3) var(--s-8); padding-bottom:var(--s-6); border-bottom:1px solid currentColor;
}
.section-head .label{color:var(--muted); padding-bottom:var(--s-2)}

/* ============ przyciski i linki ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  min-height:var(--tap); padding:var(--s-3) var(--s-6);
  font-size:var(--t--1); font-weight:600; letter-spacing:var(--track); text-transform:uppercase;
  text-decoration:none; white-space:nowrap; border:1px solid var(--ink); border-radius:var(--radius);
  background:var(--ink); color:var(--bg);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.btn:hover{background:transparent; color:var(--ink)}
.btn--sm{min-height:calc(var(--tap) - var(--s-2)); padding:var(--s-2) var(--s-4)}
.section--ink .btn{border-color:var(--bg); background:var(--bg); color:var(--ink)}
.section--ink .btn:hover{background:transparent; color:var(--bg)}
.btn svg{flex:none}
.link{
  display:inline-flex; align-items:center; gap:var(--s-2); min-height:var(--tap);
  font-size:var(--t--1); font-weight:600; letter-spacing:var(--track); text-transform:uppercase;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.4em;
  transition:opacity .2s var(--ease);
}
.link:hover{opacity:.6}

/* ============ nagłówek ============ */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); min-height:var(--s-16)}
.wordmark{font-family:var(--font-display); font-size:var(--t-2); line-height:1; text-decoration:none; letter-spacing:-.01em; flex:none}
.nav-links{display:flex; gap:var(--s-8)}
.nav-links a{text-decoration:none; padding-block:var(--s-3); transition:opacity .2s var(--ease)}
.nav-links a:hover{opacity:.55}
@media(max-width:860px){ .nav-links{display:none} }

/* ============ hero: okładka ============ */
.hero{padding-block:var(--s-4) clamp(var(--s-16),8vw,var(--s-24)); overflow:hidden}
.issue{display:flex; justify-content:space-between; gap:var(--s-4); padding-bottom:var(--s-3); border-bottom:1px solid var(--ink)}
@media(max-width:640px){ .issue > :nth-child(2){display:none} }
.masthead{width:100%; height:auto; margin-block:var(--s-4) var(--s-8); fill:currentColor; font-family:var(--font-display); overflow:visible}
.hero-grid{display:grid; gap:var(--s-12); align-items:end}
@media(min-width:960px){ .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--s-16)} }
.hero .lead{margin-top:var(--s-6)}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-8); margin-top:var(--s-8)}
.hero-proof{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-4); margin-top:var(--s-12); padding-top:var(--s-4); border-top:1px solid var(--line)}
.hero-proof strong{font-family:var(--font-display); font-weight:400; font-size:var(--t-2); line-height:1}
.hero-proof span{color:var(--muted)}
.cover{position:relative; padding-left:15%; padding-bottom:var(--s-12)}
.cover-photo img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.cover-clip{position:absolute; left:0; bottom:0; width:29%}
.cover-clip .clip-btn{outline:var(--s-2) solid var(--bg)}
.cover-clip .clip-cap{display:none}
.cover-note{position:absolute; right:0; bottom:var(--s-3); color:var(--muted)}

/* ============ klip (karta 9:16) ============ */
.clip-btn{display:block; position:relative; width:100%; aspect-ratio:9/16; overflow:hidden; isolation:isolate; background:var(--bg-alt)}
.clip-poster,.clip-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.clip-poster{transition:transform .7s var(--ease)}
.clip-btn:hover .clip-poster{transform:scale(1.03)}
.clip-media{opacity:0; transition:opacity .3s var(--ease)}
.clip-media.is-playing{opacity:1}
.clip-play{
  position:absolute; left:var(--s-3); bottom:var(--s-3); width:var(--s-8); height:var(--s-8);
  display:grid; place-items:center; background:var(--bg); color:var(--ink);
  opacity:0; transition:opacity .2s var(--ease);
}
.clip-btn:hover .clip-play,.clip-btn:focus-visible .clip-play,.tile--clip .clip-play{opacity:1}
@media(hover:none){ .clip-play{opacity:1} }
.clip-cap{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-3)}
.clip-cap .dur{color:var(--muted); letter-spacing:.04em}

/* ============ pasek marek ============ */
.brands{padding-block:var(--s-6) var(--s-8); border-block:1px solid var(--ink)}
.brands-grid{display:grid; gap:var(--s-6)}
.brands h2{font-family:var(--font-text); font-size:var(--t--1); font-weight:500; line-height:1.4; letter-spacing:var(--track); text-transform:uppercase; text-wrap:balance}
.logos{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-6) clamp(var(--s-8),5vw,var(--s-12))}
@media(min-width:1240px){ .logos{flex-wrap:nowrap; justify-content:space-between; gap:var(--s-6)} }
.logos img{mix-blend-mode:multiply}

/* ============ portfolio i kampanie: wiersz = indeks po lewej, realizacje po prawej ============ */
.cat{display:grid; gap:var(--s-6); padding-block:var(--s-12); border-bottom:1px solid var(--line)}
.cat:last-child{border-bottom:0; padding-bottom:0}
@media(min-width:960px){
  .cat{grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:var(--s-12)}
  .cat-head{position:sticky; top:var(--s-24); align-self:start}
}
.cat-head .label{color:var(--muted)}
.cat-head h3{margin-block:var(--s-2)}
.cat-list{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-8) var(--s-4)}
.cat-list--tiles{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-2)}
@media(max-width:719px){
  .cat-list{
    display:flex; gap:var(--s-3); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter);
    padding-bottom:var(--s-2);
  }
  .cat-list::-webkit-scrollbar{display:none}
  .cat-list > li{flex:0 0 46%; scroll-snap-align:start}
  .cat-list--tiles{gap:var(--s-2)}
  .cat-list--tiles > li{flex-basis:64%}
}
.tile-btn,.tile--clip .clip-btn{display:block; position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; background:color-mix(in srgb,var(--bg) 12%,transparent)}
.tile-btn img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform .7s var(--ease)}
.tile-btn:hover img{transform:scale(1.03)}

/* ============ o mnie ============ */
.about{display:grid; gap:var(--s-12); align-items:end}
@media(min-width:880px){ .about{grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(var(--s-12),7vw,var(--s-24))} }
.about-photo img{width:100%; height:auto}
.about h2{margin-bottom:var(--s-8)}
.prose p{max-width:var(--measure)}
.prose p + p{margin-top:var(--s-6)}
.prose p:first-child{font-family:var(--font-display); font-size:var(--t-2); line-height:1.18; letter-spacing:-.01em; max-width:30ch}
.sign{margin-top:var(--s-8); font-family:var(--font-display); font-style:italic; font-size:var(--t-2); line-height:1}

/* ============ dla kogo ============ */
.split{display:grid; gap:var(--s-8)}
@media(min-width:880px){
  .split{grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--s-16)}
  .split > :first-child{position:sticky; top:var(--s-24); align-self:start}
}
.who{border-top:1px solid var(--ink)}
.who li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-6); align-items:baseline; padding-block:var(--s-8); border-bottom:1px solid var(--line)}
.who .label{color:var(--muted); min-width:3ch}
.who p{font-size:var(--t-1); line-height:1.45; color:var(--muted); max-width:46ch}
.who p strong{font-family:var(--font-display); font-weight:400; font-size:var(--t-2); line-height:1.1; color:var(--ink)}

/* ============ jak pracujemy ============ */
.steps{display:grid; gap:var(--s-12) var(--s-6); margin-top:var(--s-12)}
@media(min-width:720px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1080px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr))} }
.step{padding-top:var(--s-4); border-top:1px solid var(--ink)}
.step .n{display:block; font-family:var(--font-display); font-size:var(--t-h2); line-height:1; letter-spacing:-.02em}
.step h3{margin-top:var(--s-6)}
.step p{margin-top:var(--s-2); color:var(--muted)}
.steps-cta{margin-top:var(--s-16)}

/* ============ kontakt ============ */
.contact{padding-bottom:var(--s-12)}
.contact h2{font-size:var(--t-giant); line-height:.9}
.contact-row{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-6) var(--s-12); margin-top:clamp(var(--s-12),7vw,var(--s-24)); padding-top:var(--s-6); border-top:1px solid var(--line)}
.contact-mail{
  font-family:var(--font-display); font-size:var(--t-2); line-height:1.2; padding-block:var(--s-2);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
  transition:opacity .2s var(--ease); overflow-wrap:anywhere;
}
.contact-mail:hover{opacity:.6}
.contact-links{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-8)}
.footer{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-2) var(--s-8); margin-top:var(--s-16); color:var(--muted)}

/* ============ lightbox ============ */
.lb{border:0; padding:0; margin:0; background:transparent; color:var(--bg); width:100vw; height:100dvh; max-width:none; max-height:none}
.lb::backdrop{background:color-mix(in srgb,var(--ink) 96%,transparent)}
.lb[open]{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--s-3); padding:var(--s-4)}
.lb-stage{display:grid; gap:var(--s-3); justify-items:center; min-width:0}
.lb-media{display:grid; place-items:center; min-height:0}
.lb-media video,.lb-media img{width:auto; height:auto; max-width:100%; max-height:calc(100dvh - var(--s-24)); background:var(--ink)}
.lb-cap{color:color-mix(in srgb,var(--bg) 75%,transparent); text-align:center}
.lb-nav,.lb-close{
  width:var(--tap); height:var(--tap); display:grid; place-items:center;
  border:1px solid color-mix(in srgb,var(--bg) 40%,transparent); color:var(--bg);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.lb-nav:hover,.lb-close:hover{background:var(--bg); color:var(--ink)}
.lb-close{position:absolute; top:var(--s-4); right:var(--s-4); z-index:2}
@media(max-width:640px){
  .lb[open]{grid-template-columns:minmax(0,1fr); padding:var(--s-16) var(--s-3) var(--s-24)}
  .lb-nav{position:absolute; bottom:var(--s-4)}
  .lb-prev{left:var(--s-4)}
  .lb-next{right:var(--s-4)}
  .lb-media video,.lb-media img{max-height:calc(100dvh - var(--s-32) - var(--s-16))}
}

/* ============ a11y + ruch ============ */
.skip{position:absolute; left:-9999px; top:0; z-index:100; padding:var(--s-3) var(--s-4); background:var(--ink); color:var(--bg)}
.skip:focus{left:0}
:focus-visible{outline:2px solid currentColor; outline-offset:3px}
.clip-btn:focus-visible,.tile-btn:focus-visible{outline-offset:var(--s-1)}

.js .reveal{opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1; transform:none}
}