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

:root { --ink: #121b23; --muted: #67727b; --paper: #f5f6f3; --white: #fff; --lime: #c9f56c; --green: #80a951; --line: #dbe0d9; --dark: #18232b; --max: 1180px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Manrope', Arial, sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.site-header { align-items: center; display: flex; justify-content: space-between; margin: auto; max-width: var(--max); padding: 28px 28px 12px; }
.brand { align-items: center; display: inline-flex; font-size: 17px; font-weight: 800; letter-spacing: -.04em; gap: 10px; }.brand-mark { align-items: center; background: var(--ink); border-radius: 50%; color: var(--lime); display: inline-flex; font-family: 'DM Mono', monospace; font-size: 10px; height: 30px; justify-content: center; letter-spacing: -.1em; width: 30px; }.accent, em { color: var(--green); }.main-nav { display: flex; gap: 32px; font-size: 12px; font-weight: 700; }.main-nav a, .header-cta, .text-link { transition: color .2s ease; }.main-nav a:hover, .text-link:hover { color: var(--green); }.header-cta { background: var(--ink); border-radius: 99px; color: var(--white); font-size: 12px; font-weight: 700; padding: 11px 17px; }.header-cta span, .button span, .text-link span, .contact-email span { color: var(--lime); margin-left: 8px; }
.hero { align-items: center; display: grid; gap: 50px; grid-template-columns: 1.04fr .96fr; margin: auto; max-width: var(--max); min-height: 660px; padding: 70px 28px 90px; }.eyebrow { color: var(--green); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .08em; margin: 0 0 18px; text-transform: uppercase; }.status-dot { background: var(--green); border-radius: 50%; display: inline-block; height: 7px; margin-right: 8px; width: 7px; }.hero h1, h2 { font-size: clamp(44px, 5vw, 72px); letter-spacing: -.065em; line-height: 1.06; margin: 0; max-width: 720px; }.hero h1 em, h2 em { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; }.hero-text { color: var(--muted); font-size: 16px; margin: 29px 0; max-width: 570px; }.hero-text strong { color: var(--ink); }.hero-actions { align-items: center; display: flex; gap: 23px; }.button { border-radius: 3px; display: inline-block; font-size: 12px; font-weight: 800; padding: 15px 20px; }.button-primary { background: var(--ink); color: var(--white); }.button-quiet { border-bottom: 1px solid var(--ink); padding-left: 0; padding-right: 0; }.button-quiet span { color: var(--green); }.hero-meta { color: #89928b; display: flex; font-family: 'DM Mono', monospace; font-size: 10px; gap: 25px; margin-top: 62px; text-transform: uppercase; }.hero-visual { align-items: center; display: flex; height: 500px; justify-content: center; position: relative; }.orbit { border: 1px solid #dbe5d4; border-radius: 50%; height: 430px; position: absolute; transform: rotate(-27deg); width: 280px; }.orbit-one { border-color: #c8dcae; }.orbit-two { height: 490px; transform: rotate(37deg); width: 350px; }.profile-card { background: var(--dark); box-shadow: 18px 25px 50px #1a2a2429; color: white; height: 360px; padding: 25px; position: relative; transform: rotate(7deg); width: 260px; z-index: 2; }.profile-avatar { align-items: center; background: var(--lime); border-radius: 50%; color: var(--ink); display: flex; font-family: 'Playfair Display', Georgia, serif; font-size: 37px; height: 92px; justify-content: center; margin: 15px 0 44px; width: 92px; }.card-label, .card-footer { color: #8e9c99; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }.card-name { font-size: 28px; font-weight: 800; letter-spacing: -.06em; line-height: .98; margin: 7px 0 18px; }.card-line { background: var(--lime); height: 2px; width: 35px; }.card-role { color: #b7c5c0; font-size: 11px; line-height: 1.5; margin-top: 18px; }.card-footer { bottom: 24px; display: flex; justify-content: space-between; left: 25px; position: absolute; right: 25px; }.float-card { align-items: center; background: var(--white); box-shadow: 0 12px 30px #1a2a2414; display: flex; gap: 11px; padding: 13px 16px; position: absolute; z-index: 3; }.float-top { right: 0; top: 95px; }.float-bottom { bottom: 88px; left: 0; }.float-icon { align-items: center; background: var(--ink); border-radius: 50%; color: var(--lime); display: flex; font-size: 15px; height: 30px; justify-content: center; width: 30px; }.float-icon.green { background: var(--lime); color: var(--ink); }.float-card b { display: block; font-size: 17px; line-height: 1; }.float-card small { color: var(--muted); display: block; font-size: 9px; margin-top: 4px; }
.stats-strip { background: var(--lime); display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 0; padding: 35px max(28px, calc((100vw - var(--max)) / 2 + 28px)); }.stats-strip div { align-items: center; border-right: 1px solid #b6df5b; display: flex; gap: 17px; padding: 0 27px; }.stats-strip div:first-child { padding-left: 0; }.stats-strip div:last-child { border: 0; }.stats-strip strong { font-family: 'Playfair Display', Georgia, serif; font-size: 33px; line-height: 1; }.stats-strip span { font-size: 10px; font-weight: 700; line-height: 1.45; text-transform: uppercase; }
.section { margin: auto; max-width: var(--max); padding: 125px 28px; }.section-heading { margin-bottom: 65px; }.section-heading h2 { font-size: clamp(39px, 4.2vw, 58px); }.about-section { display: grid; gap: 70px; grid-template-columns: 1fr 1fr; }.about-content { color: var(--muted); font-size: 15px; max-width: 485px; padding-top: 34px; }.about-content .lead { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -.04em; line-height: 1.35; }.quote { border-left: 2px solid var(--green); color: var(--ink); font-family: 'Playfair Display', Georgia, serif; font-size: 21px; font-style: italic; line-height: 1.35; margin-top: 35px; padding-left: 22px; }.dark-section { background: var(--dark); color: white; max-width: none; padding-left: max(28px, calc((100vw - var(--max)) / 2 + 28px)); padding-right: max(28px, calc((100vw - var(--max)) / 2 + 28px)); }.dark-section .section-heading { max-width: var(--max); }.dark-section em { color: var(--lime); }.skills-grid { display: grid; gap: 15px; grid-template-columns: repeat(5, 1fr); margin: auto; max-width: var(--max); }.skill-card { border: 1px solid #3b484b; min-height: 215px; padding: 21px; transition: background .2s, transform .2s; }.skill-card:hover { background: #24323a; transform: translateY(-5px); }.skill-top { display: flex; justify-content: space-between; }.skill-index, .skill-level { color: var(--lime); font-family: 'DM Mono', monospace; font-size: 10px; }.skill-card h3 { font-size: 17px; letter-spacing: -.04em; line-height: 1.2; margin: 58px 0 12px; }.skill-card p { color: #aab7b4; font-size: 11px; line-height: 1.55; margin: 0; }.progress { background: #3b484b; height: 2px; margin-top: 24px; }.progress span { background: var(--lime); display: block; height: 2px; }
.split-heading { align-items: end; display: flex; justify-content: space-between; }.section-intro { color: var(--muted); font-size: 14px; max-width: 255px; }.timeline { margin-left: 105px; max-width: 810px; }.timeline-item { border-top: 1px solid var(--line); padding: 31px 0 42px; position: relative; }.timeline-marker { background: var(--green); border: 4px solid var(--paper); border-radius: 50%; height: 13px; left: -111px; position: absolute; top: 35px; width: 13px; }.timeline-item:not(:last-child):before { background: var(--line); content: ''; height: calc(100% + 1px); left: -105px; position: absolute; top: 47px; width: 1px; }.job-header { align-items: start; display: flex; justify-content: space-between; }.job-header h3 { font-size: 21px; letter-spacing: -.04em; margin: 0; }.job-header p, .job-header time, .timeline-item li, .job-description { color: var(--muted); font-size: 13px; }.job-header p, .job-header time { margin: 4px 0 0; }.job-header time { font-family: 'DM Mono', monospace; font-size: 10px; }.job-description { margin: 21px 0 9px; max-width: 620px; }.timeline-item ul { margin: 0; padding-left: 17px; }.timeline-item li { margin-top: 7px; }.projects-section { background: #ecefe9; max-width: none; padding-left: max(28px, calc((100vw - var(--max)) / 2 + 28px)); padding-right: max(28px, calc((100vw - var(--max)) / 2 + 28px)); }.projects-section .section-heading { margin: auto auto 65px; max-width: var(--max); }.projects-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin: auto; max-width: var(--max); }.project-card { background: var(--white); }.project-visual { background: var(--dark); height: 210px; overflow: hidden; padding: 18px; position: relative; }.project-number { color: var(--lime); font-family: 'DM Mono', monospace; font-size: 11px; }.project-arrow { color: white; font-size: 20px; position: absolute; right: 20px; top: 13px; }.project-graphic { bottom: 0; height: 135px; left: 34px; position: absolute; right: 34px; }.project-graphic span { background: var(--lime); bottom: 0; display: block; position: absolute; width: 17%; }.graphic-1 span:nth-child(1) { height: 38%; left: 5%; }.graphic-1 span:nth-child(2) { height: 63%; left: 29%; }.graphic-1 span:nth-child(3) { height: 48%; left: 53%; }.graphic-1 span:nth-child(4) { height: 90%; left: 77%; }.graphic-2 { border: 1px solid #647174; border-radius: 50%; height: 190px; left: 48px; top: 50px; transform: rotate(-30deg); width: 190px; }.graphic-2 span { border-radius: 50%; height: 14px; width: 14px; }.graphic-2 span:nth-child(1) { left: 15px; top: 44px; }.graphic-2 span:nth-child(2) { right: 16px; top: 60px; }.graphic-2 span:nth-child(3) { bottom: 26px; left: 62px; }.graphic-2 span:nth-child(4) { right: 35px; top: 132px; }.graphic-3 { border-bottom: 1px solid #647174; height: 100px; top: 75px; transform: skewY(-20deg); }.graphic-3 span { height: 4px; left: 0; right: 0; width: auto; }.graphic-3 span:nth-child(1) { bottom: 15%; }.graphic-3 span:nth-child(2) { bottom: 35%; opacity: .75; }.graphic-3 span:nth-child(3) { bottom: 55%; opacity: .5; }.graphic-3 span:nth-child(4) { bottom: 75%; opacity: .3; }.project-info { padding: 22px; }.project-info > div { align-items: start; display: flex; justify-content: space-between; }.project-type { color: var(--green); font-family: 'DM Mono', monospace; font-size: 9px; margin: 0; text-transform: uppercase; }.project-info h3 { font-size: 19px; letter-spacing: -.04em; margin: 5px 0 0; }.project-info time { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; margin-top: 3px; white-space: nowrap; }.project-info > p { color: var(--muted); font-size: 12px; margin: 17px 0; }.text-link { border-bottom: 1px solid currentColor; display: inline-block; font-size: 11px; font-weight: 800; padding-bottom: 3px; }.text-link span { color: var(--green); }
.education-grid { display: grid; gap: 70px; grid-template-columns: 1.15fr .85fr; }.education-item { border-top: 1px solid var(--line); display: grid; gap: 25px; grid-template-columns: 145px 1fr; padding: 22px 0; }.education-year, .certifications .eyebrow { color: var(--green); font-family: 'DM Mono', monospace; font-size: 10px; }.education-item h3, .certifications h3 { font-size: 17px; letter-spacing: -.03em; margin: 0; }.education-item p, .education-item small, .certifications p { color: var(--muted); font-size: 12px; margin: 4px 0 0; }.education-item small { display: block; margin-top: 13px; }.certifications { background: var(--dark); color: white; padding: 30px; }.certifications .eyebrow { color: var(--lime); }.certifications article { border-top: 1px solid #3c4a4d; display: grid; gap: 13px; grid-template-columns: 25px 1fr; padding: 20px 0; }.cert-icon { color: var(--lime); }.certifications h3 { font-size: 14px; line-height: 1.35; }.certifications p { color: #aebbb8; }.certifications time { color: #aebbb8; font-family: 'DM Mono', monospace; font-size: 9px; grid-column: 2; }.contact-section { background: var(--lime); padding: 120px 28px; }.contact-inner { margin: auto; max-width: var(--max); }.contact-section .eyebrow { color: #5b8230; }.contact-section h2 { font-size: clamp(48px, 6vw, 80px); }.contact-section > .contact-inner > p:not(.eyebrow) { font-size: 15px; margin: 25px 0; max-width: 370px; }.contact-email { border-bottom: 2px solid var(--ink); display: inline-block; font-size: clamp(17px, 2vw, 24px); font-weight: 800; padding-bottom: 6px; }.contact-email span { color: var(--ink); }.contact-details { display: flex; font-family: 'DM Mono', monospace; font-size: 10px; gap: 28px; margin-top: 32px; text-transform: uppercase; }.site-footer { align-items: center; background: var(--dark); color: white; display: flex; justify-content: space-between; padding: 28px max(28px, calc((100vw - var(--max)) / 2 + 28px)); }.site-footer .brand-mark { background: var(--lime); color: var(--ink); }.site-footer p { color: #aab7b4; font-family: 'DM Mono', monospace; font-size: 9px; text-transform: uppercase; }
@media (max-width: 850px) { .main-nav { display: none; }.hero { grid-template-columns: 1fr; padding-top: 55px; }.hero-visual { margin-top: -10px; }.stats-strip { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }.stats-strip div:nth-child(2) { border: 0; }.skills-grid { grid-template-columns: repeat(2, 1fr); }.skill-card:last-child { grid-column: span 2; }.about-section, .education-grid { gap: 20px; grid-template-columns: 1fr; }.about-content { padding-top: 0; }.projects-grid { grid-template-columns: 1fr; }.project-card { display: grid; grid-template-columns: .9fr 1.1fr; }.project-visual { height: 100%; min-height: 220px; }.site-footer { align-items: start; flex-direction: column; gap: 18px; }.site-footer p { margin: 0; } }
@media (max-width: 560px) { .site-header { padding: 20px 20px 8px; }.header-cta { padding: 9px 12px; }.hero, .section { padding-left: 20px; padding-right: 20px; }.hero { min-height: auto; padding-bottom: 70px; }.hero h1 { font-size: 43px; }.hero-text { font-size: 14px; }.hero-meta { flex-wrap: wrap; gap: 10px 17px; margin-top: 40px; }.hero-visual { height: 410px; transform: scale(.85); transform-origin: center top; }.float-top { right: -5px; }.float-bottom { left: -5px; }.stats-strip { padding: 30px 20px; }.stats-strip div { padding: 0 10px; }.stats-strip div:nth-child(odd) { padding-left: 0; }.stats-strip strong { font-size: 26px; }.stats-strip span { font-size: 8px; }.section { padding-bottom: 80px; padding-top: 80px; }.section-heading { margin-bottom: 42px; }.split-heading { align-items: start; flex-direction: column; gap: 25px; }.timeline { margin-left: 28px; }.timeline-marker { left: -34px; }.timeline-item:not(:last-child):before { left: -28px; }.job-header { display: block; }.job-header time { display: block; margin-top: 9px; }.job-description, .timeline-item li { font-size: 12px; }.skills-grid { grid-template-columns: 1fr; }.skill-card:last-child { grid-column: auto; }.projects-section { padding-left: 20px; padding-right: 20px; }.project-card { display: block; }.project-visual { height: 190px; min-height: 0; }.education-item { display: block; }.education-year { display: block; margin-bottom: 13px; }.certifications { padding: 22px; }.contact-section { padding: 80px 20px; }.contact-details { flex-direction: column; gap: 10px; }.site-footer { padding-left: 20px; padding-right: 20px; } }