:root {
  --violet: rgb(109, 109, 212);
  --violet-transparent: rgba(109, 109, 212, 0.9);
  --violet-strong-transparent: rgba(109, 109, 212, 0.5);
  --violet-light-transparent: rgba(233, 233, 249);
  --dark-gray: #525252;
  --darker-gray: #313131;
  --devdraw: #0b2b53;
}
.background-container {
    /* display: flex; */
    position: fixed;
    top:0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    justify-content: center;
    align-items: end;
 
    background-position-x: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;
    background-image: url(/assets/my_cover.webp);
    opacity:.2;

}

.background-cover-mask {
    /* display: flex; */
    position: absolute;
    top:0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    justify-content: center;
    align-items: end;
 
    background-position-x: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;
    background-image: url(/assets/cover_mask.png);
    opacity:.8;

}
/* NIC co tworzy BFC! (czyli: bez flex/grid/overflow/inline-block itd.) */
.persona{
  position: relative;     /* ok, to nie tworzy BFC */
  z-index: 1;
  /* padding: 160px 16px 32px; */
  /* max-width: 820px; */
  margin: 0 auto;
}

/* klucz: float + shape-outside */
.wrap-shape{
  float: right;
  border: none!important;   
  outline: none !important;
  /* padding: 160px 16px 32px; */
  width: 100vw;
  height: 100dvh;

  shape-outside: url('/assets/cover_mask.png');
  -webkit-shape-outside: url('/assets/cover_mask.png');
  shape-image-threshold: .15;
  shape-margin: 12px;

  /* na czas strojenia:
  background: url('/assets/cover_mask.png') center/cover no-repeat;
  opacity: .18;
  */
}

/* wyczyść float na końcu, żeby sekcja miała wysokość */
.persona::after{ content:""; display:block; clear:both; }

/* upewnij się, że AKAPITY też nie tworzą BFC */
.persona p{
  /* żadnego: overflow:hidden/auto; display:inline-block; position:absolute; */
  margin: 0 0 1rem;
  color:var(--darker-gray);
  font-style: italic;
  text-indent: 2rem;
  font-size:clamp(1rem, 2vw, 1.5rem);
  text-align: justify;
  /* overflow-y: scroll; */
}
.text-content{
  padding: 250px 8vw 2rem 8vw;    /* boczny margines, jeśli chcesz */
  /* overflow-y: scroll; */
  max-width:1400px;
  margin:0 auto 2rem auto;
  position: relative;
}
/* przykład korekty na wąskich ekranach */
@media (max-width: 420px){
  /* .wrap-shape{ width: 62vw; height: 58vh; } */
}

.profile-photo {
    border-radius: 50%;
    float:left;
    margin:.5rem 2rem .5rem 0;
    max-width:45%;
    height:auto;
    shape-outside: circle(50%);
    transform: translateY(-0px);
    margin-top:0px;
}