:root {
  --ink: #1e2421;
  --muted: #68716b;
  --paper: #f3f4ef;
  --line: #d9ddd7;
  --lime: #c9f36b;
  --lime-dark: #8eaf3e;
  --dark: #202722;
  --white: #fff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Manrope", 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: 1280px; padding: 28px 5vw; }
.brand { font-size: 1.3rem; font-weight: 800; letter-spacing: -.08em; }.brand span { color: var(--lime-dark); }
.nav { align-items: center; display: flex; gap: clamp(20px, 3vw, 46px); font-size: .78rem; font-weight: 600; }.nav a { transition: color .2s ease; }.nav a:hover { color: var(--lime-dark); }.nav-cta { border: 1px solid var(--line); border-radius: 99px; padding: 10px 16px; }.nav-cta span, .button span { font-size: 1.1em; margin-left: 8px; }.menu-toggle { background: none; border: 0; display: none; font-size: 1.5rem; }
.section-wrap { margin: auto; max-width: 1280px; padding-left: 5vw; padding-right: 5vw; }.hero { align-items: center; display: grid; gap: 6vw; grid-template-columns: 1fr 1fr; min-height: 77vh; padding-bottom: 90px; padding-top: 60px; }.eyebrow, .section-label, .mono-note { color: var(--muted); font-family: "DM Mono", monospace; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }.eyebrow { align-items: center; display: flex; gap: 9px; }.status-dot { background: var(--lime-dark); border-radius: 50%; box-shadow: 0 0 0 5px #dcebb9; display: inline-block; height: 7px; width: 7px; }
h1 { font-size: clamp(4rem, 8vw, 7.4rem); letter-spacing: -.09em; line-height: .95; margin: 32px 0; }.hero h1 em, .contact h2 em { color: var(--lime-dark); font-style: normal; }.hero-text { color: var(--muted); font-size: 1rem; max-width: 480px; }.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 26px; margin-top: 36px; }.button { border-radius: 99px; display: inline-flex; font-size: .82rem; font-weight: 700; padding: 15px 21px; transition: transform .2s ease, box-shadow .2s ease; }.button:hover { box-shadow: 0 8px 20px #21281b22; transform: translateY(-3px); }.button-primary { background: var(--dark); color: var(--white); }.button-light { background: var(--lime); color: var(--dark); }.text-link { border-bottom: 1px solid var(--ink); font-size: .78rem; font-weight: 700; padding-bottom: 4px; }.text-link span { margin-left: 8px; }
.hero-art { min-height: 440px; position: relative; }.orb { border-radius: 50%; position: absolute; }.orb-main { background: var(--lime); height: min(31vw, 400px); right: 8%; top: 7%; width: min(31vw, 400px); }.orb-main:after { border: 1px solid var(--lime-dark); border-radius: 50%; content: ""; inset: 14%; position: absolute; }.orb-small { background: var(--dark); height: 76px; right: 3%; top: 12%; width: 76px; }.grid-mark { background-image: linear-gradient(#b7c0b455 1px, transparent 1px), linear-gradient(90deg, #b7c0b455 1px, transparent 1px); background-size: 17px 17px; height: 130px; left: 4%; position: absolute; top: 8%; width: 130px; }.code-card { background: #ffffffd9; box-shadow: 0 20px 35px #26301b1b; display: flex; gap: 20px; left: 3%; padding: 22px; position: absolute; top: 40%; transform: rotate(-5deg); }.code-card span { color: var(--lime-dark); font-family: "DM Mono"; font-size: .7rem; }.code-card code { font-family: "DM Mono"; font-size: .9rem; line-height: 1.65; }.code-card b { color: var(--lime-dark); }.art-caption { bottom: 4%; color: var(--muted); font-family: "DM Mono"; font-size: .65rem; letter-spacing: .05em; position: absolute; right: 4%; text-transform: uppercase; }
.intro { border-top: 1px solid var(--line); padding-bottom: 150px; padding-top: 34px; }.intro-content { display: grid; gap: 12vw; grid-template-columns: 1.1fr .9fr; padding-top: 50px; }.intro h2, .details h2 { font-size: clamp(2.1rem, 4vw, 4.4rem); letter-spacing: -.07em; line-height: 1.05; margin: 0; max-width: 700px; }.intro-body { color: var(--muted); font-size: .95rem; max-width: 440px; }.intro-body p + p { margin-top: 28px; }
.skills { background: var(--dark); color: var(--white); max-width: none; padding-bottom: 120px; padding-top: 34px; }.section-heading { align-items: center; display: flex; justify-content: space-between; }.skills .section-label, .skills .mono-note { color: #9ca69e; }.skill-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin: 58px auto 0; max-width: 1180px; }.skill-card { border: 1px solid #5a625c; min-height: 360px; padding: 28px; position: relative; transition: background .25s ease, color .25s ease; }.skill-card:hover, .skill-card.featured { background: var(--lime); color: var(--dark); }.skill-number { color: #99a39b; font-family: "DM Mono"; font-size: .7rem; }.skill-card h3 { font-size: 1.4rem; letter-spacing: -.05em; margin-top: 100px; }.skill-card p { color: #aeb7b0; font-size: .85rem; max-width: 250px; }.skill-card:hover p, .skill-card.featured p { color: #56603e; }.skill-icon { font-family: "DM Mono"; font-size: 2rem; position: absolute; right: 28px; top: 25px; }.skill-line { background: currentColor; bottom: 28px; height: 2px; left: 28px; opacity: .35; position: absolute; right: 28px; }
.journey { padding-bottom: 150px; padding-top: 100px; }.timeline { margin-left: 25%; margin-top: 65px; max-width: 820px; }.timeline-item { border-top: 1px solid var(--line); display: grid; gap: 35px; grid-template-columns: 120px 1fr; padding: 30px 0 40px; position: relative; }.timeline-marker { background: var(--paper); border: 1px solid var(--lime-dark); border-radius: 50%; height: 10px; left: -5px; position: absolute; top: -5px; width: 10px; }.timeline-item.current .timeline-marker { background: var(--lime-dark); }.timeline-date { color: var(--muted); font-family: "DM Mono"; font-size: .68rem; text-transform: uppercase; }.timeline h3 { font-size: 1.35rem; letter-spacing: -.04em; margin: 0 0 5px; }.timeline p, .timeline li { color: var(--muted); font-size: .85rem; }.timeline ul { margin-top: 22px; padding-left: 18px; }.tag { background: #e5f5bd; border-radius: 99px; color: #516b20; display: inline-block; font-family: "DM Mono"; font-size: .62rem; margin-top: 16px; padding: 5px 10px; text-transform: uppercase; }
.details { align-items: start; border-top: 1px solid var(--line); display: grid; gap: 10vw; grid-template-columns: 1fr 1fr; padding-bottom: 150px; padding-top: 34px; }.details h2 { margin-top: 50px; }.detail-list { border-top: 1px solid var(--line); margin-top: 10px; }.detail-list > div { border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; padding: 24px 0; }.detail-list span { color: var(--muted); font-family: "DM Mono"; font-size: .68rem; text-transform: uppercase; }.detail-list strong { font-size: 1rem; }.detail-list small { color: var(--muted); font-size: .75rem; font-weight: 400; margin-left: 5px; }
.contact { background: var(--dark); color: var(--white); max-width: none; overflow: hidden; padding-bottom: 120px; padding-top: 34px; position: relative; }.contact .section-label { color: #aab4ac; }.contact-inner { margin: auto; max-width: 1180px; position: relative; z-index: 1; }.contact h2 { font-size: clamp(3.5rem, 8vw, 8rem); letter-spacing: -.09em; line-height: .92; margin: 90px 0 30px; }.contact p:not(.section-label) { color: #aab4ac; margin-bottom: 28px; }.contact-decoration { color: var(--lime); font-size: 23rem; line-height: 1; opacity: .9; position: absolute; right: 4%; top: 12%; transform: rotate(15deg); }.footer { align-items: center; color: var(--muted); display: flex; font-family: "DM Mono"; font-size: .63rem; justify-content: space-between; padding-bottom: 28px; padding-top: 28px; text-transform: uppercase; }.footer a { color: var(--ink); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: none; }.reveal-delay { transition-delay: .15s; }
@media (max-width: 760px) { .site-header { padding-top: 22px; }.nav { background: var(--paper); box-shadow: 0 15px 25px #27311b18; display: none; flex-direction: column; left: 5vw; padding: 20px; position: absolute; right: 5vw; top: 70px; z-index: 5; }.nav.open { display: flex; }.menu-toggle { display: block; }.hero { grid-template-columns: 1fr; padding-top: 35px; }.hero-art { min-height: 340px; }.orb-main { height: 270px; width: 270px; }.intro-content, .details { gap: 45px; grid-template-columns: 1fr; }.intro, .journey, .details { padding-bottom: 90px; }.skill-grid { grid-template-columns: 1fr; }.skill-card { min-height: 280px; }.skill-card h3 { margin-top: 65px; }.timeline { margin-left: 0; }.timeline-item { gap: 20px; grid-template-columns: 80px 1fr; }.contact h2 { margin-top: 60px; }.contact-decoration { font-size: 12rem; right: -8%; top: 30%; }.footer { align-items: flex-start; flex-direction: column; gap: 12px; } }