/* MALWA — Mallow theme layer on top of Bootstrap 5.3.
   Bootstrap owns layout, spacing and components; this file holds only the
   design's signature styling: palette, display type, arch "petal" frames,
   hover effects, and the few patterns Bootstrap has no primitive for.
   Shared by / (EN) and /pl/ (PL). */

:root{
  --paper:#fdfcfa;
  --ink:#211a1e;
  --mallow:#a44a6c;
  --mallow-soft:#f4e6ec;
  --stone:#877e83;
  --line:#e8e0e4;
  --arch:14rem;
  /* Bootstrap theming via its own CSS variables */
  --bs-body-font-family:'Karla',system-ui,sans-serif;
  --bs-body-bg:var(--paper);
  --bs-body-color:var(--ink);
  --bs-body-line-height:1.6;
  --bs-border-color:var(--line);
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--mallow);outline-offset:3px;border-radius:2px}

/* Match the original content width: 72rem content + 1.25rem side padding */
.container-xl{max-width:74.5rem;--bs-gutter-x:2.5rem}

/* ---- type roles ---- */
.display{font-family:'Fraunces',serif;font-weight:500;line-height:1.02;letter-spacing:-.02em}
.eyebrow{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mallow);font-weight:700;
}

/* ---- header / nav ---- */
.site-header{
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:600;text-decoration:none;color:var(--ink)}
.brand em{color:var(--mallow);font-style:italic}
.nav-link-soft{
  text-decoration:none;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--stone);transition:color .2s;
}
.nav-link-soft:hover{color:var(--mallow)}
.lang-switch{
  text-decoration:none;font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone);
  border:1px solid var(--line);border-radius:99px;padding:.35rem .85rem;
  transition:all .2s;
}
.lang-switch:hover{border-color:var(--mallow);color:var(--mallow)}
@media (max-width:40rem){ .nav-hide-sm{display:none} }

/* ---- hero ---- */
.hero-pad{padding-top:4rem;padding-bottom:5rem}
.hero-title{font-size:clamp(3.4rem,9vw,7rem)}
.hero-title em{font-style:italic;color:var(--mallow);font-weight:400}
.full-name{color:var(--stone);font-size:1.05rem}
.full-name strong{color:var(--ink);font-weight:700}
.lede{max-width:26rem;font-size:1.05rem}
/* original hero split was 1.1fr/.9fr = 55/45 — Bootstrap cols are 12ths, so exact widths */
@media (min-width:992px){ .col-hero-text{width:55%} .col-hero-img{width:45%} }
@media (max-width:991.98px){ .hero-pad{padding-top:2.5rem} .hero-arch{max-width:24rem} }

/* ---- buttons (Bootstrap .btn themed via --bs-btn-* vars) ---- */
.btn-mallow{
  --bs-btn-font-weight:700;--bs-btn-font-size:.85rem;
  --bs-btn-padding-x:1.7rem;--bs-btn-padding-y:.85rem;
  --bs-btn-border-radius:99px;
  letter-spacing:.1em;text-transform:uppercase;
  transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.btn-mallow:hover{transform:translateY(-2px)}
.btn-mallow-solid{
  --bs-btn-bg:var(--ink);--bs-btn-border-color:var(--ink);--bs-btn-color:var(--paper);
  --bs-btn-hover-bg:var(--mallow);--bs-btn-hover-border-color:var(--mallow);--bs-btn-hover-color:var(--paper);
  --bs-btn-active-bg:var(--mallow);--bs-btn-active-border-color:var(--mallow);--bs-btn-active-color:var(--paper);
}
.btn-mallow-ghost{
  --bs-btn-bg:transparent;--bs-btn-border-color:var(--ink);--bs-btn-color:var(--ink);
  --bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--mallow);--bs-btn-hover-color:var(--mallow);
  --bs-btn-active-bg:transparent;--bs-btn-active-border-color:var(--mallow);--bs-btn-active-color:var(--mallow);
}

/* signature: arch (petal) frame */
.arch{
  border-radius:var(--arch) var(--arch) .5rem .5rem;
  overflow:hidden;background:var(--mallow-soft);
}
.arch img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.hero-arch{box-shadow:0 30px 60px -30px rgba(164,74,108,.35)}

/* ---- sections ---- */
.section-pad{padding-top:4.5rem;padding-bottom:4.5rem}
.section-title{font-size:clamp(2rem,4.5vw,3rem)}

/* ---- portfolio filters (Bootstrap .btn themed) ---- */
.btn-filter{
  --bs-btn-font-weight:700;--bs-btn-font-size:.8rem;
  --bs-btn-padding-x:1.1rem;--bs-btn-padding-y:.55rem;
  --bs-btn-border-radius:99px;
  --bs-btn-bg:transparent;--bs-btn-border-color:var(--line);--bs-btn-color:var(--stone);
  --bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--mallow);--bs-btn-hover-color:var(--mallow);
  letter-spacing:.08em;text-transform:uppercase;
}
.btn-filter[aria-pressed="true"]{
  --bs-btn-bg:var(--mallow);--bs-btn-border-color:var(--mallow);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--mallow);--bs-btn-hover-border-color:var(--mallow);--bs-btn-hover-color:#fff;
}

/* ---- gallery (Bootstrap row-cols grid; original gutters via row vars) ---- */
.gallery-row{--bs-gutter-x:1.25rem;--bs-gutter-y:1.25rem}
@media (max-width:991.98px){ .gallery-row{--bs-gutter-x:.75rem;--bs-gutter-y:.75rem} }
.gallery-item{position:relative;border-radius:.5rem;overflow:hidden;background:var(--mallow-soft);margin:0}
/* every 1st and 5th of six gets the arch top */
.gallery-row > *:nth-child(6n+1) .gallery-item,
.gallery-row > *:nth-child(6n+5) .gallery-item{border-radius:var(--arch) var(--arch) .5rem .5rem}
.gallery-item img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .5s ease}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-item figcaption{
  position:absolute;inset:auto 0 0 0;padding:2.2rem 1rem .9rem;
  background:linear-gradient(transparent,rgba(33,26,30,.72));
  color:#fff;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transition:opacity .3s;
}
.gallery-item:hover figcaption,.gallery-item:focus-within figcaption{opacity:1}

/* ---- about ---- */
/* original about split was .8fr/1.2fr = 40/60 */
@media (min-width:992px){ .col-about-img{width:40%} .col-about-text{width:60%} }
@media (max-width:991.98px){ .about-arch{max-width:20rem} }
.about-row{border-top:1px solid var(--line)}
.bio{max-width:34rem}
.stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border:1px solid var(--line);border-radius:1rem;overflow:hidden;margin-bottom:0;
}
.stats div{padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.stats div:nth-child(odd){border-right:1px solid var(--line)}
.stats div:nth-last-child(-n+2){border-bottom:none}
.stats dt{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.stats dd{font-family:'Fraunces',serif;font-size:1.25rem;margin-top:.15rem;margin-bottom:0}

/* ---- on screen ---- */
.screen{background:var(--mallow-soft)}
.screen blockquote{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.35;margin-bottom:0;
}
.screen-list{list-style:none;padding-left:0;display:grid;gap:.6rem;margin-bottom:0}
.screen-list li{padding-left:1.2rem;position:relative;font-size:.95rem}
.screen-list li::before{content:"";position:absolute;left:0;top:.55em;width:.45rem;height:.45rem;border-radius:50%;background:var(--mallow)}

/* ---- contact / footer ---- */
.contact-title{font-size:clamp(2.4rem,6vw,4.5rem)}
.contact-title em{font-style:italic;color:var(--mallow)}
.contact-email{
  font-family:'Fraunces',serif;font-size:clamp(1.2rem,3vw,1.8rem);
  text-decoration:none;color:var(--ink);
  border-bottom:2px solid var(--mallow);padding-bottom:.15rem;
}
.contact-email:hover{color:var(--mallow)}
.contact-phone{
  font-family:'Fraunces',serif;font-size:clamp(1rem,2.2vw,1.35rem);
  text-decoration:none;color:var(--stone);
}
.contact-phone:hover{color:var(--mallow)}
.social-link{
  font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--stone);
}
.social-link:hover{color:var(--mallow)}
.site-footer{border-top:1px solid var(--line);font-size:.8rem;color:var(--stone)}