:root {
  --ink: #17243a;
  --ink-soft: #40506a;
  --muted: #8290a5;
  --paper: #f7f4ed;
  --paper-deep: #ebe6db;
  --white: #fffdfa;
  --green: #f39a86;
  --green-deep: #d96f5e;
  --line: rgba(23, 36, 58, 0.16);
  --line-light: rgba(247, 244, 237, 0.2);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-shell { overflow: hidden; }
.section-frame { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }

.topbar { width: min(1180px, calc(100% - 64px)); height: 88px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-light); position: relative; z-index: 5; }
.brand, .topbar-actions, .desktop-nav, .hero-actions, .button, .profile-topline, .section-heading, .card-link, .contact-link, .footer, .experience-row { display: flex; align-items: center; }
.brand { gap: 12px; font-weight: 700; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--green); color: var(--ink); font: 500 12px var(--mono); border-radius: 50%; }
.brand-name { letter-spacing: -0.02em; }
.desktop-nav { gap: 34px; margin-left: auto; margin-right: 40px; }
.nav-link { color: #c0c9d8; font-size: 14px; transition: color .2s ease; }
.nav-link:hover, .nav-link.active { color: var(--green); }
.topbar-actions { gap: 10px; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line-light); border-radius: 50%; display: grid; place-items: center; color: var(--paper); background: transparent; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.icon-button:hover { color: var(--green); border-color: var(--green); background: rgba(185,243,109,.06); }
.icon-button svg { width: 16px; height: 16px; }
.menu-button { display: none; }

.hero { min-height: 650px; padding: 112px 0 90px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 60px; align-items: center; }
.eyebrow, .section-kicker, .project-index, .meta-label, .profile-topline, .experience-year { font: 500 11px var(--mono); letter-spacing: .12em; }
.eyebrow { color: var(--green); display: flex; align-items: center; gap: 9px; margin-bottom: 28px; }
.status-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 5px rgba(185,243,109,.1); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(48px, 6.8vw, 86px); line-height: .98; letter-spacing: -.075em; font-weight: 800; max-width: 700px; }
em { color: var(--green); font-style: normal; }
.hero-lede { max-width: 550px; margin: 30px 0 34px; color: #c8d0dd; font-size: 18px; line-height: 1.85; }
.hero-actions { gap: 20px; flex-wrap: wrap; }
.button { gap: 10px; padding: 14px 20px; border: 1px solid transparent; font-size: 14px; font-weight: 700; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button svg, .text-link svg, .card-link svg, .contact-link svg { width: 15px; height: 15px; }
.button-primary { color: var(--ink); background: var(--green); }
.button-primary:hover { background: #d0ff92; }
.button-quiet { color: #b8c0b8; border-color: var(--line-light); }
.button-quiet:hover { color: var(--paper); border-color: var(--green); }

.hero-profile { min-height: 410px; display: grid; place-items: center; position: relative; }
.profile-card { width: min(100%, 370px); padding: 18px; background: #26344d; border: 1px solid rgba(247,244,237,.18); box-shadow: 18px 20px 0 rgba(243,154,134,.14); position: relative; z-index: 2; }
.profile-topline { justify-content: space-between; color: #7f9386; font-size: 9px; padding-bottom: 16px; border-bottom: 1px solid var(--line-light); }
.profile-image { width: 100%; aspect-ratio: 1.18; display: block; object-fit: cover; object-position: center 18%; margin: 18px 0; background: #526784; }
.profile-name-row { display: flex; justify-content: space-between; align-items: start; }
.profile-name-row h2 { font-size: 31px; letter-spacing: -.06em; }
.profile-name-row p { color: #b9c4d5; font: 14px var(--mono); margin-top: 4px; }
.verified-mark { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--green); border-radius: 50%; color: var(--green); }
.verified-mark svg { width: 13px; height: 13px; }
.profile-role { margin-top: 19px; font-size: 14px; color: #d8dfeb; }.profile-role span { color: var(--green); }
.profile-divider { height: 1px; background: var(--line-light); margin: 21px 0 17px; }
.profile-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.profile-meta div { display: flex; flex-direction: column; gap: 7px; }.meta-label { color: #9aa9bf; font-size: 10px; }.profile-meta strong { font: 500 11px var(--mono); color: var(--green); }
.profile-orbit { position: absolute; border: 1px solid rgba(243,154,134,.38); border-radius: 50%; transform: rotate(-25deg); }.orbit-one { width: 470px; height: 210px; }.orbit-two { width: 300px; height: 420px; transform: rotate(40deg); border-color: rgba(247,244,237,.15); }

.proof-strip { border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); padding: 25px 0; display: grid; grid-template-columns: repeat(3, 1fr) 1fr; gap: 22px; align-items: center; color: #c0cad9; font-size: 14px; line-height: 1.6; }.proof-item { display: flex; gap: 13px; align-items: flex-start; }.proof-number { color: var(--green); font: 500 12px var(--mono); }.proof-signature { color: #8290a5; font: 11px var(--mono); text-align: right; letter-spacing: .12em; }

.content-section { padding: 122px 0 0; }.section-heading { justify-content: space-between; align-items: end; margin-bottom: 42px; }.section-kicker { color: var(--green); font-size: 11px; display: block; margin-bottom: 12px; }.section-heading h2 { color: var(--paper); font-size: 43px; line-height: 1; letter-spacing: -.06em; }.text-link { color: #c0cad9; display: flex; align-items: center; gap: 8px; font-size: 14px; border-bottom: 1px solid #5a6982; padding-bottom: 7px; transition: color .2s, border-color .2s; }.text-link:hover { color: var(--green); border-color: var(--green); }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.project-card { min-height: 315px; padding: 27px; border: 1px solid var(--line-light); background: #202c43; display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease, background .25s ease; }.project-card:hover { transform: translateY(-4px); border-color: rgba(243,154,134,.7); background: #2a3b58; }.featured-project { background: var(--green); color: var(--ink); border-color: var(--green); }.featured-project:hover { background: #ffad9b; }.project-card-head { display: flex; justify-content: space-between; align-items: center; color: #9eabc0; }.featured-project .project-card-head { color: #72483e; }.project-card-head svg { width: 21px; height: 21px; }.project-card h3 { font-size: 30px; letter-spacing: -.06em; margin-top: 47px; }.project-card p { color: #c0cad9; font-size: 15px; line-height: 1.75; margin-top: 12px; max-width: 420px; }.featured-project p { color: #65463e; }.tag-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 19px; }.tag-row span { border: 1px solid rgba(243,154,134,.42); color: var(--green); padding: 6px 9px; font: 10px var(--mono); }.featured-project .tag-row span { color: #744b40; border-color: rgba(23,36,58,.24); }.card-link { gap: 7px; margin-top: auto; padding-top: 26px; color: var(--green); font-size: 13px; font-weight: 700; }.featured-project .card-link { color: var(--ink); }
.project-group { margin-top: 54px; }.project-group + .project-group { margin-top: 82px; }.project-group-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line-light); padding-top: 22px; }.group-label { display: block; color: var(--green); font: 500 11px var(--mono); letter-spacing: .12em; margin-bottom: 10px; }.project-group-heading h3 { font-size: 31px; letter-spacing: -.06em; }.group-link { color: #c0cad9; display: flex; align-items: center; gap: 8px; font-size: 13px; border-bottom: 1px solid #5a6982; padding-bottom: 7px; }.group-link svg { width: 15px; height: 15px; }.group-link:hover { color: var(--green); border-color: var(--green); }.group-intro { color: #aeb9ca; font-size: 15px; line-height: 1.75; margin: 14px 0 23px; }.personal-group .featured-project { background: #f0b4a6; border-color: #f0b4a6; }.personal-group .featured-project:hover { background: #ffc3b6; }

.split-section { padding-bottom: 110px; }.compact-heading { margin-bottom: 35px; }.experience-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; border-top: 1px solid var(--line-light); padding-top: 34px; }.large-copy { font-size: 25px; line-height: 1.45; letter-spacing: -.04em; max-width: 360px; }.muted-copy { color: #aeb9ca; font-size: 15px; line-height: 1.9; max-width: 390px; margin-top: 25px; }.experience-list { border-top: 1px solid var(--line-light); }.experience-row { gap: 24px; min-height: 86px; border-bottom: 1px solid var(--line-light); }.experience-row > div { flex: 1; }.experience-row h3 { font-size: 16px; margin-bottom: 6px; }.experience-row p { font-size: 13px; color: #b0bccd; }.experience-row > svg { width: 16px; color: var(--green); }.experience-year { width: 53px; color: var(--green); font-size: 10px; }
.contact-section { border-top: 1px solid var(--line-light); padding: 92px 0 110px; }.contact-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 60px; }.contact-inner h2 { font-size: clamp(43px, 5.5vw, 72px); line-height: .98; letter-spacing: -.08em; }.contact-links { border-top: 1px solid var(--line-light); }.contact-link { justify-content: space-between; min-height: 62px; border-bottom: 1px solid var(--line-light); color: #cbd3df; font-size: 14px; }.contact-link span:last-child { display: flex; align-items: center; gap: 8px; color: var(--green); font: 11px var(--mono); }.contact-link:hover span:first-child { color: var(--green); }.footer { justify-content: space-between; border-top: 1px solid var(--line-light); padding: 20px 0 26px; color: #8491a5; font: 11px var(--mono); letter-spacing: .05em; }

@media (max-width: 800px) { .section-frame, .topbar { width: min(100% - 40px, 620px); }.topbar { height: 72px; }.desktop-nav { display: none; }.desktop-nav.mobile-open { display: flex; position: absolute; top: 71px; left: 0; right: 0; margin: 0; padding: 18px 20px; gap: 22px; background: var(--ink); border: 1px solid var(--line-light); flex-direction: column; align-items: flex-start; }.menu-button { display: grid; }.hero { grid-template-columns: 1fr; padding: 75px 0 70px; gap: 62px; }.hero-profile { min-height: 360px; }.profile-card { width: min(100%, 390px); }.proof-strip { grid-template-columns: repeat(3, 1fr); }.proof-signature { display: none; }.content-section { padding-top: 85px; }.project-grid, .experience-layout, .contact-inner { grid-template-columns: 1fr; }.experience-layout { gap: 50px; }.contact-inner { gap: 50px; }.contact-section { padding-bottom: 75px; } }
@media (max-width: 520px) { .section-frame, .topbar { width: calc(100% - 32px); }.brand-name { font-size: 14px; }.hero { padding-top: 60px; }.hero-lede { font-size: 16px; }.hero-actions { align-items: stretch; flex-direction: column; }.button { justify-content: center; }.proof-strip { grid-template-columns: 1fr; gap: 18px; }.proof-item br { display: none; }.section-heading { align-items: start; flex-direction: column; gap: 22px; }.section-heading h2 { font-size: 36px; }.project-grid { gap: 12px; }.project-card { min-height: 290px; padding: 22px; }.project-card h3 { margin-top: 39px; }.project-card p { font-size: 14px; }.project-group { margin-top: 43px; }.project-group + .project-group { margin-top: 64px; }.project-group-heading { align-items: start; flex-direction: column; gap: 16px; }.project-group-heading h3 { font-size: 28px; }.group-intro { font-size: 14px; }.large-copy { font-size: 21px; }.experience-row { gap: 13px; }.experience-row p { line-height: 1.5; font-size: 13px; }.footer { align-items: flex-start; flex-direction: column; gap: 11px; } }