/* A large title behind a clean white editorial card. */
#about.about-editorial{
 padding:clamp(32px,3vw,64px) var(--gutter,5vw) clamp(64px,8vw,150px);
 min-height:0;
 isolation:isolate;
}
#about .about-title{
 position:sticky;top:80px;z-index:0;margin:0;
 color:#000;font-size:max(48px,8.2vw);font-weight:700;line-height:.9;letter-spacing:-.045em;   /* ta sama wielkość co „Portfolio” */
 white-space:nowrap;max-width:100%;box-sizing:border-box;padding-inline:0;
}
#about .about-grid{
 position:relative;z-index:2;
 margin-top:clamp(24px,5vh,64px);padding:clamp(28px,4.5vw,90px);
 display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
 gap:clamp(28px,4.5vw,90px);align-items:start;
 background:#fff;border-radius:clamp(30px,3.6vw,72px);
 box-shadow:0 18px 60px rgba(0,0,0,.045);
}
#about .bio{
 grid-column:1;grid-row:1;
 max-width:none;gap:1.35em;color:#0a0a0a;
 font-size:clamp(18px,1.7vw,34px);font-weight:400;line-height:1.5;letter-spacing:-.025em;
}
#about .bio-head{margin:0 0 .1em;gap:0}
#about .about-name{margin:0;font-size:clamp(14px,1vw,20px);font-weight:500;letter-spacing:.01em;color:#666;line-height:1.4}
#about .bio p.lead,#about .bio p.sign{
 max-width:none;margin:0;font-size:1em;line-height:inherit;letter-spacing:inherit;color:inherit;
}
#about .portrait{
 grid-column:2;grid-row:1;align-self:start;
 position:sticky;top:110px;
 width:100%!important;max-width:none;margin:0!important;aspect-ratio:1;
 overflow:hidden;border-radius:clamp(24px,3vw,56px);
 background:#eee;box-shadow:none!important;
}
#about .portrait img{object-fit:cover;object-position:50% 36%}
/* The new card is readable immediately, including when opened via the menu. */
#about.about-editorial .bio,#about.about-editorial .portrait,#about.about-editorial .portrait img,
#about.about-editorial .rv-t>.rv-in{opacity:1!important;transform:none!important;filter:none;transition:none!important}
#about.about-editorial .rv-t{overflow:visible;padding-bottom:0;margin-bottom:0}
#about.about-editorial .rv-in{font-size:inherit!important}
#about .bio p.lead{font-weight:500;font-size:1.12em;line-height:1.3}
#about .bio p.sign{font-weight:700}
@media(max-width:760px){
 #about.about-editorial{padding-top:100px;padding-left:5vw;padding-right:5vw}
 #about .about-title{font-size:clamp(60px,15vw,112px);line-height:.9}
 #about .about-grid{margin-top:24px;padding:24px;grid-template-columns:minmax(0,1fr);gap:30px;border-radius:30px}
 #about .portrait{position:relative;top:auto;grid-column:1;grid-row:1;aspect-ratio:1;border-radius:22px}
 #about .bio{grid-column:1;grid-row:2;font-size:19px;line-height:1.5;gap:1.1em}
 #about .about-name{font-size:14px}
}
/* białe tło strony → biała karta odcina się wyraźniejszym cieniem */
#about .about-grid{box-shadow:0 30px 80px -20px rgba(0,0,0,.16),0 2px 10px rgba(0,0,0,.05)}
/* ===== About v3 (2026-10-25): napis „About” zawsze nad kartą (karta przejeżdża POD nim), treść karty wyrównana do lewej
   krawędzi layoutu (jak „About” / „Portfolio”), nagłówki „Random facts” / „Back story” większe, w płynącym gradiencie marki ===== */
#about .about-title{z-index:5!important}
@media(min-width:761px){
 #about .about-grid{--ap:clamp(28px,4.5vw,90px);margin-left:calc(-1 * var(--ap));margin-right:calc(-1 * var(--ap));padding-left:var(--ap)}
}
#about .about-chapter h3{font-size:clamp(34px,3.6vw,72px)!important;line-height:1!important;font-weight:700;letter-spacing:-.045em;margin:0 0 .45em!important;
 width:max-content;max-width:100%;color:transparent!important;-webkit-text-fill-color:transparent;
 background:linear-gradient(90deg,#ff6ee0,#a678ff,#66d9ff,#4dff88,#ff6ee0) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;animation:abGrad 7s linear infinite}
#about #story-title{animation-delay:-3.5s}
#about .bio strong{background:linear-gradient(transparent 62%,color-mix(in srgb,#a678ff 28%,transparent) 62%);padding:0 .06em}
#about .about-facts li:nth-child(3n+1) strong{background:linear-gradient(transparent 62%,color-mix(in srgb,#ff6ee0 30%,transparent) 62%)}
#about .about-facts li:nth-child(3n+2) strong{background:linear-gradient(transparent 62%,color-mix(in srgb,#66d9ff 34%,transparent) 62%)}
#about .about-facts li:nth-child(3n) strong{background:linear-gradient(transparent 62%,color-mix(in srgb,#4dff88 34%,transparent) 62%)}
@keyframes abGrad{to{background-position:-250% 0}}
@media(prefers-reduced-motion:reduce){#about .about-chapter h3{animation:none}}
/* „About” na białym pasku od samej góry ekranu — karta i tekst chowają się pod nim, nic nie wchodzi na litery */
@media(min-width:761px){
 #about .about-title{top:0!important;margin-top:-80px!important;padding:80px var(--gutter,5vw) 26px!important;margin-left:calc(-1 * var(--gutter,5vw))!important;margin-right:calc(-1 * var(--gutter,5vw))!important;
  background:linear-gradient(#fff 85%,rgba(255,255,255,0))!important;max-width:none!important}
}
@media(min-width:761px){#about .portrait{top:calc(80px + max(48px,8.2vw) * .9 + 44px)!important}}
/* treść karty bliżej napisu „About” (mniej niż odstęp „About” ↔ przycisk Portfolio) */
@media(min-width:761px){#about .about-grid{margin-top:-10px!important;padding-top:28px!important}#about .about-title{padding-bottom:14px!important}}
@media(min-width:761px){#about.about-editorial{padding-top:clamp(90px,9vw,150px)!important}#about .about-grid{margin-top:-36px!important}}
/* wjazd tekstów od lewej + rysujący się zakreślacz (about-motion.js dodaje .ab-rv / .ab-in) */
#about .ab-rv{opacity:0;translate:-90px 0;filter:blur(6px);transition:opacity .9s cubic-bezier(.22,1,.36,1),translate 1.1s cubic-bezier(.16,1,.3,1),filter .9s ease}
#about .ab-rv.ab-in{opacity:1;translate:0 0;filter:none}
#about .bio strong{--hl:#a678ff;background:linear-gradient(color-mix(in srgb,var(--hl) 30%,transparent),color-mix(in srgb,var(--hl) 30%,transparent)) no-repeat 0 88%/0% 40%!important;
 transition:background-size 1.1s cubic-bezier(.65,0,.35,1) .55s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#about .about-facts li:nth-child(3n+1) strong{--hl:#ff6ee0}
#about .about-facts li:nth-child(3n+2) strong{--hl:#66d9ff}
#about .about-facts li:nth-child(3n) strong{--hl:#4dff88}
#about .ab-in strong{background-size:100% 40%!important}
@media(prefers-reduced-motion:reduce){#about .ab-rv{opacity:1;translate:none;filter:none;transition:none}#about .bio strong{background-size:100% 40%!important;transition:none}}
#about .about-chapter p.lead{margin-bottom:1.1em!important}
/* telefon: podpis „Fabian Cieniuch” nad zdjęciem */
@media(max-width:760px){
 #about .about-grid{display:flex!important;flex-direction:column;gap:0!important}
 #about .bio{display:contents!important}
 #about .bio-head{order:-2;margin:0 0 12px!important}
 #about .portrait{order:-1;margin:0 0 30px!important}
 #about .about-chapter{order:0}
}
@media(max-width:760px){#about .about-title{position:relative!important;top:auto!important}}   /* telefon: „About” nie przykleja się i nie wchodzi na tekst */
/* telefon: bez białej apli — tekst i zdjęcie bezpośrednio na tle, jak na desktopie; zdjęcie na całą szerokość; imię większe i czarne */
@media(max-width:760px){
 #about .about-grid{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important;margin:18px 0 0!important;transform:none!important;clip-path:none!important}
 #about.about-editorial{padding-left:5vw!important;padding-right:5vw!important}
 #about .about-name{font-size:24px!important;color:#0A0A0A!important;font-weight:500!important;text-align:center}
 #about .bio-head{margin:0 0 14px!important}
 #about .portrait{width:100%!important;border-radius:22px}
}
@media(max-width:760px){#about .bio-head{display:flex!important;justify-content:center!important;width:100%}}
/* telefon: bez podpisu „Fabian Cieniuch”, „About” tuż nad zdjęciem */
@media(max-width:760px){
 #about .bio-head{display:none!important}
 #about.about-editorial{padding-top:48px!important}
 #about .about-title{padding:0!important;margin:0!important}
 #about .about-grid{margin-top:14px!important}
}