/* ════════════════════════════════════════════════════════════════════════
   About — ported from the Claude Design prototype Murikual-Ueber-uns.dc.html.
   Tokens, the base reset, the button and the language switch are in site.css;
   mobile rules are in mobile.css. Deliberate changes are marked PORT.
   ════════════════════════════════════════════════════════════════════════ */
.ab,.ab *{box-sizing:border-box}
/* PORT: was overflow:hidden. On a real page that makes .ab the scroll
   container for position:sticky and the floating nav stops sticking;
   overflow-x:clip contains the same horizontal bleed without doing that. */
/* svh, not vh: see the note in home.css — this one only pushes the footer
   to the bottom on a short page, but 100vh would make every page taller
   than the screen on iOS. */
.ab{min-height:100vh;min-height:100svh;background:var(--surface-page);font-family:var(--font-sans),system-ui,sans-serif;color:var(--text-primary);display:flex;flex-direction:column;transition:background .45s var(--ease-out);overflow-x:clip}
.ab a{text-decoration:none;color:inherit}
.ab-wrap{max-width:1100px;margin:0 auto;padding:0 clamp(24px,5vw,60px);width:100%;position:relative}

/* nav (identical to the rest of the site) */

/* type */
.ab-ey{display:inline-flex;align-items:center;gap:9px;font:var(--fw-semibold) 12px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.ab-ey::before{content:"";width:22px;height:1.5px;background:var(--brand-500)}
.ab-h1{font:var(--fw-heavy) clamp(44px,6vw,88px)/0.96 var(--font-display);letter-spacing:-0.045em;margin:22px 0 0;text-wrap:balance;max-width:15ch}
.ab-h2{font:var(--fw-heavy) clamp(30px,3.6vw,50px)/1.02 var(--font-display);letter-spacing:-0.035em;margin:0;text-wrap:balance}
.ab-ital{font-family:var(--font-serif);font-style:italic;font-weight:var(--fw-regular);color:var(--brand-500)}
.ab-lead{font:var(--text-body-lg);color:var(--text-secondary);margin:0;line-height:1.62}
/* PORT: 8px of blur on a 500px circle is not a bloom, it is a disc with a
   slightly fuzzy edge. Matched to .v6-blob so both pages read the same. */
.ab-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
.mk-dark .ab-blob{background:radial-gradient(circle,rgba(79,116,255,.14),transparent 72%)!important;opacity:1!important;filter:blur(46px)}

/* mission line */
.ab-mission{font:var(--fw-heavy) clamp(26px,3.2vw,44px)/1.18 var(--font-display);letter-spacing:-0.03em;max-width:20ch}

/* team */
.ab-person{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2xl);padding:clamp(26px,3vw,40px);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.ab-person:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.ab-avatar{width:64px;height:64px;border-radius:50%;background:var(--gradient-bloom);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;font:var(--fw-heavy) 24px/1 var(--font-display);color:var(--brand-600);letter-spacing:-0.02em}
/* The bloom gradient is a light wash; on the dark card it reads as a glossy
   pearl rather than an avatar. Dark mode gets a flat brand-tinted disc. */
.mk-dark .ab-avatar{color:var(--brand-300);background:rgba(79,116,255,.14);border-color:rgba(79,116,255,.22)}
.ab-role{font:var(--fw-regular) 12px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--brand-500);margin-top:20px}
.ab-pname{font:var(--fw-heavy) clamp(24px,2.4vw,30px)/1 var(--font-display);letter-spacing:-0.02em;color:var(--text-primary);margin:8px 0 0}
.ab-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.ab-tag{font:var(--fw-semibold) 12px/1 var(--font-sans);color:var(--text-secondary);background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:999px;padding:7px 12px}

/* footer */
@media(max-width:820px){.ab-team{grid-template-columns:1fr!important}}

/* reveal-on-scroll */
.ab.ready .r{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.ab.ready .r.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ab.ready .r{opacity:1!important;transform:none!important}}