/* Joanna Koprowska — UGC portfolio
   Kolory: bg #f4efe7 · ink #3a2c1e · accent #c98f66 · accentDark #8a5636 · contactBg #ece3d4 */

:root{
  --bg:#f4efe7;
  --ink:#3a2c1e;
  --accent:#c98f66;
  --accent-dark:#8a5636;
  --contact-bg:#ece3d4;
  --muted:#5c4735;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink)}
:fullscreen{background:var(--bg)}
:-webkit-full-screen{background:var(--bg)}
::backdrop{background:var(--bg)}
::selection{background:var(--accent);color:#fff}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}

:focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px;border-radius:4px}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Layout ---------- */
.page{max-width:1280px;margin:0 auto;font-family:'SUSE',sans-serif}

/* ---------- Animacje ---------- */
@keyframes highlight-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* reveal on load */
.rv{opacity:0}
.dc-loaded .rv{animation:fade-up .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
/* single highlight sweep at end of hero sequence */
.hl{clip-path:inset(0 100% 0 0)}
.dc-loaded .hl{animation:highlight-wipe .95s cubic-bezier(.4,0,.2,1) forwards;animation-delay:1.65s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.dc-loaded .rv{opacity:1;animation:none}
  .hl,.dc-loaded .hl{clip-path:inset(0 0 0 0);animation:none}
}

/* ---------- Hero ---------- */
.hero{display:flex;gap:clamp(28px,4vw,48px);align-items:center;padding:clamp(30px,6vw,66px) clamp(20px,5vw,60px) clamp(40px,7vw,74px);background:var(--bg);flex-wrap:wrap}
.hero__photo{flex:1 1 260px;max-width:300px;min-width:220px}
.hero__photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 15%;border-radius:14px;display:block;box-shadow:0 18px 44px rgba(42,32,25,.18)}
.hero__body{flex:2 1 380px;min-width:280px}
.hero__name{font:700 clamp(34px,5.2vw,56px)/1.06 'Bricolage Grotesque',sans-serif;color:var(--ink);letter-spacing:-.02em;margin:0 0 8px}
.hero__role{font:600 13px 'Bricolage Grotesque',sans-serif;color:var(--accent-dark);margin:0 0 20px;letter-spacing:.01em}
.hero__intro{font:400 clamp(14px,1.4vw,16px)/1.55 'SUSE',sans-serif;color:var(--muted);max-width:500px;margin-bottom:26px;display:flex;flex-direction:column;gap:10px;background:rgba(58,44,30,.045);border-radius:14px;padding:clamp(16px,2.4vw,22px) clamp(18px,2.6vw,24px)}
.hero__intro p{margin:0}
.mark{position:relative;display:inline-block;padding:1px 2px}
.mark__text{position:relative;z-index:1}
.mark .hl{position:absolute;left:-6px;right:-6px;top:2px;bottom:3px;background:var(--accent);opacity:.45;mix-blend-mode:multiply;border-radius:5px 9px 6px 10px;transform:rotate(-.6deg)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;border-radius:22px;font:600 14px 'Archivo',sans-serif}
.btn--outline,.btn--outline:hover{border:1.5px solid rgba(58,44,30,.35);color:var(--ink)}
.btn--primary,.btn--primary:hover{color:#fff}
.btn--primary{border:1.5px solid var(--accent-dark);background:var(--accent-dark);transition:background .2s ease,transform .2s ease}
.btn--primary:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.btn:focus-visible{border-radius:22px}

/* ---------- Portfolio ---------- */
.portfolio{padding:clamp(36px,6vw,52px) clamp(20px,5vw,60px);border-top:1px dashed rgba(58,44,30,.16)}
.pf-group{margin-bottom:clamp(24px,4vw,32px)}
.pf-group:last-child{margin-bottom:0}
.pf-title{font:700 clamp(19px,2.2vw,22px) 'Bricolage Grotesque',sans-serif;color:var(--ink);margin:0 0 16px}
.pf-message{margin:0;font:400 15px/1.5 'SUSE',sans-serif;color:var(--muted)}

.row{display:flex;gap:clamp(12px,2.2vw,20px);overflow-x:auto;scrollbar-width:thin;padding-bottom:6px;margin:0;padding-left:0;list-style:none}
.row::-webkit-scrollbar{height:6px}
.row::-webkit-scrollbar-thumb{background:rgba(58,44,30,.18);border-radius:3px}
.card{flex:none;width:clamp(140px,22vw,208px);border-radius:12px;overflow:hidden;position:relative;background:rgba(58,44,30,.06)}
.card--wideo{aspect-ratio:9/16}
.card--zdjecia{aspect-ratio:3/4}
.card > img{width:100%;height:100%;object-fit:cover;display:block}

/* Kafelek wideo */
.vtile{position:absolute;inset:0;overflow:hidden;border-radius:12px;background:rgba(58,44,30,.06)}
.vtile video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.vtile__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;padding:0;margin:0;background:rgba(0,0,0,.18);cursor:pointer;transition:background .18s;width:100%;border-radius:12px}
.vtile__play:hover{background:rgba(0,0,0,.3)}
.vtile__play span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;transition:transform .18s}
.vtile__play:hover span{transform:scale(1.08)}
.vtile__play:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.vtile.is-playing .vtile__play{display:none}
.vtile__err{position:absolute;left:6px;right:6px;bottom:6px;padding:4px 7px;border-radius:5px;background:rgba(255,255,255,.9);color:#b3261e;font:10px/1.3 system-ui,sans-serif;pointer-events:none}

/* ---------- Kontakt ---------- */
.kontakt{padding:clamp(36px,6vw,52px) clamp(20px,5vw,60px);background:var(--contact-bg);display:flex;flex-direction:column;align-items:center;text-align:center}
.kontakt__inner{display:flex;flex-direction:column;align-items:center}
.kontakt__title{display:inline-block;font:700 clamp(20px,2.6vw,26px) 'Bricolage Grotesque',sans-serif;color:var(--accent-dark);margin:0 0 34px;letter-spacing:-.01em;cursor:default;transition:transform .25s ease,color .25s ease}
.kontakt__title:hover{color:var(--accent);transform:rotate(-2deg) scale(1.04)}
.kontakt__list{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0;padding:0;list-style:none;font-style:normal}
.kontakt__link,.kontakt__link:hover{display:flex;align-items:center;gap:14px;color:var(--ink)}
.kontakt__link span{font-size:16px}
.kontakt__link svg{flex:none}

@media (prefers-reduced-motion:reduce){
  .btn--primary,.kontakt__title,.vtile__play,.vtile__play span{transition:none}
  .btn--primary:hover{transform:none}
  .kontakt__title:hover{transform:none}
}

/* ---------- 404 ---------- */
.notfound{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;font-family:'SUSE',sans-serif}
.notfound__code{font:800 clamp(64px,12vw,120px)/1 'Bricolage Grotesque',sans-serif;color:var(--accent);letter-spacing:-.03em;margin:0 0 12px}
.notfound__title{font:700 clamp(22px,3vw,30px) 'Bricolage Grotesque',sans-serif;color:var(--ink);margin:0 0 10px}
.notfound__text{font:400 16px/1.55 'SUSE',sans-serif;color:var(--muted);margin:0 0 28px;max-width:420px}