/* Pola Grabowska — specjalne serduszko */
:root{
  --bg:#faf8f4; --sand:#f3efe8; --card:#ffffff;
  --ink:#2e2a33; --muted:#7d7580; --line:#e9e3d9;
  --accent:#c2506c; --accent-d:#a63d57; --accent-soft:#f7e9ed;
  --shadow:0 10px 30px rgba(46,42,51,.08);
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:"Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}

/* animated background — soft drifting color blobs */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg i{position:absolute;border-radius:50%;filter:blur(64px);will-change:transform}
.bg i:nth-child(1){width:min(46vw,620px);height:min(46vw,620px);top:-12%;right:-8%;opacity:.8;
  background:radial-gradient(circle,#f6ddc2 0%,rgba(246,221,194,0) 66%);
  animation:drift1 22s ease-in-out infinite alternate}
.bg i:nth-child(2){width:min(42vw,560px);height:min(42vw,560px);bottom:-16%;left:-9%;opacity:.75;
  background:radial-gradient(circle,#f4cdd8 0%,rgba(244,205,216,0) 66%);
  animation:drift2 28s ease-in-out infinite alternate}
.bg i:nth-child(3){width:min(34vw,440px);height:min(34vw,440px);top:30%;left:58%;opacity:.55;
  background:radial-gradient(circle,#e3d9f0 0%,rgba(227,217,240,0) 66%);
  animation:drift3 36s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-110px,90px) scale(1.22)}}
@keyframes drift2{to{transform:translate(120px,-100px) scale(1.15)}}
@keyframes drift3{to{transform:translate(-140px,110px) scale(1.25)}}
h1,h2,h3{font-family:"Fraunces","Georgia",serif;line-height:1.15;font-weight:600;color:var(--ink)}
h1{font-size:clamp(2.1rem,5vw,3.4rem);margin:.2em 0}
h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:1.6em 0 .5em}
h3{font-size:1.2rem;margin:0}
a{color:var(--accent-d)}
p{margin:0 0 1.1em}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.accent{color:var(--accent)}
.muted{color:var(--muted);font-size:.9rem}
.section{padding:56px 0}
.section.alt{background:rgba(243,239,232,.72)}
figure{margin:1.5em 0}
figure img{border-radius:16px;box-shadow:var(--shadow)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 4px 20px rgba(46,42,51,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-family:"Fraunces",serif;font-size:1.4rem;font-weight:600;text-decoration:none;color:var(--ink)}
.brand em{font-style:normal;color:var(--muted);font-weight:500}
.brand .heart{color:var(--accent);display:inline-block}
.site-nav{display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{text-decoration:none;color:var(--ink);padding:8px 13px;border-radius:999px;
  font-weight:600;font-size:.95rem;transition:.18s}
.site-nav a:hover{background:var(--accent-soft);color:var(--accent-d)}
.site-nav a.active{background:var(--ink);color:#fff}
.site-nav a.lang{border:1px solid var(--line);font-size:.82rem;letter-spacing:.05em}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--ink)}

/* hero (subpages) — bez własnego tła, prześwitują animowane plamy */
.hero{padding:70px 0 46px}
.hero .kicker,.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;
  font-weight:700;color:var(--accent);margin:0 0 .4em}
.hero-lead{font-size:1.2rem;color:var(--muted);max-width:620px;margin:.6em 0 0}
.hero .kicker,.hero h1,.hero .hero-lead,.hero .cta-row{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
.hero h1{animation-delay:.08s}
.hero .hero-lead{animation-delay:.16s}
.hero .cta-row{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* hero home */
.hero-home{padding:64px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero-photo{position:relative;animation:rise .8s .2s cubic-bezier(.2,.7,.3,1) both}
.hero-photo img{border-radius:26px 90px 26px 26px;box-shadow:0 24px 60px rgba(46,42,51,.16);
  aspect-ratio:4/5;object-fit:cover;width:100%}
.hero-photo::before{content:"";position:absolute;inset:-16px -16px auto auto;width:120px;height:120px;
  border-radius:50%;background:var(--accent-soft);z-index:-1}
.hero-heart{position:absolute;left:-26px;bottom:30px;width:84px;height:84px;border-radius:50%;
  background:#fff;box-shadow:0 14px 34px rgba(46,42,51,.18);display:grid;place-items:center;
  color:var(--accent);font-size:2.3rem;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}12%{transform:scale(1.16)}24%{transform:scale(1)}}

/* buttons */
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:2em 0 0}
.btn{display:inline-block;text-decoration:none;padding:13px 24px;border-radius:999px;
  font-weight:700;transition:.18s;font-size:1rem}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(194,80,108,.28)}
.btn-primary:hover{background:var(--accent-d);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-d)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;
  text-decoration:none;color:var(--ink);display:flex;align-items:center;justify-content:space-between;
  gap:12px;box-shadow:var(--shadow);transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}
.card-t{font-family:"Fraunces","Georgia",serif;font-size:1.2rem;font-weight:600;line-height:1.2}
.card-arrow{color:var(--accent);font-size:1.3rem;transition:transform .25s}
.card:hover .card-arrow{transform:translateY(3px)}

/* timeline */
.tl-intro{font-style:italic;font-size:1.15rem;color:var(--muted);
  border-left:3px solid var(--accent);padding-left:18px;margin:1.5em 0}
.timeline{list-style:none;margin:1.5em 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 22px 40px}
.timeline li::before{content:"";position:absolute;left:3px;top:8px;width:14px;height:14px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);
  transition:transform .3s}
.timeline li:hover::before{transform:scale(1.3)}
.tl-date{display:block;font-weight:700;color:var(--accent-d);font-size:.9rem;margin-bottom:2px}
.tl-body{color:var(--ink)}
.op-imgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1.5em}
.op-imgs img{border-radius:14px;box-shadow:var(--shadow)}

/* gallery — masonry: JS rozdziela zdjęcia do kolumn flex (CSS columns ma błędy renderowania w Safari/Chrome) */
.gallery{columns:4 220px;column-gap:14px} /* fallback bez JS */
.js .gallery{columns:auto;display:flex;gap:14px;align-items:flex-start}
.gcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.gcol .gitem{margin:0}
.gitem{display:block;margin:0 0 14px;break-inside:avoid;border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);cursor:zoom-in}
.gitem img{width:100%;height:auto;transition:transform .4s ease}
.gitem:hover img{transform:scale(1.05)}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(30,26,34,.94);
  display:flex;align-items:center;justify-content:center;padding:30px;
  opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:90vw;max-height:86vh;border-radius:10px;
  transform:scale(.96);transition:transform .28s}
.lightbox.open img{transform:scale(1)}
.lb-close{position:absolute;top:14px;right:24px;color:#fff;font-size:2.4rem;cursor:pointer;line-height:1}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);
  border:0;color:#fff;width:52px;height:52px;border-radius:50%;cursor:pointer;padding:0;
  display:grid;place-items:center;transition:background .2s}
.lb-prev svg,.lb-next svg{display:block}
.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.28)}
.lb-prev{left:18px}.lb-next{right:18px}

/* video embed (click to play) */
.video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:#1a161e;box-shadow:var(--shadow);cursor:pointer;margin:1.5em 0}
.video>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88;
  transition:transform .5s ease,opacity .3s}
.video:hover>img{transform:scale(1.04);opacity:1}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .25s,background .25s}
.video-play svg{display:block;margin-left:4px}
.video:hover .video-play{transform:scale(1.1);background:var(--accent-d)}
.video-alt{margin:-0.4em 0 1.5em;text-align:right}
.video-alt a{color:var(--muted);text-decoration:none}
.video-alt a:hover{color:var(--accent-d)}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#cfc8d2;font-size:.9rem}

/* contact */
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:20px 22px;margin-bottom:14px;box-shadow:var(--shadow);
  transition:transform .25s,border-color .25s}
.contact-list li:hover{transform:translateX(6px);border-color:var(--accent)}
.contact-list .k-ico{font-size:1.4rem;color:var(--accent);flex:none;width:28px;text-align:center}
.contact-list li p{margin:0}

/* footer */
.site-footer{background:var(--ink);color:#ddd6e0;text-align:center;padding:48px 0;margin-top:40px}
.site-footer p{margin:.2em 0}
.site-footer .foot-heart{color:var(--accent);font-size:1.8rem;margin-bottom:.2em;
  display:inline-block;animation:pulse 2.6s ease-in-out infinite}
.site-footer em{color:#fff;font-style:italic}
.site-footer .muted{color:#9c93a3}
.site-footer strong{color:#fff}

/* scroll reveal (JS-gated: without JS everything stays visible) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}

/* back to top */
.totop{position:fixed;right:22px;bottom:22px;z-index:60;width:48px;height:48px;border-radius:50%;
  border:0;background:var(--ink);color:#fff;font-size:1.2rem;cursor:pointer;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--accent)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}

@media(max-width:820px){
  .nav-toggle{display:block}
  .site-nav{position:fixed;inset:70px 0 auto 0;background:var(--bg);flex-direction:column;
    padding:14px 24px 22px;gap:4px;border-bottom:1px solid var(--line);
    transform:translateY(-120%);transition:.28s;box-shadow:var(--shadow)}
  .site-nav.open{transform:translateY(0)}
  .site-nav a{padding:12px}
  .gallery{columns:2 140px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-photo{max-width:340px;margin:0 auto}
}
