/* about.css — the /about page. Loaded after shell.css and uses its
   --sh-* tokens; nothing here restyles the shell. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--sh-void); color: var(--sh-signal);
  font: 400 16px/1.6 var(--sh-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { width: min(1120px, 100%); margin-inline: auto; padding-inline: 16px; }
.mono { font-family: var(--sh-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.muted { color: var(--sh-muted); }
h1 em, h2 em { font: italic 300 1em/1 var(--sh-accent); color: var(--sh-paper); letter-spacing: -.02em; }

/* ---------- hero ---------- */
.ab-hero { position: relative; isolation: isolate; padding: calc(var(--sh-nav-h) + var(--sh-nav-top) + clamp(48px, 9vw, 110px)) 0 clamp(28px, 4vw, 48px); }
.ab-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(var(--sh-line-soft) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, var(--sh-line-soft) 1px, transparent 1px) 0 0 / 96px 100%;
  -webkit-mask-image: radial-gradient(70% 80% at 30% 20%, #000, transparent 78%);
  mask-image: radial-gradient(70% 80% at 30% 20%, #000, transparent 78%);
}
.ab-eyebrow { display: flex; align-items: center; gap: 12px; color: var(--sh-muted); }
.ab-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--sh-muted); }
.ab-hero h1 { margin: 22px 0 28px; max-width: 12ch; text-wrap: balance; font: 300 clamp(40px, 7.6vw, 96px)/.98 var(--sh-display); letter-spacing: -.035em; }
.ab-lead { margin: 0 0 14px; max-width: 34ch; color: var(--sh-slate); font-size: clamp(17px, 2vw, 20px); }
.ab-rise { animation: abrise .9s var(--sh-ease) both; }
.ab-hero .ab-rise:nth-child(2) { animation-delay: .08s; }
.ab-hero .ab-rise:nth-child(3) { animation-delay: .16s; }
@keyframes abrise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Amplitud / Profundidad ---------- */
.ab-duo { border-top: 1px solid var(--sh-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-duo p { margin: 0; padding: clamp(28px, 4vw, 48px) clamp(16px, 3vw, 40px) clamp(28px, 4vw, 48px) 0; display: grid; gap: 6px; align-content: start; color: var(--sh-slate); font-size: clamp(17px, 2vw, 20px); }
.ab-duo p + p { padding-left: clamp(16px, 3vw, 40px); border-left: 1px solid var(--sh-line); }
.ab-duo .mono { color: var(--sh-muted); margin-bottom: 10px; }
.ab-duo b { display: block; font: italic 300 clamp(34px, 5vw, 60px)/1 var(--sh-accent); color: var(--sh-paper); letter-spacing: -.02em; }

/* ---------- one chapter per founder ---------- */
.ab-person { border-top: 1px solid var(--sh-line); padding: clamp(56px, 8vw, 112px) 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ab-photo { position: sticky; top: calc(var(--sh-nav-h) + var(--sh-nav-top) + 28px); margin: 0; }
.ab-frame { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; background: var(--sh-surface); }
.ab-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-frame .bw { filter: grayscale(1) contrast(1.06); }
.ab-frame .co { clip-path: circle(0% at 50% 50%); transition: clip-path 1.1s var(--sh-ease); }
.ab-ring { position: absolute; left: 50%; top: 50%; width: 141.5%; aspect-ratio: 1 / 1; margin: -70.75% 0 0 -70.75%; border: 1px solid rgb(245 245 240 / .55); border-radius: 50%; transform: scale(0) rotate(0deg); opacity: 0; pointer-events: none; transition: transform 1.1s var(--sh-ease), opacity .5s; }
.ab-ring::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--sh-signal); }
.ab-frame:hover .co, .ab-person:focus-within .co { clip-path: circle(72% at 50% 50%); }
.ab-frame:hover .ab-ring, .ab-person:focus-within .ab-ring { transform: scale(1) rotate(200deg); opacity: 1; }
@media (hover: none) { .ab-frame .co { clip-path: circle(72% at 50% 50%); } .ab-ring { display: none; } }
.ab-photo figcaption { margin-top: 14px; color: var(--sh-muted); }
.ab-person.is-flip .ab-photo { order: 2; }
.ab-person h2 { margin: 0; text-wrap: balance; font: 300 clamp(38px, 5.4vw, 68px)/1 var(--sh-display); letter-spacing: -.03em; }
.ab-role { margin: 10px 0 0; font: italic 300 clamp(20px, 2.4vw, 26px)/1.2 var(--sh-accent); color: var(--sh-paper); }
.ab-tag { display: inline-block; margin: 0 0 18px; color: var(--sh-muted); }
.ab-pull { margin: 22px 0 0; max-width: 46ch; text-wrap: pretty; font: 300 clamp(17px, 1.7vw, 20px)/1.55 var(--sh-body); color: var(--sh-slate); }
.ab-figs { margin: 36px 0 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--sh-line); }
.ab-figs > div { padding: 18px 16px 0 0; display: grid; gap: 8px; align-content: start; }
.ab-figs b { font: 300 clamp(40px, 5vw, 64px)/.95 var(--sh-display); letter-spacing: -.04em; }
.ab-figs span { color: var(--sh-slate); font-size: 14px; max-width: 26ch; }
.ab-ledger { margin: 0; border-top: 1px solid var(--sh-line); }
.ab-ledger > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--sh-line); }
.ab-ledger dt { color: var(--sh-muted); font: 400 11px/1.9 var(--sh-mono); letter-spacing: .14em; text-transform: uppercase; }
.ab-ledger dd { margin: 0; color: var(--sh-signal); }
.ab-social { display: flex; gap: 16px; margin-top: 22px; }
.ab-social a { display: block; width: 20px; height: 20px; color: var(--sh-muted); transition: color .25s; }
.ab-social a:hover { color: var(--sh-signal); }
.ab-social svg { display: block; width: 20px; height: 20px; }
.ab-social a:focus-visible { outline: 2px solid var(--sh-signal); outline-offset: 4px; }

/* ---------- what the three share ---------- */
.ab-shared { border-top: 1px solid var(--sh-line); display: flex; flex-wrap: wrap; }
.ab-shared > div { flex: 1 1 220px; padding: 22px 16px 0 0; display: grid; gap: 6px; align-content: start; }
.ab-shared b { font: 300 34px/1 var(--sh-display); letter-spacing: -.02em; }
.ab-shared span { color: var(--sh-muted); font-size: 13px; max-width: 30ch; }

/* ---------- how we work ---------- */
.ab-firm { border-top: 1px solid var(--sh-line); padding: clamp(56px, 8vw, 104px) 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 88px); }
.ab-firm h2 { margin: 16px 0 0; text-wrap: balance; font: 300 clamp(30px, 4.6vw, 56px)/1.03 var(--sh-display); letter-spacing: -.025em; }
.ab-firm .ab-kick { color: var(--sh-muted); }
.ab-pledges { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sh-line); align-self: start; }
.ab-pledges li { padding: 20px 0; border-bottom: 1px solid var(--sh-line); }
.ab-pledges h3 { margin: 0 0 6px; font: 300 22px/1.2 var(--sh-display); letter-spacing: -.01em; }
.ab-pledges p { margin: 0; color: var(--sh-slate); }

@media (max-width: 819px) {
  .ab-duo { grid-template-columns: minmax(0, 1fr); }
  .ab-duo p + p { padding-left: 0; border-left: 0; border-top: 1px solid var(--sh-line); }
  .ab-person, .ab-firm { grid-template-columns: minmax(0, 1fr); }
  .ab-photo { position: static; }
  .ab-person.is-flip .ab-photo { order: 0; }
  .ab-frame { max-width: 320px; }
  .ab-ledger > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-rise { animation: none; }
  .ab-frame .co, .ab-ring { transition: none; }
  .ab-social a { transition: none; }
}