:root{
  --bg:#eef0f3;         /* chłodne, bardzo jasne */
  --ink:#17181a;        /* grafit zamiast czystej czerni */
  --muted:#4b4f55;
  --hair:rgba(23,24,26,.14);
  --max: 1080px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font: 16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.01em;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.top{
  position:sticky;
  top:0;
  z-index:10;
  background:linear-gradient(to bottom, rgba(238,240,243,.92), rgba(238,240,243,.70));
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--hair);
  padding:18px 22px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.brand{
  transform: translateX(10px); /* lekkie przesunięcie nazwiska */
}
.name{
  font-weight:560;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:16px;
}
.tag{
  margin-top:6px;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--muted);
}

.controls{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.sep{ opacity:.35; }

.lang, .menuBtn{
  border:1px solid var(--hair);
  background:transparent;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
}
.lang[aria-pressed="true"]{
  background:rgba(23,24,26,.06);
}

.menu{
  position:sticky;
  top:58px;
  z-index:9;
  max-width:var(--max);
  margin:0 auto;
  padding:10px 22px 16px;
  display:flex;
  gap:18px;
  border-bottom: none;
}
.menu a{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.8;
}
.menu a:hover{ opacity:1; }

main{ max-width:var(--max); margin:0 auto; }

.hero{
  padding:46px 22px 26px;
}
.heroInner{
  display:grid;
  place-items:center;
}

.work{
  width:min(680px, 88vw); /* muzealny oddech */
  margin:0;
}
.work img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.35);
  max-height: 76vh;
  object-fit: cover;
}

.meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:14px 2px 0;
}
.title{
  font-weight:520;
  letter-spacing:.03em;
}
.details{
  color:var(--muted);
  font-size:13px;
  letter-spacing:.06em;
}
.ask{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.85;
}
.ask:hover{ opacity:1; }

.section{
  padding:64px 22px 10px;
}
.h{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
}
.p{
  margin:0 0 22px;
  color:var(--muted);
  max-width:70ch;
}

.grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap:18px;
  padding-bottom:10px;
}
@media (min-width: 820px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.card{
  border:1px solid var(--hair);
  background:rgba(255,255,255,.28);
  padding:12px;
  display:grid;
  gap:10px;
}
.card img{ width:100%; height:auto; display:block; }
.cardMeta{ display:flex; justify-content:space-between; gap:12px; }
.cardTitle{ font-weight:520; }
.cardSmall{ color:var(--muted); font-size:13px; }

.text{
  max-width:72ch;
  color:var(--ink);
}

.contact .email{
  font-size:15px;
  letter-spacing:.06em;
  border-bottom:1px solid var(--hair);
}

.foot{
  padding:50px 22px 60px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.08em;
}

/* subtelny ruch: pojawianie się przy przewijaniu */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity 2000ms ease, transform 2000ms ease;
}
.reveal.isVisible{
  opacity:1;
  transform: translateY(0);
}
/* LIGHTBOX */

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(15,16,18,.92);
  z-index:100;
  display:none;
  place-items:center;
}

.lightbox:not([hidden]){
  display:grid;
}

.lightboxInner{
  max-width:90vw;
  max-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.lightbox img{
  max-width:100%;
  max-height:80vh;
  display:block;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.lightboxCaption{
  color:#cfd2d6;
  font-size:14px;
  letter-spacing:.06em;
}

/* Przycisk: powrót na górę */
.toTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.toTop:hover{ background: rgba(255,255,255,.75); }

.top{
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(247,247,245,.92);
  backdrop-filter: blur(10px);
}

/* Górny pasek zawsze widoczny */
.top{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(247,247,245,.92);
  backdrop-filter: blur(10px);
}

/* Header zawsze na wierzchu i czytelny */
header.top{
  position: relative;
  top: 0;
  z-index: 9999;
  background: rgba(247,247,245,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}

/* Header wraca do normalnego przewijania */
header.top{
  position: relative;
  z-index: 10;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
}

body{
  padding-top: 0;
}

/* ====== NAV / HEADER – stabilna wersja ====== */
header.top{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: rgba(247,247,245,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}

/* Menu linków ma być normalne (nie fixed) */
nav.menu{
  position: static;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

/* Strzałka może być pływająca */
.toTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
}

/* Żeby kotwice nie chowały się pod nagłówkiem */
section{ scroll-margin-top: 90px; }
/* jeśli masz inne elementy jako cele kotwic, możesz też: */
#works, #about, #contact{ scroll-margin-top: 90px; }

/* Lightbox zawsze na wierzchu – bez widocznej belki */
.lightbox{ z-index: 20000; }

.aboutPortrait{
  width: min(320px, 55vw);
  height: auto;
  display: block;
  margin: 14px 0 18px;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  filter: grayscale(100%) contrast(1.05);
}