/* LSS.works v5 - About page layer.
   Loaded after styles-v5.css and case-v5.css; it only adds what the About page needs
   beyond the shared case components. Tokens come from those files (--line, --ink, --muted,
   --faint, --surface, --p-brand, --cta-brand). Every authored px value is an even integer. */

/* three stats in the shared fact bar */
.factbar.f3{grid-template-columns:repeat(3,1fr)}
.factbar.f3 .v{font-size:clamp(24px,3vw,32px);font-weight:900;letter-spacing:-.02em;line-height:1.1}
@media (max-width:760px){
  .factbar.f3{grid-template-columns:repeat(3,1fr)}
  .factbar.f3 .f{padding:16px 12px}
}

/* hero links: one filled action, one quiet link */
.about-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.about-links .casefoot-button{margin-top:0}
.about-links a:not(.casefoot-button){font-size:14px;color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .18s,color .18s}
.about-links a:not(.casefoot-button):hover{color:var(--ink);border-color:var(--p-brand)}
.about-links a:focus-visible{outline:2px solid var(--cta-brand);outline-offset:4px}

/* skills accordion: one row per discipline, the panel opens in place */
.skills{border-top:1px solid var(--line)}
.srow{position:relative;border-bottom:1px solid var(--line)}
.srow::before{content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--p-brand);transition:height .3s var(--ease-out)}
.srow:hover::before,.srow.open::before{height:100%}
.srow-head{display:grid;grid-template-columns:240px 1fr 34px;align-items:center;gap:24px;width:100%;text-align:left;
  padding:22px 0;transition:padding .3s var(--ease-out),background-color .3s var(--ease)}
.srow:hover .srow-head,.srow.open .srow-head{background:var(--surface);padding-inline:16px}
.srow-head h3{margin:0;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.srow-head .sc{font-size:14px;line-height:1.5;color:var(--muted)}
.srow-head .ac{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);color:var(--muted);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.srow-head .ac svg{width:14px;height:14px;transition:transform .3s var(--ease-out)}
.srow:hover .ac,.srow.open .ac{border-color:var(--p-brand);color:var(--p-brand)}
.srow.open .ac svg{transform:rotate(180deg)}
.srow-head:focus-visible{outline:2px solid var(--p-brand);outline-offset:-2px}
.srow-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease-out)}
.srow.open .srow-panel{grid-template-rows:1fr}
.srow-panel > div{overflow:hidden}
.srow-panel p{margin:0;padding:4px 16px 24px;max-width:68ch;font-size:16px;line-height:1.7;color:var(--muted)}
@media (max-width:760px){
  .srow-head{grid-template-columns:1fr 34px;gap:6px 16px;padding:18px 0}
  .srow-head .sc{grid-column:1;grid-row:2}
  .srow-head .ac{grid-column:2;grid-row:1 / span 2}
}
@media (prefers-reduced-motion:reduce){
  .srow::before,.srow-head,.srow-head .ac,.srow-head .ac svg,.srow-panel{transition:none}
}

/* how I work: text beside the tool list */
.about-two{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start}
@media (max-width:900px){ .about-two{grid-template-columns:1fr;gap:32px} }
.about-label{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--p-brand)}
.about-tools{display:flex;flex-wrap:wrap;gap:8px}
.accent-t{color:var(--p-brand)}

/* the three stats stack on the narrowest phones: Polish labels such as "poprowadzonych osób" do not fit a third of 320px */
@media (max-width:480px){
  .factbar.f3{grid-template-columns:1fr}
  .factbar.f3 .f{padding:14px 16px}
}
/* keyboard parity */
.about-links a:not(.casefoot-button):focus-visible{color:var(--ink);border-color:var(--p-brand)}
.srow:focus-within::before{height:100%}
.srow:focus-within .srow-head{background:var(--surface);padding-inline:16px}
.srow:focus-within .ac{border-color:var(--p-brand);color:var(--p-brand)}

.about-links a:not(.casefoot-button){display:inline-flex;align-items:center;gap:8px}
.about-links a .ico{transition:transform .22s var(--ease-out)}
.about-links a:hover .ico-r,.about-links a:focus-visible .ico-r{transform:translateX(3px)}
.story .body{max-width:62ch}