/* ============================================================
   JULIA GRZYWACZ — portfolio
   Design system + interactions
   Display face: Michroma (substytut "Horizon")  ·  Body: Oswald
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Oswald:wght@200;300;400;500;600&display=swap');

:root{
  --bg:        #0a0a0b;
  --bg-soft:   #111113;
  --ink:       #e9e7e0;   /* neutralna biel (rzadko) */
  --muted:     #8c8a86;   /* podpisy / drobny tekst */
  --yellow:    #f3d019;   /* nagłówki + ozdobniki (strzałki) */
  --yellow-dim:#c9ae10;
  --violet:    #8a72ff;   /* tekst opisowy + nawigacja */
  --violet-2:  #6a4dff;
  --line:      rgba(255,255,255,.10);

  --display:'Michroma', 'Arial Narrow', sans-serif;
  --body:'Oswald', system-ui, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(18px, 4vw, 56px);
  --rhythm: clamp(70px, 11vw, 160px); /* odstęp między sekcjami */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* selection */
::selection{background:var(--yellow);color:#000}

/* ---------- Type helpers ---------- */
.display{font-family:var(--display);font-weight:400;letter-spacing:.06em;line-height:1;text-transform:uppercase}

.eyebrow{
  font-family:var(--body);font-weight:400;font-size:.72rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--violet);
}

.prose{
  font-family:var(--body);font-weight:300;
  color:var(--violet);
  font-size:clamp(.95rem,1.15vw,1.06rem);
  letter-spacing:.02em;line-height:1.85;
  max-width:46ch;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,11,.78);
  padding-top:13px;padding-bottom:13px;
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:var(--display);font-size:clamp(.78rem,1.4vw,1rem);
  letter-spacing:.16em;color:var(--ink);
  transition:color .3s;
}
.brand:hover{color:var(--yellow)}
.nav-links{display:flex;gap:clamp(18px,2.6vw,40px);align-items:center}
.nav-links a{
  font-weight:400;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink);position:relative;padding:6px 0;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--violet);transition:right .35s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--violet)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}

.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;width:42px;height:42px}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px auto;transition:transform .35s var(--ease),opacity .25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* przełącznik języka PL / EN */
.lang{display:inline-flex;gap:6px;align-items:center;font-size:.72rem;letter-spacing:.14em}
.lang button{background:none;border:0;cursor:pointer;color:var(--ink);font:inherit;
  letter-spacing:inherit;padding:4px 2px;opacity:.5;transition:opacity .25s,color .25s}
.lang button:hover{opacity:.85}
.lang button.on{opacity:1;color:var(--violet)}
.lang__sep{opacity:.3}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;height:100vh;height:100svh;min-height:560px;width:100%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);
  animation:heroZoom 16s var(--ease) forwards;
}
.hero::after{ /* przyciemnienie pod tytuł */
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.28), rgba(0,0,0,.62));
}
.hero__title{
  position:relative;z-index:2;text-align:center;color:var(--yellow);
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2.1rem,9vw,7rem);letter-spacing:.04em;line-height:.96;
  text-shadow:0 2px 40px rgba(0,0,0,.6);
  padding:0 var(--gutter);
}
.hero__title span{display:block;overflow:hidden}
.hero__title span i{
  display:block;font-style:normal;
  transform:translateY(110%);
  animation:rise 1s var(--ease) forwards;
}
.hero__title span:nth-child(2) i{animation-delay:.12s}
.hero__scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  color:var(--ink);opacity:.7;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero__scroll::after{content:"";width:1px;height:42px;background:linear-gradient(var(--ink),transparent);animation:pulse 2.4s var(--ease) infinite}

@keyframes heroZoom{to{transform:scale(1)}}
@keyframes rise{to{transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:.9;transform:scaleY(1)}}

/* ============================================================
   LAYOUT / SECTIONS
   ============================================================ */
main{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding-block:var(--rhythm)}
.section--tight{padding-block:calc(var(--rhythm) * .55)}

.section-head{margin-bottom:clamp(26px,4vw,52px)}
.section-head h2{
  font-family:var(--display);color:var(--yellow);
  font-size:clamp(1.5rem,4.4vw,2.9rem);letter-spacing:.05em;text-transform:uppercase;
  margin:.2em 0 0;line-height:1.05;display:flex;align-items:center;gap:.5em;flex-wrap:wrap;
}
.section-head .sub{
  margin-top:14px;color:var(--violet);font-weight:300;
  letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;
}

/* O MNIE */
.about{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(28px,5vw,70px);align-items:center}
.about__img{position:relative;overflow:hidden}
.about__img img{width:100%;transition:transform 1.2s var(--ease)}
.about__img video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.about__img:hover img{transform:scale(1.04)}
.about__img:hover video{transform:scale(1.04)}
.about h2{margin-top:0}

/* ---------- Galleries ---------- */
.gal{display:grid;gap:clamp(10px,1.4vw,20px);margin-block:clamp(10px,1.4vw,20px)}
.gal.cols-2{grid-template-columns:repeat(2,1fr)}
.gal.cols-3{grid-template-columns:repeat(3,1fr)}
.gal.cols-4{grid-template-columns:repeat(4,1fr)}

.shot{position:relative;overflow:hidden;background:var(--bg-soft);margin:0}
.shot img{width:100%;height:100%;object-fit:cover;
  transition:opacity .55s var(--ease), filter .55s var(--ease), transform .7s var(--ease);
}
/* PETRICE-style highlight: po najechaniu na grupę reszta przygasa */
.lift:hover .shot img{opacity:.42;filter:saturate(.55) brightness(.8)}
.lift .shot:hover img{opacity:1;filter:none;transform:scale(1.025)}

/* aspekty kafelków */
.a-port{aspect-ratio:3/4}
.a-land{aspect-ratio:4/3}
.a-sq{aspect-ratio:1/1}
.a-wide{aspect-ratio:16/9}
.a-tall{aspect-ratio:2/3}

/* pojedyncze, duże ujęcie */
.feature{margin-inline:auto;max-width:760px}
.feature.narrow{max-width:520px}
.feature .shot img{transition:transform 1s var(--ease),filter .6s}
.feature .shot:hover img{transform:scale(1.03)}

/* podpis pod kafelkiem */
.cap{margin-top:8px;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   CAROUSEL — pojedyncza ramka, w której wyświetlają się
   po kolei zdjęcia (cross-fade). Strzałka z mock-upu = ta ramka.
   ============================================================ */
.cyc{position:relative;width:min(72%,560px);margin:clamp(18px,3vw,40px) auto;
  overflow:hidden;background:#000;border-radius:2px}
.cyc__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.015);
  transition:opacity 1.1s var(--ease),transform 6s linear}
.cyc__img.is-on{opacity:1;transform:scale(1)}
.cyc__dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;
  display:flex;gap:7px;justify-content:center}
.cyc__dots b{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.34);
  transition:background .35s,transform .35s}
.cyc__dots b.on{background:var(--yellow);transform:scale(1.3)}

/* ============================================================
   SESJA ANDRE — górny rząd: portret | (etykieta + strzałka + zdjęcie)
   ============================================================ */
.andre-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);align-items:start}
.andre-note{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.andre-label{color:var(--violet);font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;align-self:flex-start}
.andre-note .arrow--curve{align-self:flex-end;margin:-2px 18px 4px 0}
.andre-note .shot{width:100%}

/* ============================================================
   ROWS — wierne odwzorowanie układu z mock-upu, ale w normalnym
   przepływie. Każdy rząd to osobny blok (padding-bottom %),
   zdjęcia ułożone absolutnie WEWNĄTRZ rzędu. Bez zależności od
   aspect-ratio ani JS — działa wszędzie.
   ============================================================ */
.rows-wrap{padding:clamp(20px,5vw,70px) var(--gutter) var(--rhythm)}
.rows{position:relative;width:clamp(340px,84vw,1520px);margin:0 auto}
.r{position:relative;width:100%;height:0}      /* wysokość z padding-bottom */
.r-head{font-family:var(--display);color:var(--yellow);
  font-size:clamp(1.3rem,3vw,2.3rem);letter-spacing:.04em;line-height:1;
  margin:clamp(40px,6vw,90px) 0 clamp(14px,2vw,26px)}

.c-img{position:absolute;overflow:hidden;background:#0d0d0f;
  box-shadow:inset 0 0 0 1px rgba(212,201,168,.14)}
.c-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .7s var(--ease)}
.c-cyc{position:absolute;overflow:hidden;background:#0d0d0f;
  box-shadow:inset 0 0 0 1px rgba(212,201,168,.14);transition:opacity .5s,filter .5s}

/* podświetlenie jak w Petrice — najechane jasne, reszta przygasa */
.rows:has(.c-img:hover,.c-cyc:hover) .c-img:not(:hover) img,
.rows:has(.c-img:hover,.c-cyc:hover) .c-cyc:not(:hover){opacity:.4;filter:saturate(.55)}
/* fallback bez :has() — sterowane JS-em */
.rows.hl .c-img:not(.hl-on) img,
.rows.hl .c-cyc:not(.hl-on){opacity:.4;filter:saturate(.55)}
.c-img:hover,.c-cyc:hover{z-index:4}
.c-img:hover img{transform:scale(1.035)}

/* etykieta + strzałki w Sesji Andre / przy karuzelach */
.r-label{position:absolute;color:var(--violet);font-size:clamp(.5rem,1vw,.66rem);
  letter-spacing:.28em;text-transform:uppercase;z-index:5}
.r-arrow{position:absolute;color:var(--yellow);z-index:3;pointer-events:none;
  transform:translateY(-50%)}
.r-arrow svg{width:100%;height:auto;display:block;overflow:visible}      /* bez spłaszczania */
.r-curve{position:absolute;color:var(--yellow);z-index:3;pointer-events:none;aspect-ratio:60/48}
.r-curve svg{width:100%;height:100%;display:block;overflow:visible}

/* bold akcenty graficzne (żółte / fioletowe) */
.r-accent{position:absolute;pointer-events:none;z-index:2}
.r-ring{border-radius:50%;aspect-ratio:1}
.r-ring.v{border:3px solid var(--violet)}
.r-ring.y{border:3px solid var(--yellow)}
.r-dot.v{background:var(--violet);border-radius:50%;aspect-ratio:1}
.r-dot.y{background:var(--yellow);border-radius:50%;aspect-ratio:1}
.r-bar.y{background:var(--yellow)}
.r-bar.v{background:var(--violet)}
.r-plus{color:var(--yellow)}
.r-plus.v{color:var(--violet)}
.r-plus svg{width:100%;height:100%;display:block}
.r-mono{font-family:var(--display);font-weight:700;letter-spacing:.12em;
  opacity:.16;white-space:nowrap;transform-origin:center}
.r-mono.v{color:var(--violet)}
.r-mono.y{color:var(--yellow)}
.ow-intro{margin:clamp(34px,5vw,72px) 0 clamp(10px,1.6vw,22px)}
.ow-intro:first-child{margin-top:0}
.ow-intro .r-head{margin-bottom:.5em}

/* duży napis bokiem (CIRCUS / GRZYWACZ / PAINTINGS) */
.r-side{position:absolute;z-index:2;pointer-events:none;font-family:var(--display);
  font-weight:700;letter-spacing:.16em;white-space:nowrap;opacity:.18;
  font-size:clamp(1.6rem,5vw,4.6rem);transform-origin:left center;
  transform:translateY(-50%) rotate(-90deg)}
.r-side.y{color:var(--yellow)}
.r-side.v{color:var(--violet)}
.r-side--paint{transform-origin:right center;transform:translateY(-50%) rotate(90deg)}

/* ikona Instagrama (prawy dolny róg) */
.ig-fab{position:fixed;right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,34px);z-index:60;
  width:60px;height:60px;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center;
  color:var(--violet);background:rgba(10,10,11,.5);border:1.5px solid rgba(138,114,255,.55);
  border-radius:50%;backdrop-filter:blur(6px);transition:color .25s,border-color .25s,transform .25s,background .25s}
.ig-fab svg{width:31px;height:31px;flex:none;display:block}
.ig-fab:hover{color:#fff;background:var(--violet);border-color:var(--violet);transform:translateY(-2px)}

/* ===== LIGHTBOX ===== */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,7,.94);opacity:0;visibility:hidden;transition:opacity .3s var(--ease);
  padding:clamp(20px,5vw,70px);cursor:zoom-out}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.97);transition:transform .3s var(--ease)}
.lb.open img{transform:scale(1)}
.lb__close{position:absolute;top:clamp(14px,3vw,30px);right:clamp(14px,3vw,30px);
  width:42px;height:42px;border:0;background:none;color:var(--ink);cursor:pointer;opacity:.8}
.lb__close:hover{opacity:1;color:var(--yellow)}
.lb__close svg{width:100%;height:100%}
.c-img img,.gal img,.feature img,.about__img img{cursor:zoom-in}

/* ============================================================
   OZDOBNIK — żółta strzałka
   ============================================================ */
.arrow{display:inline-flex;align-items:center;color:var(--yellow);flex:0 0 auto}
.arrow svg{display:block}
.arrow--row{justify-content:center;width:100%;margin-block:clamp(20px,3vw,46px)}
.arrow--down{justify-content:center;width:100%;margin-block:clamp(14px,2vw,30px)}

/* ============================================================
   OTHER WORKS — tekst opisowy + bio + wystawy
   ============================================================ */
.cols-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.bio{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,40px);align-items:start}
.bio__photo{width:clamp(120px,16vw,190px)}
.bio__photo img{width:100%}
.exh{margin-top:clamp(30px,4vw,48px)}
.exh h3{font-family:var(--display);color:var(--yellow);font-size:1rem;letter-spacing:.06em;margin:0 0 18px}
.exh__group{margin-bottom:22px}
.exh__group b{display:block;color:var(--violet);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;font-size:.66rem;margin-bottom:8px}
.exh ul{list-style:none;margin:0;padding:0}
.exh li{color:var(--ink);opacity:.78;font-weight:200;font-size:.84rem;letter-spacing:.02em;
  padding:5px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}
.exh li span{color:var(--yellow-dim);flex:0 0 auto;font-weight:400}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{min-height:100svh;display:flex;align-items:center;padding-top:120px}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);width:100%;align-items:start}
.contact h1{font-family:var(--display);color:var(--yellow);
  font-size:clamp(2rem,6vw,4rem);letter-spacing:.04em;line-height:1;margin:0 0 28px}
.contact .lead{color:var(--violet);max-width:40ch;font-weight:300;line-height:1.8}
.links{margin-top:40px;display:flex;flex-direction:column;gap:2px}
.links a{display:flex;align-items:baseline;gap:14px;padding:16px 0;border-top:1px solid var(--line);
  font-size:1.05rem;letter-spacing:.04em;transition:color .3s,padding .35s var(--ease)}
.links a:last-child{border-bottom:1px solid var(--line)}
.links a:hover{color:var(--yellow);padding-left:14px}
.links a .k{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);width:84px;flex:0 0 auto}

.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--body);font-weight:300;font-size:1rem;
  padding:10px 0;transition:border-color .35s}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--yellow)}
.btn{align-self:flex-start;margin-top:6px;background:transparent;color:var(--yellow);
  border:1px solid var(--yellow);font-family:var(--display);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;padding:15px 30px;cursor:pointer;transition:background .35s,color .35s}
.btn:hover{background:var(--yellow);color:#000}
.form__note{color:var(--muted);font-size:.78rem;letter-spacing:.02em;font-weight:300;margin:4px 0 0}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--line);padding:46px var(--gutter);margin-top:var(--rhythm);
  display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.footer .brand{font-size:.86rem}
.footer__meta{color:var(--muted);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}
.footer__social{display:flex;gap:24px}
.footer__social a{color:var(--muted);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;transition:color .3s}
.footer__social a:hover{color:var(--yellow)}

/* ============================================================
   JULIA GRZYWACZ — portfolio
   Design system + interactions
   Display face: Michroma (substytut "Horizon")  ·  Body: Oswald
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Oswald:wght@200;300;400;500;600&display=swap');

:root{
  --bg:        #0a0a0b;
  --bg-soft:   #111113;
  --ink:       #e9e7e0;   /* neutralna biel (rzadko) */
  --muted:     #8c8a86;   /* podpisy / drobny tekst */
  --yellow:    #f3d019;   /* nagłówki + ozdobniki (strzałki) */
  --yellow-dim:#c9ae10;
  --violet:    #8a72ff;   /* tekst opisowy + nawigacja */
  --violet-2:  #6a4dff;
  --line:      rgba(255,255,255,.10);

  --display:'Michroma', 'Arial Narrow', sans-serif;
  --body:'Oswald', system-ui, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(18px, 4vw, 56px);
  --rhythm: clamp(70px, 11vw, 160px); /* odstęp między sekcjami */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* selection */
::selection{background:var(--yellow);color:#000}

/* ---------- Type helpers ---------- */
.display{font-family:var(--display);font-weight:400;letter-spacing:.06em;line-height:1;text-transform:uppercase}

.eyebrow{
  font-family:var(--body);font-weight:400;font-size:.72rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--violet);
}

.prose{
  font-family:var(--body);font-weight:300;
  color:var(--violet);
  font-size:clamp(.95rem,1.15vw,1.06rem);
  letter-spacing:.02em;line-height:1.85;
  max-width:46ch;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,11,.78);
  padding-top:13px;padding-bottom:13px;
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:var(--display);font-size:clamp(.78rem,1.4vw,1rem);
  letter-spacing:.16em;color:var(--ink);
  transition:color .3s;
}
.brand:hover{color:var(--yellow)}
.nav-links{display:flex;gap:clamp(18px,2.6vw,40px);align-items:center}
.nav-links a{
  font-weight:400;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink);position:relative;padding:6px 0;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--violet);transition:right .35s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--violet)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}

.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;width:42px;height:42px}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px auto;transition:transform .35s var(--ease),opacity .25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* przełącznik języka PL / EN */
.lang{display:inline-flex;gap:6px;align-items:center;font-size:.72rem;letter-spacing:.14em}
.lang button{background:none;border:0;cursor:pointer;color:var(--ink);font:inherit;
  letter-spacing:inherit;padding:4px 2px;opacity:.5;transition:opacity .25s,color .25s}
.lang button:hover{opacity:.85}
.lang button.on{opacity:1;color:var(--violet)}
.lang__sep{opacity:.3}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;height:100vh;height:100svh;min-height:560px;width:100%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center center;
  transform:scale(1.08);
  animation:heroZoom 16s var(--ease) forwards;
}
.hero::after{ /* przyciemnienie pod tytuł */
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.28), rgba(0,0,0,.62));
}
.hero__title{
  position:relative;z-index:2;text-align:center;color:var(--yellow);
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2.1rem,9vw,7rem);letter-spacing:.04em;line-height:.96;
  text-shadow:0 2px 40px rgba(0,0,0,.6);
  padding:0 var(--gutter);
}
.hero__title span{display:block;overflow:hidden}
.hero__title span i{
  display:block;font-style:normal;
  transform:translateY(110%);
  animation:rise 1s var(--ease) forwards;
}
.hero__title span:nth-child(2) i{animation-delay:.12s}
.hero__scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  color:var(--ink);opacity:.7;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero__scroll::after{content:"";width:1px;height:42px;background:linear-gradient(var(--ink),transparent);animation:pulse 2.4s var(--ease) infinite}

@keyframes heroZoom{to{transform:scale(1)}}
@keyframes rise{to{transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:.9;transform:scaleY(1)}}

/* ============================================================
   LAYOUT / SECTIONS
   ============================================================ */
main{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding-block:var(--rhythm)}
.section--tight{padding-block:calc(var(--rhythm) * .55)}

.section-head{margin-bottom:clamp(26px,4vw,52px)}
.section-head h2{
  font-family:var(--display);color:var(--yellow);
  font-size:clamp(1.5rem,4.4vw,2.9rem);letter-spacing:.05em;text-transform:uppercase;
  margin:.2em 0 0;line-height:1.05;display:flex;align-items:center;gap:.5em;flex-wrap:wrap;
}
.section-head .sub{
  margin-top:14px;color:var(--violet);font-weight:300;
  letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;
}

/* O MNIE */
.about{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(28px,5vw,70px);align-items:center}
.about__img{position:relative;overflow:hidden}
.about__img img{width:100%;transition:transform 1.2s var(--ease)}
.about__img video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.about__img:hover img{transform:scale(1.04)}
.about__img:hover video{transform:scale(1.04)}
.about h2{margin-top:0}

/* ---------- Galleries ---------- */
.gal{display:grid;gap:clamp(10px,1.4vw,20px);margin-block:clamp(10px,1.4vw,20px)}
.gal.cols-2{grid-template-columns:repeat(2,1fr)}
.gal.cols-3{grid-template-columns:repeat(3,1fr)}
.gal.cols-4{grid-template-columns:repeat(4,1fr)}

.shot{position:relative;overflow:hidden;background:var(--bg-soft);margin:0}
.shot img{width:100%;height:100%;object-fit:cover;
  transition:opacity .55s var(--ease), filter .55s var(--ease), transform .7s var(--ease);
}
/* PETRICE-style highlight: po najechaniu na grupę reszta przygasa */
.lift:hover .shot img{opacity:.42;filter:saturate(.55) brightness(.8)}
.lift .shot:hover img{opacity:1;filter:none;transform:scale(1.025)}

/* aspekty kafelków */
.a-port{aspect-ratio:3/4}
.a-land{aspect-ratio:4/3}
.a-sq{aspect-ratio:1/1}
.a-wide{aspect-ratio:16/9}
.a-tall{aspect-ratio:2/3}

/* pojedyncze, duże ujęcie */
.feature{margin-inline:auto;max-width:760px}
.feature.narrow{max-width:520px}
.feature .shot img{transition:transform 1s var(--ease),filter .6s}
.feature .shot:hover img{transform:scale(1.03)}

/* podpis pod kafelkiem */
.cap{margin-top:8px;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   CAROUSEL — pojedyncza ramka, w której wyświetlają się
   po kolei zdjęcia (cross-fade). Strzałka z mock-upu = ta ramka.
   ============================================================ */
.cyc{position:relative;width:min(72%,560px);margin:clamp(18px,3vw,40px) auto;
  overflow:hidden;background:#000;border-radius:2px}
.cyc__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.015);
  transition:opacity 1.1s var(--ease),transform 6s linear}
.cyc__img.is-on{opacity:1;transform:scale(1)}
.cyc__dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;
  display:flex;gap:7px;justify-content:center}
.cyc__dots b{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.34);
  transition:background .35s,transform .35s}
.cyc__dots b.on{background:var(--yellow);transform:scale(1.3)}

/* ============================================================
   SESJA ANDRE — górny rząd: portret | (etykieta + strzałka + zdjęcie)
   ============================================================ */
.andre-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);align-items:start}
.andre-note{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.andre-label{color:var(--violet);font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;align-self:flex-start}
.andre-note .arrow--curve{align-self:flex-end;margin:-2px 18px 4px 0}
.andre-note .shot{width:100%}

/* ============================================================
   ROWS — wierne odwzorowanie układu z mock-upu, ale w normalnym
   przepływie. Każdy rząd to osobny blok (padding-bottom %),
   zdjęcia ułożone absolutnie WEWNĄTRZ rzędu. Bez zależności od
   aspect-ratio ani JS — działa wszędzie.
   ============================================================ */
.rows-wrap{padding:clamp(20px,5vw,70px) var(--gutter) var(--rhythm)}
.rows{position:relative;width:clamp(340px,84vw,1520px);margin:0 auto}
.r{position:relative;width:100%;height:0}      /* wysokość z padding-bottom */
.r-head{font-family:var(--display);color:var(--yellow);
  font-size:clamp(1.3rem,3vw,2.3rem);letter-spacing:.04em;line-height:1;
  margin:clamp(40px,6vw,90px) 0 clamp(14px,2vw,26px)}

.c-img{position:absolute;overflow:hidden;background:#0d0d0f;
  box-shadow:inset 0 0 0 1px rgba(212,201,168,.14)}
.c-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .7s var(--ease)}
.c-cyc{position:absolute;overflow:hidden;background:#0d0d0f;
  box-shadow:inset 0 0 0 1px rgba(212,201,168,.14);transition:opacity .5s,filter .5s}

/* podświetlenie jak w Petrice — najechane jasne, reszta przygasa */
.rows:has(.c-img:hover,.c-cyc:hover) .c-img:not(:hover) img,
.rows:has(.c-img:hover,.c-cyc:hover) .c-cyc:not(:hover){opacity:.4;filter:saturate(.55)}
/* fallback bez :has() — sterowane JS-em */
.rows.hl .c-img:not(.hl-on) img,
.rows.hl .c-cyc:not(.hl-on){opacity:.4;filter:saturate(.55)}
.c-img:hover,.c-cyc:hover{z-index:4}
.c-img:hover img{transform:scale(1.035)}

/* etykieta + strzałki w Sesji Andre / przy karuzelach */
.r-label{position:absolute;color:var(--violet);font-size:clamp(.5rem,1vw,.66rem);
  letter-spacing:.28em;text-transform:uppercase;z-index:5}
.r-arrow{position:absolute;color:var(--yellow);z-index:3;pointer-events:none;
  transform:translateY(-50%)}
.r-arrow svg{width:100%;height:auto;display:block;overflow:visible}      /* bez spłaszczania */
.r-curve{position:absolute;color:var(--yellow);z-index:3;pointer-events:none;aspect-ratio:60/48}
.r-curve svg{width:100%;height:100%;display:block;overflow:visible}

/* bold akcenty graficzne (żółte / fioletowe) */
.r-accent{position:absolute;pointer-events:none;z-index:2}
.r-ring{border-radius:50%;aspect-ratio:1}
.r-ring.v{border:3px solid var(--violet)}
.r-ring.y{border:3px solid var(--yellow)}
.r-dot.v{background:var(--violet);border-radius:50%;aspect-ratio:1}
.r-dot.y{background:var(--yellow);border-radius:50%;aspect-ratio:1}
.r-bar.y{background:var(--yellow)}
.r-bar.v{background:var(--violet)}
.r-plus{color:var(--yellow)}
.r-plus.v{color:var(--violet)}
.r-plus svg{width:100%;height:100%;display:block}
.r-mono{font-family:var(--display);font-weight:700;letter-spacing:.12em;
  opacity:.16;white-space:nowrap;transform-origin:center}
.r-mono.v{color:var(--violet)}
.r-mono.y{color:var(--yellow)}
.ow-intro{margin:clamp(34px,5vw,72px) 0 clamp(10px,1.6vw,22px)}
.ow-intro:first-child{margin-top:0}
.ow-intro .r-head{margin-bottom:.5em}

/* duży napis bokiem (CIRCUS / GRZYWACZ / PAINTINGS) */
.r-side{position:absolute;z-index:2;pointer-events:none;font-family:var(--display);
  font-weight:700;letter-spacing:.16em;white-space:nowrap;opacity:.18;
  font-size:clamp(1.6rem,5vw,4.6rem);transform-origin:left center;
  transform:translateY(-50%) rotate(-90deg)}
.r-side.y{color:var(--yellow)}
.r-side.v{color:var(--violet)}
.r-side--paint{transform-origin:right center;transform:translateY(-50%) rotate(90deg)}

/* ikona Instagrama (prawy dolny róg) */
.ig-fab{position:fixed;right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,34px);z-index:60;
  width:60px;height:60px;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center;
  color:var(--violet);background:rgba(10,10,11,.5);border:1.5px solid rgba(138,114,255,.55);
  border-radius:50%;backdrop-filter:blur(6px);transition:color .25s,border-color .25s,transform .25s,background .25s}
.ig-fab svg{width:31px;height:31px;flex:none;display:block}
.ig-fab:hover{color:#fff;background:var(--violet);border-color:var(--violet);transform:translateY(-2px)}

/* ===== LIGHTBOX ===== */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,7,.94);opacity:0;visibility:hidden;transition:opacity .3s var(--ease);
  padding:clamp(20px,5vw,70px);cursor:zoom-out}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.97);transition:transform .3s var(--ease)}
.lb.open img{transform:scale(1)}
.lb__close{position:absolute;top:clamp(14px,3vw,30px);right:clamp(14px,3vw,30px);
  width:42px;height:42px;border:0;background:none;color:var(--ink);cursor:pointer;opacity:.8}
.lb__close:hover{opacity:1;color:var(--yellow)}
.lb__close svg{width:100%;height:100%}
.c-img img,.gal img,.feature img,.about__img img{cursor:zoom-in}

/* ============================================================
   OZDOBNIK — żółta strzałka
   ============================================================ */
.arrow{display:inline-flex;align-items:center;color:var(--yellow);flex:0 0 auto}
.arrow svg{display:block}
.arrow--row{justify-content:center;width:100%;margin-block:clamp(20px,3vw,46px)}
.arrow--down{justify-content:center;width:100%;margin-block:clamp(14px,2vw,30px)}

/* ============================================================
   OTHER WORKS — tekst opisowy + bio + wystawy
   ============================================================ */
.cols-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.bio{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,40px);align-items:start}
.bio__photo{width:clamp(120px,16vw,190px)}
.bio__photo img{width:100%}
.exh{margin-top:clamp(30px,4vw,48px)}
.exh h3{font-family:var(--display);color:var(--yellow);font-size:1rem;letter-spacing:.06em;margin:0 0 18px}
.exh__group{margin-bottom:22px}
.exh__group b{display:block;color:var(--violet);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;font-size:.66rem;margin-bottom:8px}
.exh ul{list-style:none;margin:0;padding:0}
.exh li{color:var(--ink);opacity:.78;font-weight:200;font-size:.84rem;letter-spacing:.02em;
  padding:5px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}
.exh li span{color:var(--yellow-dim);flex:0 0 auto;font-weight:400}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{min-height:100svh;display:flex;align-items:center;padding-top:120px}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);width:100%;align-items:start}
.contact h1{font-family:var(--display);color:var(--yellow);
  font-size:clamp(2rem,6vw,4rem);letter-spacing:.04em;line-height:1;margin:0 0 28px}
.contact .lead{color:var(--violet);max-width:40ch;font-weight:300;line-height:1.8}
.links{margin-top:40px;display:flex;flex-direction:column;gap:2px}
.links a{display:flex;align-items:baseline;gap:14px;padding:16px 0;border-top:1px solid var(--line);
  font-size:1.05rem;letter-spacing:.04em;transition:color .3s,padding .35s var(--ease)}
.links a:last-child{border-bottom:1px solid var(--line)}
.links a:hover{color:var(--yellow);padding-left:14px}
.links a .k{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);width:84px;flex:0 0 auto}

.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--body);font-weight:300;font-size:1rem;
  padding:10px 0;transition:border-color .35s}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--yellow)}
.btn{align-self:flex-start;margin-top:6px;background:transparent;color:var(--yellow);
  border:1px solid var(--yellow);font-family:var(--display);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;padding:15px 30px;cursor:pointer;transition:background .35s,color .35s}
.btn:hover{background:var(--yellow);color:#000}
.form__note{color:var(--muted);font-size:.78rem;letter-spacing:.02em;font-weight:300;margin:4px 0 0}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--line);padding:46px var(--gutter);margin-top:var(--rhythm);
  display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.footer .brand{font-size:.86rem}
.footer__meta{color:var(--muted);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}
.footer__social{display:flex;gap:24px}
.footer__social a{color:var(--muted);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;transition:color .3s}
.footer__social a:hover{color:var(--yellow)}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .nav {
    padding: 14px 18px;
    z-index: 100;
  }
  
  .burger {
    display: block;
    z-index: 101;
    position: relative;
    background: transparent;
    border: none;
    padding: 10px;
    margin-left: auto;
  }
  
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(80vw, 340px);
    background: rgba(10, 10, 12, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 100;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  .nav-links.open {
    transform: translateX(0);
  }
  
  .nav-links a {
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    color: var(--ink);
  }
  
  .about{grid-template-columns:1fr}
  .cols-text{grid-template-columns:1fr}
  .bio{grid-template-columns:1fr}
  .bio__photo{width:160px;order:-1}
  .contact__grid{grid-template-columns:1fr}
  .gal.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .gal.cols-3{grid-template-columns:repeat(2,1fr)}
  .gal.cols-2{grid-template-columns:1fr}
  .gal.cols-2.keep{grid-template-columns:repeat(2,1fr)}
  .hero__title{font-size:clamp(2rem,13vw,4rem)}
}

/* ============================================================
   MOBILE — galeria w pionie, duże kadry (max 760px)
   ============================================================ */
@media (max-width:760px){
  /* Poprawka dla hero na mobile */
  .hero {
    min-height: 100vh;
    min-height: 100dvh; /* dynamic viewport height - lepsze na mobile */
  }

  .hero__img {
    object-position: center center;
  }

  /* hero: rozmiar bezpieczny dla wąskich viewportów (Samsung ~360px
     + systemowe skalowanie czcionek) — bez ucinania liter */
  .hero__title {
    font-size: clamp(26px, 8.6vw, 58px); /* px = odporne na systemowe skalowanie czcionek */
    letter-spacing: .02em;
    padding: 0 14px;
    width: 100%;
    text-align: center;
  }

  /* Naprawa animacji tytułu na mobile - wyłączamy animację */
  .hero__title span i {
    transform: translateY(0) !important;
    animation: none !important;
    opacity: 1 !important;
  }

  .rows{width:100%}
  .rows-wrap{padding:22px 12px 56px}
  /* rzędy zachowują kompozycję: zdjęcia obok siebie, bez pustych
     marginesów z desktopu — pojedyncze na całą szerokość */
  .r{position:static!important;height:auto!important;padding-bottom:0!important;
     margin:0 0 12px!important;display:flex;flex-direction:row;
     align-items:center;gap:10px}
  .c-img,.c-cyc{position:relative!important;left:auto!important;top:auto!important;
     width:auto!important;height:auto!important;flex:1 1 0;min-width:0}
  .c-img img{position:static!important;width:100%!important;height:auto!important;display:block}
  .c-cyc{aspect-ratio:4/5}                 /* karuzela: stały, duży kadr */
  /* ozdobniki chowamy na telefonie (były pozycjonowane absolutnie) */
  .r-arrow,.r-accent,.r-curve,.r-label,.r-side{display:none!important}
  .r-head{margin:26px 0 14px!important}
  .ow-intro{margin:30px 0 14px!important}
  /* sekcja „Ode mnie" — jedna kolumna, wideo na całą szerokość */
  .about{grid-template-columns:1fr!important;gap:26px}
  .section{padding:64px 0}
  /* Instagram trochę mniejszy, żeby nie zasłaniał treści */
  .ig-fab{width:50px;height:50px}
  .ig-fab svg{width:26px;height:26px}

  /* Poprawka dla kontaktu na mobile */
  .contact {
    padding-top: 100px;
    min-height: auto;
    padding-bottom: 40px;
  }
}


/* FIX: blur przez ::before — backdrop-filter na .nav łamał position:fixed
   menu mobilnego (panel liczył się względem nav, nie ekranu) */
.nav{will-change:auto}
.nav.scrolled::before{content:"";position:absolute;inset:0;z-index:-1;
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%)}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero__img{transform:none}
  .hero__title span i{transform:none}
  .strip__track{animation:none;flex-wrap:nowrap;overflow-x:auto}
  .reveal{opacity:1;transform:none}
}