@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{--bg:#f4f4f1;--ink:#111;--muted:#6e6e6a;--line:#d6d6d0;--dark:#111;--white:#f5f5f2;--radius:28px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
.topbar{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(244,244,241,.9);backdrop-filter:blur(16px);z-index:10}
.brand{font-weight:800;font-size:20px;letter-spacing:-.08em}
nav{display:flex;gap:28px;font:12px 'DM Mono',monospace;text-transform:uppercase}
nav a{opacity:.65;transition:.2s}nav a:hover{opacity:1}
.hero{min-height:calc(100vh - 76px);padding:7vw 9vw;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:5vw}
.eyebrow,.date{font:11px 'DM Mono',monospace;letter-spacing:.13em;text-transform:uppercase}
.eyebrow{color:var(--muted)}
h1{font-size:clamp(70px,10vw,150px);line-height:.8;letter-spacing:-.085em;margin:30px 0}
h1 span{font-weight:400}
.role{font-size:18px;font-weight:700;max-width:620px}
.intro{max-width:600px;color:#555;font-size:17px}
.actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.button{display:inline-block;padding:14px 20px;border:1px solid #111;border-radius:999px;font-size:13px;font-weight:700;transition:.25s}
.button:hover{transform:translateY(-3px)}
.button.primary{background:#111;color:#fff}
.portrait-column{display:flex;align-items:center;flex-direction:column}
.portrait-wrap{width:min(360px,70vw);aspect-ratio:1;position:relative;display:grid;place-items:center;outline:none;cursor:pointer}
.portrait{width:68%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid #111;background:#ddd;position:relative;z-index:2;box-shadow:0 0 0 12px rgba(17,17,17,.035)}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.05)}
.portrait-fallback{width:100%;height:100%;place-items:center;font-size:clamp(45px,7vw,80px);font-weight:800;letter-spacing:-.08em;background:#d9d9d4}
.ripple{position:absolute;border:1px solid #111;border-radius:50%;opacity:.25;z-index:1}
.ripple-one{width:74%;height:74%}.ripple-two{width:87%;height:87%;opacity:.14}.ripple-three{width:100%;height:100%;opacity:.08}
.portrait-wrap:hover .ripple-one,.portrait-wrap:focus-visible .ripple-one{animation:ripple 1.5s ease-out infinite}
.portrait-wrap:hover .ripple-two,.portrait-wrap:focus-visible .ripple-two{animation:ripple 1.5s .2s ease-out infinite}
.portrait-wrap:hover .ripple-three,.portrait-wrap:focus-visible .ripple-three{animation:ripple 1.5s .4s ease-out infinite}
.orbit{position:absolute;width:106%;height:106%;border:1px dashed #aaa;border-radius:50%;animation:spin 18s linear infinite}
.portrait-caption{font:10px 'DM Mono',monospace;text-transform:uppercase;color:#888;margin-top:25px}
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.stats div{padding:25px 5vw;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.stats div:last-child{border:0}.stats strong{font-size:18px}.stats span{font-size:11px;color:#777}
.section{padding:10vw 9vw;display:grid;grid-template-columns:.35fr 1fr;gap:5vw}
.section-label{font:11px 'DM Mono',monospace;color:#888}
.section-content{max-width:900px}
.section h2{font-size:clamp(42px,5vw,80px);line-height:.98;letter-spacing:-.065em;margin:0 0 45px}
.section h2 em{font-weight:400}
.section p{font-size:17px;color:#555;max-width:760px}
.dark-section{background:#111;color:#f5f5f2}.dark-section .section-label{color:#777}.dark-section .section-content{display:grid;grid-template-columns:1fr 1fr;gap:20px}.dark-section .experience-card{border:1px solid #333;padding:32px;border-radius:var(--radius);min-height:250px;transition:.3s}.dark-section .experience-card:hover{background:#191919;transform:translateY(-5px)}.dark-section .experience-card p{color:#aaa}.dark-section .company{color:#eee!important;font-weight:700!important;margin-top:-10px}.date{color:#777}
.skills{display:flex;flex-wrap:wrap;gap:10px}.skills span{border:1px solid #bbb;border-radius:999px;padding:12px 17px;font-size:13px}.education{border-top:1px solid var(--line)}.degree{font-size:20px!important;color:#111!important;font-weight:700}
.contact{background:#e4e4df;padding:10vw 9vw}.contact h2{font-size:clamp(42px,6vw,90px);max-width:900px;line-height:.95;letter-spacing:-.07em;margin:20px 0 40px}.text-link{margin-left:18px;font:12px 'DM Mono',monospace;text-transform:uppercase;text-decoration:underline}
footer{padding:28px 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;font:10px 'DM Mono',monospace;text-transform:uppercase;color:#777}
@keyframes ripple{0%{transform:scale(.94);opacity:.35}100%{transform:scale(1.15);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:800px){nav{display:none}.hero{grid-template-columns:1fr;padding:70px 7vw}.portrait-column{order:-1}.portrait-wrap{width:min(270px,70vw)}h1{font-size:clamp(64px,19vw,110px)}.stats{grid-template-columns:1fr 1fr}.stats div{padding:20px 7vw}.section{grid-template-columns:1fr;padding:75px 7vw;gap:30px}.dark-section .section-content{grid-template-columns:1fr}.contact{padding:75px 7vw}.text-link{display:block;margin:22px 0 0}footer{padding:25px 7vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orbit,.portrait-wrap:hover .ripple-one,.portrait-wrap:hover .ripple-two,.portrait-wrap:hover .ripple-three{animation:none}}