:root {
  --ink: #151515;
  --paper: #f9f7f2;
  --blue: #1558d6;
  --soft-blue: #86b1ff;
  --line: #c8c5bd;
  --muted: #62615c;
  --display: "Inter", sans-serif;
  --hero: "Inter", sans-serif;
  --body: "Inter", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); font-optical-sizing: auto; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
header { min-height: 88px; border-bottom: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 16px clamp(22px, 4vw, 70px); }
.brand { font: 800 15px/.8 var(--display); letter-spacing: -.07em; }
.header-role { justify-self: center; margin: 0; font: 500 11px/1.18 var(--body); text-transform: uppercase; letter-spacing: .07em; }
.header-contact { justify-self: end; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.header-contact span, .closing span { color: var(--blue); margin-left: 10px; }
.opening { min-height: calc(100vh - 88px); display: grid; grid-template-columns: 1.12fr .88fr; }
.opening-title { padding: clamp(70px, 11vw, 160px) clamp(22px, 5vw, 90px) 54px; display: flex; flex-direction: column; align-items: flex-start; }
.opening-title > p, .section-code, .role-date, .role-period { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.opening-title > p { margin: 0 0 clamp(64px, 9vw, 125px); color: var(--blue); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 46px; font: 750 clamp(70px, 10vw, 156px)/.88 var(--hero); letter-spacing: -.04em; }
h1 i { font-weight: 500; color: var(--blue); font-style: normal; }
.narrow-break { display: none; }
.scroll-link { font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; display: flex; gap: 42px; transition: color .2s, border-color .2s; }
.scroll-link:hover { color: var(--blue); border-color: var(--blue); }
.current-role { background: var(--blue); color: white; padding: clamp(34px, 5vw, 70px); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 580px; }
.role-mark { font: 700 12px/1 var(--body); width: 48px; height: 48px; border: 1px solid currentColor; display: grid; place-items: center; border-radius: 50%; }
.role-portrait { width: clamp(112px, 11vw, 168px); height: clamp(112px, 11vw, 168px); object-fit: cover; object-position: center 28%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 50%; }
.role-date { margin-bottom: 18px; }
.current-role h2 { max-width: 410px; margin-bottom: 15px; font: 700 clamp(29px, 3.2vw, 52px)/.94 var(--display); letter-spacing: -.065em; }
.current-role h2 + p { margin-bottom: 0; font-size: 14px; }
.role-description { max-width: 440px; font-size: 16px; line-height: 1.5; margin: 44px 0; }
.role-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.role-tags span { border: 1px solid rgba(255,255,255,.65); border-radius: 30px; padding: 7px 10px; font-size: 11px; }
.intro { padding: clamp(90px, 13vw, 180px) clamp(22px, 10vw, 185px); display: grid; grid-template-columns: minmax(130px, .42fr) 1fr minmax(180px, .4fr); border-bottom: 1px solid var(--ink); gap: 35px; }
.section-code { color: var(--blue); margin: 5px 0 0; }
.intro-copy { max-width: 780px; margin: 0; font: 600 clamp(32px, 4.2vw, 67px)/.98 var(--display); letter-spacing: -.065em; }
.intro-detail { align-self: end; max-width: 230px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.proof { background: var(--ink); color: white; display: grid; grid-template-columns: minmax(240px, .9fr) 1.1fr; padding: clamp(75px, 10vw, 150px) clamp(22px, 5vw, 90px); gap: 70px; }
.proof .section-code { color: var(--soft-blue); }
.proof h2, .record h2, .open-source h2, .education h2 { margin: 50px 0 0; font: 700 clamp(43px, 5vw, 78px)/.9 var(--display); letter-spacing: -.075em; }
.proof-list { border-top: 1px solid #565656; }
.proof-list article { display: grid; grid-template-columns: minmax(125px, .56fr) 1fr; gap: 28px; padding: 24px 0 29px; border-bottom: 1px solid #565656; }
.proof-figure { color: var(--soft-blue); margin: 0; font: 700 clamp(36px, 4vw, 59px)/.85 var(--display); letter-spacing: -.075em; }
.proof-list h3 { margin-bottom: 7px; font: 600 17px/1.1 var(--display); letter-spacing: -.025em; }
.proof-list div p { margin: 0; color: #c6c5c0; font-size: 14px; line-height: 1.48; }
.record { padding: clamp(90px, 12vw, 170px) clamp(22px, 5vw, 90px) 48px; }
.record-head { display: grid; grid-template-columns: minmax(210px, .8fr) 1.2fr; margin-bottom: 95px; }
.record h2 { margin-top: 0; }
.roles { border-top: 1px solid var(--ink); }
.role-entry { display: grid; grid-template-columns: minmax(100px, .33fr) minmax(140px, .53fr) 1.2fr; gap: 30px; padding: 30px 0 44px; border-bottom: 1px solid var(--line); }
.role-period { color: var(--blue); margin: 3px 0 0; }
.role-company { font: 700 clamp(23px, 2.4vw, 37px)/.95 var(--display); letter-spacing: -.055em; }
.role-body h3 { margin-bottom: 14px; font: 600 19px/1.08 var(--display); letter-spacing: -.035em; }
.role-body > p { color: var(--muted); font-size: 14px; line-height: 1.52; margin-bottom: 17px; }
ul { padding: 0; margin: 0; list-style: none; }
li { padding: 8px 0 8px 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.45; position: relative; }
li::before { content: "•"; color: var(--blue); position: absolute; left: 0; }
.open-source { padding: clamp(90px, 12vw, 170px) clamp(22px, 5vw, 90px); background: #e5dfd2; display: grid; grid-template-columns: minmax(230px, .85fr) 1.15fr; gap: 70px; }
.open-source h2 { max-width: 475px; }
.source-links { border-top: 1px solid var(--ink); }
.source-links a { min-height: 96px; display: grid; grid-template-columns: minmax(130px, .6fr) 1fr 25px; gap: 18px; align-items: center; border-bottom: 1px solid var(--line); transition: color .2s, padding .2s; }
.source-links a > span { font: 600 18px/1 var(--display); letter-spacing: -.035em; }
.source-links small { color: var(--muted); font-size: 13px; }
.source-links b { color: var(--blue); font-size: 20px; font-weight: 400; }
.source-links a:hover { color: var(--blue); padding-left: 10px; }
.education { padding: 48px clamp(22px, 5vw, 90px); display: grid; grid-template-columns: minmax(180px, .65fr) 1.1fr minmax(250px, .85fr); gap: 40px; border-bottom: 1px solid var(--ink); }
.education h2 { margin: 0 0 12px; font-size: clamp(29px, 3vw, 47px); }
.education div p, .certs { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }
.personal { padding: clamp(75px, 10vw, 145px) clamp(22px, 10vw, 185px); background: #e5dfd2; display: grid; grid-template-columns: minmax(230px, .8fr) minmax(280px, .6fr); justify-content: space-between; gap: clamp(42px, 8vw, 130px); }
.personal-copy { align-self: center; }
.personal h2 { margin: 50px 0 26px; font: 700 clamp(43px, 5vw, 78px)/.92 var(--display); letter-spacing: -.04em; }
.personal-copy > p:last-child { max-width: 320px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.personal figure { width: min(100%, 470px); margin: 0; justify-self: end; }
.personal img { display: block; width: 100%; height: auto; }
.personal figcaption { margin-top: 12px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.closing { min-height: 530px; padding: clamp(70px, 9vw, 125px) clamp(22px, 5vw, 90px); background: var(--blue); color: white; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.closing > p { margin: 0; font: 600 clamp(38px, 5.4vw, 85px)/.9 var(--display); letter-spacing: -.075em; max-width: 850px; }
.closing > a:not(.linkedin) { font: 600 clamp(24px, 3vw, 47px)/1 var(--display); letter-spacing: -.055em; border-bottom: 1px solid white; padding-bottom: 10px; }
.closing .linkedin { font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.75); padding-bottom: 5px; }
footer { padding: 22px clamp(22px, 5vw, 90px); display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
footer a:hover { color: var(--blue); }
@media (max-width: 860px) {
  .opening, .proof, .open-source, .personal { grid-template-columns: 1fr; }
  .opening-title { min-height: 580px; }
  .current-role { min-height: 580px; }
  .intro { grid-template-columns: 1fr; gap: 28px; }
  .intro-detail { max-width: 430px; }
  .proof { gap: 55px; }
  .record-head { grid-template-columns: 1fr; gap: 34px; margin-bottom: 64px; }
  .role-entry { grid-template-columns: 85px 1fr; gap: 18px; }
  .role-body { grid-column: 2; }
  .education { grid-template-columns: 1fr; gap: 26px; }
  .personal figure { justify-self: start; }
}
@media (max-width: 520px) {
  header { grid-template-columns: 1fr auto; }
  .header-role { display: none; }
  .header-contact { font-size: 12px; }
  h1 { font-size: 67px; }
  .narrow-break { display: inline; }
  .opening-title { min-height: 520px; }
  .proof-list article { grid-template-columns: 1fr; gap: 12px; }
  .role-entry { grid-template-columns: 1fr; gap: 14px; }
  .role-body { grid-column: auto; }
  .source-links a { grid-template-columns: 1fr 22px; gap: 7px; padding: 19px 0; }
  .source-links small { grid-row: 2; }
  .source-links b { grid-column: 2; grid-row: 1; }
  footer { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }