/* Shared about content: hello, bio, awards table, testimonials. Variants size it via --ab-* vars. */
.ab-hello { font-size: var(--ab-hello, clamp(56px, 9vw, 152px)); font-weight: 500; line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
.ab-bio { display: grid; gap: 1em; font-size: var(--ab-bio, 17px); line-height: 1.5; letter-spacing: -.005em; text-wrap: pretty; }
.ab-h { font-size: var(--ab-h, 13px); font-weight: 500; color: var(--muted); letter-spacing: 0; margin-bottom: 12px; }
.ab-awards dl { display: grid; font-size: var(--ab-row, 15px); line-height: 1.4; }
.ab-awards dl > div { display: grid; grid-template-columns: var(--ab-col, 9.5em) 1fr; gap: 16px; padding: var(--ab-row-pad, 12px) 0;
  border-top: 1px solid var(--surface-stroke); }
.ab-awards dl > div:last-child { border-bottom: 1px solid var(--surface-stroke); }
.ab-awards dt { color: var(--muted); }
.ab-awards dd { margin: 0; font-variant-numeric: tabular-nums; }
.ab-quotes { display: grid; gap: 28px; }
.ab-quote { display: grid; gap: 10px; margin: 0; }
.ab-qmark { width: 18px; height: auto; color: var(--ink); opacity: .9; }
.ab-quote blockquote { margin: 0; font-size: var(--ab-quote, 19px); line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; }
.ab-quote figcaption { display: grid; font-size: 13px; line-height: 1.45; }
.ab-who { font-weight: 500; }
.ab-role { color: var(--muted); }
/* Marquee: two identical rows slide left forever; hover pauses; reduced motion makes it a plain scroller. */
.ab-quotes.is-marquee { gap: 16px; }
.ab-track { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ab-row { display: flex; flex: none; gap: 48px; padding-right: 48px; animation: ab-marquee 70s linear infinite; }
.ab-row .ab-quote { width: 340px; flex: none; align-content: start; }
@media (hover: hover) { .ab-track:hover .ab-row { animation-play-state: paused; } }
@keyframes ab-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .ab-track { overflow-x: auto; mask-image: none; } .ab-row { animation: none; } .ab-row[aria-hidden] { display: none; }
}
/* Name as the About button: plain name plus a very light arrow that nudges on hover. */
.name-btn { font: inherit; color: inherit; background: none; border: 0; padding: 10px 0; margin: -10px 0; cursor: pointer; }
.name-arrow { display: inline-block; margin-left: .35em; color: color-mix(in srgb, var(--muted) 55%, var(--bg)); transition: transform 200ms var(--ease-out), color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .name-btn:hover .name-arrow { transform: translateX(3px); color: var(--muted); } }
.name-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }