@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/dm-sans.woff2) format("woff2")}

*{box-sizing:border-box}
a{color:inherit}
.me{display:flex;align-items:center;gap:18px}
.pic{width:84px;height:84px;border-radius:21px;object-fit:cover;flex:none}
h1{margin:0}
.role{margin:7px 0 0;color:var(--role)}
/* dark grey words, lighter grey bullets */
.role .sep{color:var(--sep);padding:0 .12em;font-weight:400}
.bio{margin:0;display:flex;flex-direction:column;gap:10px}
.bio p{margin:0}
.cta{display:flex;gap:9px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:10.75rem;text-decoration:none;font-size:0.8438rem;
  font-weight:500;padding:10px 18px;border-radius:10px;
  transition:transform .15s cubic-bezier(.2,.8,.3,1),background-color .18s ease}
.btn:active{transform:scale(.965)}
.btn svg{width:15px;height:15px;fill:currentColor}
.heart{color:#e0245e;font-style:normal}
.mk{object-fit:contain;flex:none;background:var(--plaque);padding:var(--plpad);border-radius:8px}
ul{list-style:none;margin:0;padding:0}

:root{--bg:#f7f8f9;--ink:#14171b;--muted:#6d747f;--rule:#e5e7ea;--name:#2f5f94;--role:#454b54;--sep:#a9afb7;
  --work:#3f6ea8;--invest:#3b7b62;--fav:#b0561a;--plaque:transparent;--plpad:0}
@media (prefers-color-scheme:dark){:root{--bg:#0f1114;--ink:#eceef2;--muted:#8e959f;--rule:#24272c;--role:#c5cbd3;--sep:#666d77;
  --name:#86b3e2;--work:#80abd9;--invest:#6dba9a;--fav:#e0954f;--plaque:#f3f2ee;--plpad:5px}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased}
.page{max-width:900px;margin:0 auto;padding:60px 26px 70px}
header{container-type:inline-size}
/* The masthead stacks at every width: photo, then the name, then the tagline.
   The name is sized from the header's own width, so it fills the column on a
   narrow screen and stops at its fitted size on a wide one, and the tagline is
   derived from it so the two always end on the same pixel. cqw rather than vw
   because vw includes the scrollbar, which the column does not have. The 1%
   held back is a subpixel cushion against a wrap. */
.me{flex-direction:column;align-items:flex-start;gap:20px;
  --h1:min(4.9875rem,calc(100cqw*.2316))}
.pic{width:min(10.625rem,45vw);height:auto;aspect-ratio:1;border-radius:24%}
h1{font-size:var(--h1);font-weight:400;letter-spacing:-.032em;line-height:1.02;
  color:var(--name)}
.role{font-size:calc(var(--h1)*.2130);font-weight:400;letter-spacing:-.005em}
.bio{margin:20px 0 0;font-size:1rem;line-height:1.6;color:var(--muted);max-width:none}
.cta{margin:24px 0 0}
.cta{gap:26px}
.btn{font-size:1rem;font-weight:500;padding:2px 0;min-width:0;border:0;border-radius:0;
  color:var(--name);border-bottom:2px solid color-mix(in srgb,var(--name) 30%,transparent)}
.btn svg{width:17px;height:17px}
.btn:hover{border-bottom-color:var(--name)}
.btn:active{transform:none;opacity:.7}
.grp{margin-top:40px}
.grp[data-sec=work]{--acc:var(--work)}
.grp[data-sec=invest]{--acc:var(--invest)}
.grp[data-sec=fav]{--acc:var(--fav)}
.grp h2{margin:0 0 20px;padding-bottom:9px;border-bottom:2px solid var(--acc);
  font-size:0.9062rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--acc)}
.marks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px}
.cell{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;
  text-decoration:none;transition:transform .18s cubic-bezier(.2,.85,.3,1)}
.mk{width:72px;height:72px;margin-bottom:14px;
  filter:saturate(.92);transition:filter .2s ease,transform .2s cubic-bezier(.2,.85,.3,1)}
.nm{font-size:0.9062rem;font-weight:500;letter-spacing:-.005em}
.dst{font-size:0.7812rem;color:var(--muted);transition:color .18s ease}
a.cell:hover .mk{filter:none;transform:scale(1.06)}
a.cell:hover .dst{color:var(--acc)}
a.cell:active{transform:scale(.985);transition-duration:.08s}
.cell.out .mk{filter:grayscale(1);opacity:.55}
.cell.out .nm{color:var(--muted)}
.cell.out .dst{font-size:0.6562rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.foot{margin:52px 0 0;font-size:0.7812rem;color:var(--muted)}
a:focus-visible{outline:2px solid var(--acc,var(--ink));outline-offset:5px;border-radius:6px}
@media (max-width:820px){.marks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){
  .page{padding:38px 18px 54px}.me{gap:16px}
  .marks{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  .mk{width:56px;height:56px}
}
@media (prefers-contrast:more){:root{--muted:#3f454e;--rule:#98a0aa}a:focus-visible{outline-width:3px}}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){:root{--muted:#c4cad3;--rule:#4c525c}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}