:root{color-scheme:dark;--bg:#171918;--text:#eeeee7;--muted:#a4a79f;--accent:#c5d9a7;--line:#343833;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent);outline-offset:7px;border-radius:2px}a:hover{color:var(--accent)}.page{max-width:1080px;margin:auto;padding:0 64px}header{display:flex;align-items:center;justify-content:space-between;padding:39px 0}.wordmark{font-size:29px;font-weight:700;letter-spacing:-2px}.wordmark span,h1>span{color:var(--accent)}.header-link{font-size:13px;color:var(--muted);padding:12px 0}.header-link span{margin-left:13px;color:var(--accent)}.intro{padding:91px 0 77px;max-width:790px}.eyebrow,h2{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:1.5px;font-weight:400;color:var(--muted)}.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 27px}.dot{height:6px;width:6px;border-radius:100%;background:var(--accent)}.location{color:var(--muted);margin-left:5px}h1{font-size:clamp(55px,7.8vw,91px);font-weight:500;letter-spacing:-6px;line-height:1.04;margin:0 0 31px}.lead{font-size:clamp(29px,3.8vw,43px);letter-spacing:-1.3px;line-height:1.25;margin:0 0 25px}.lead em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:var(--accent)}.bio{max-width:490px;font-size:16px;line-height:1.85;color:var(--muted);margin:0}.social{display:flex;gap:28px;margin-top:28px}.social a{font-size:13px;min-height:44px;display:inline-flex;align-items:center;gap:11px}.social span{color:var(--accent)}.background{border-top:1px solid var(--line);padding:33px 0 42px;display:grid;grid-template-columns:240px 1fr;gap:25px}h2{margin:6px 0 0;line-height:1.6}.row{display:grid;grid-template-columns:87px 1fr;gap:16px;padding:0 0 25px}.row:last-child{padding-bottom:0}.row-label{font-size:12px;color:var(--muted);margin:5px 0}.row h3{font-size:15px;line-height:1.6;font-weight:400;margin:0 0 5px}.row div>p{font-size:13px;line-height:1.8;color:var(--muted);margin:0}.separator{margin:0 5px}footer{border-top:1px solid var(--line);padding:25px 0 33px;display:flex;justify-content:space-between;gap:15px;font-size:11px;color:var(--muted)}.footer-slash{margin:0 8px;color:#777f73}.skip{position:absolute;left:20px;top:-80px;padding:12px;background:var(--bg);z-index:1}.skip:focus{top:12px}
@media(min-width:1440px){.intro{padding-top:110px;padding-bottom:90px}}
@media(max-width:700px){.page{padding:0 27px}header{padding:23px 0}.intro{padding:65px 0 48px}h1{letter-spacing:-3.7px;margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:1px;gap:8px}.lead{font-size:32px;letter-spacing:-.8px}.bio{font-size:15px;line-height:1.8}.background{grid-template-columns:1fr;gap:25px;padding:28px 0 32px}.row{grid-template-columns:75px 1fr;gap:12px;padding-bottom:24px}footer{font-size:10px;padding:23px 0 28px}.social{gap:26px}}
@media(prefers-reduced-motion:no-preference){a{transition:color .18s ease}}

/* A small portrait keeps the introduction personal without dominating it. */
.intro{max-width:none}.identity{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:31px}.identity h1{margin:0}.portrait{width:112px;height:128px;object-fit:cover;object-position:50% 22%;border-radius:12px;border:1px solid var(--line);flex-shrink:0}.strengths{border-top:1px solid var(--line);padding:30px 0 35px}.strength-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;margin-top:25px}.strength-grid h3{font-size:15px;font-weight:400;color:var(--accent);margin:0 0 10px}.strength-grid p{font-size:13px;color:var(--muted);line-height:1.8;margin:0}
@media(max-width:700px){.identity{gap:20px;flex-direction:column-reverse;align-items:flex-start;margin-bottom:26px}.portrait{width:76px;height:86px;border-radius:9px}.strength-grid{grid-template-columns:1fr;gap:23px}.strengths{padding:27px 0 30px}.strength-grid h3{margin-bottom:6px}}

/* Use the desktop width to keep the complete profile in one viewport. */
@media(min-width:901px){
  .page{max-width:1200px;min-height:100svh;display:flex;flex-direction:column;padding:0 48px}
  header{padding:18px 0}
  main{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:64px;align-content:center;padding:18px 0 28px}
  .intro{grid-column:1;grid-row:1 / 3;padding:0;align-self:center}
  .eyebrow{margin-bottom:20px;font-size:10px;letter-spacing:1px}
  .identity{justify-content:flex-start;gap:20px;margin-bottom:22px}
  h1{font-size:clamp(44px,4.7vw,62px);letter-spacing:-3px}
  .portrait{width:68px;height:80px;border-radius:9px}
  .lead{font-size:32px;line-height:1.25;margin-bottom:20px}
  .bio{font-size:14px;line-height:1.8;max-width:410px}
  .social{margin-top:20px}
  .strengths{grid-column:2;border-top:0;padding:0 0 22px}
  h2{font-size:10px;margin-top:0}
  .strength-grid{grid-template-columns:1fr;gap:14px;margin-top:18px}
  .strength-grid h3{font-size:14px;margin-bottom:4px}
  .strength-grid p{font-size:13px;line-height:1.65}
  .background{grid-column:2;display:block;padding:20px 0 0}
  .rows{margin-top:15px}
  .row{grid-template-columns:64px 1fr;gap:12px;padding-bottom:12px}
  .row h3{font-size:13px;margin-bottom:2px}
  .row div>p{font-size:12px;line-height:1.6}
  .row-label{font-size:11px;margin-top:3px}
  footer{padding:16px 0 20px}
}
@media(min-width:901px) and (max-height:700px){
  header{padding:10px 0}main{padding:10px 0 16px}.strength-grid{gap:10px;margin-top:12px}.strengths{padding-bottom:16px}.background{padding-top:16px}.row{padding-bottom:9px}footer{padding:12px 0}
}