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

:root { --ink:#17201d; --paper:#f2f0e9; --muted:#77817b; --acid:#d7ee53; --coral:#f08062; --line:#cbd0c5; --deep:#1c332c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Manrope',sans-serif; font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.site-shell { overflow:hidden; }
.section-wrap,.site-header { width:min(1180px,calc(100% - 80px)); margin:0 auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; min-height:92px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; font:500 13px 'DM Mono',monospace; letter-spacing:.08em; }
.brand-mark { display:grid; width:32px; height:32px; place-items:center; background:var(--ink); color:var(--acid); font-size:11px; }
.brand-dot { color:var(--coral); }
.site-nav { display:flex; align-items:center; gap:32px; font:500 12px 'DM Mono',monospace; letter-spacing:.04em; text-transform:uppercase; }
.site-nav a { transition:color .2s ease; }
.site-nav a:hover { color:var(--coral); }
.nav-contact { padding:12px 16px; border:1px solid var(--ink); }
.nav-contact:hover { background:var(--ink); color:var(--acid)!important; }
.menu-toggle { display:none; border:1px solid var(--ink); padding:8px 12px; background:transparent; font:500 11px 'DM Mono',monospace; text-transform:uppercase; }
.hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:80px; align-items:end; min-height:650px; padding:105px 0 90px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 25px; color:var(--muted); font:500 11px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.status-dot { display:inline-block; width:8px; height:8px; background:var(--coral); border-radius:50%; box-shadow:0 0 0 5px #f0806226; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-weight:800; letter-spacing:-.07em; line-height:.98; }
h1 { max-width:800px; margin-bottom:34px; font-size:clamp(3.6rem,8vw,7.6rem); }
h2 { margin-bottom:24px; font-size:clamp(2.9rem,5.5vw,5.5rem); }
h1 em,h2 em { color:var(--coral); font-style:normal; }
.hero-intro { max-width:545px; color:#58645e; font-size:18px; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:26px; margin-top:40px; }
.button { display:inline-flex; align-items:center; gap:24px; padding:15px 19px; font:500 12px 'DM Mono',monospace; letter-spacing:.03em; text-transform:uppercase; transition:transform .2s ease,background .2s ease; }
.button:hover { transform:translateY(-3px); }
.button-primary { background:var(--ink); color:var(--acid); }
.button-primary:hover { background:var(--coral); color:var(--ink); }
.text-link { border-bottom:1px solid var(--ink); padding-bottom:3px; font-size:13px; }
.text-link span { color:var(--coral); }
.portrait-frame { position:relative; width:100%; max-width:300px; aspect-ratio:.8; margin-left:auto; overflow:hidden; background:var(--deep); }
.portrait-grid { position:absolute; inset:0; opacity:.2; background-image:linear-gradient(#d7ee5333 1px,transparent 1px),linear-gradient(90deg,#d7ee5333 1px,transparent 1px); background-size:28px 28px; transform:rotate(12deg) scale(1.3); }
.portrait-monogram { position:absolute; top:25%; left:15%; color:var(--acid); font:800 8.5rem/.8 'Manrope',sans-serif; letter-spacing:-.13em; }
.portrait-label,.portrait-index { position:absolute; color:var(--paper); font:500 10px/1.5 'DM Mono',monospace; letter-spacing:.12em; }
.portrait-label { bottom:25px; left:25px; }
.portrait-index { right:25px; bottom:25px; color:var(--acid); }
.hero-note { display:flex; gap:15px; max-width:250px; margin:24px 0 0 auto; }
.hero-note span { color:var(--coral); font:800 35px/1 'Manrope',sans-serif; }
.hero-note p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.ticker { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ticker-track { display:flex; align-items:center; justify-content:space-around; min-width:1000px; padding:18px 0; color:var(--muted); font:500 12px 'DM Mono',monospace; text-transform:uppercase; }
.ticker i { color:var(--coral); font-style:normal; font-size:18px; }
.section-block { padding:145px 0; }
.section-heading { display:grid; grid-template-columns:1fr 1.8fr 1fr; gap:40px; align-items:start; margin-bottom:65px; }
.section-heading .eyebrow { margin-top:8px; }
.section-heading h2 { margin-bottom:0; }
.section-lede { max-width:260px; margin:10px 0 0; color:var(--muted); font-size:14px; }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.project-card { border-top:1px solid var(--ink); }
.project-feature { grid-row:span 2; }
.project-top { display:flex; justify-content:space-between; padding:16px 0; color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.05em; text-transform:uppercase; }
.project-number { color:var(--coral); }
.project-visual { position:relative; display:flex; min-height:250px; align-items:center; justify-content:center; overflow:hidden; }
.visual-lims { background:var(--deep); color:var(--acid); }
.visual-code { z-index:1; font:500 31px 'DM Mono',monospace; }
.visual-line { position:absolute; width:130%; height:1px; background:var(--acid); transform:rotate(-28deg); }
.visual-pill { position:absolute; right:18px; bottom:18px; padding:6px 9px; border:1px solid var(--acid); font:10px 'DM Mono',monospace; }
.visual-education { justify-content:flex-start; padding:35px; background:var(--coral); }
.visual-stat { color:var(--ink); font-size:74px; font-weight:800; letter-spacing:-.1em; line-height:1; }
.visual-stat span { font-size:28px; }
.visual-caption { position:absolute; top:30px; right:30px; font:10px 'DM Mono',monospace; text-transform:uppercase; }
.bars { position:absolute; right:30px; bottom:30px; display:flex; gap:5px; align-items:end; }
.bars i { display:block; width:9px; background:var(--ink); }
.bars i:nth-child(1){height:22px}.bars i:nth-child(2){height:36px}.bars i:nth-child(3){height:53px}.bars i:nth-child(4){height:75px}.bars i:nth-child(5){height:95px}
.visual-portal { background:#dfe6cf; }
.portal-window { display:grid; grid-template-columns:repeat(3,1fr); width:78%; padding:28px 18px; gap:8px; border:1px solid var(--ink); background:var(--paper); font:10px 'DM Mono',monospace; }
.portal-window b { padding-bottom:25px; border-bottom:2px solid var(--coral); font-weight:500; }
.portal-window b:nth-child(2){border-color:var(--ink)} .portal-window b:nth-child(3){border-color:var(--acid)}
.visual-orbit { position:absolute; width:130px; height:130px; border:1px solid var(--coral); border-radius:50%; transform:translate(95px,-70px); }
.project-content { padding:25px 0 5px; }
.project-content h3 { margin-bottom:12px; font-size:20px; letter-spacing:-.04em; }
.project-content p { min-height:68px; margin-bottom:18px; color:var(--muted); font-size:13px; line-height:1.65; }
.tag-row { display:flex; flex-wrap:wrap; gap:7px; }
.tag-row span { padding:5px 8px; background:#e3e5db; color:#526059; font:10px 'DM Mono',monospace; text-transform:uppercase; }
.experience-band { background:var(--deep); color:var(--paper); }
.experience-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:130px; padding-top:140px; padding-bottom:140px; }
.experience-band .eyebrow,.experience-band .section-lede { color:#a8b3a8; }
.experience-band h2 em { color:var(--acid); }
.timeline-item { position:relative; padding:0 0 38px 30px; border-left:1px solid #66736a; }
.timeline-item::before { position:absolute; top:0; left:-5px; width:9px; height:9px; border:1px solid var(--acid); background:var(--deep); content:''; }
.timeline-item.current::before { background:var(--acid); }
.timeline-meta { display:flex; justify-content:space-between; margin-bottom:9px; color:var(--acid); font:10px 'DM Mono',monospace; text-transform:uppercase; }
.current-label { color:var(--coral); }
.timeline-item h3 { margin-bottom:2px; font-size:21px; }
.timeline-item .company { margin-bottom:8px; color:#c1c9bc; font-size:13px; }
.timeline-item p:last-child { max-width:510px; margin-bottom:0; color:#9eaaa0; font-size:13px; }
.skills-section { padding-top:140px; padding-bottom:155px; }
.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.skill-group { min-height:220px; padding:25px 25px 25px 0; border-right:1px solid var(--line); }
.skill-group+.skill-group { padding-left:25px; } .skill-group:last-child { border-right:0; }
.skill-index { color:var(--coral); font:10px 'DM Mono',monospace; letter-spacing:.04em; }
.skill-group h3 { margin:38px 0 15px; font-size:22px; }
.skill-group p { color:var(--muted); font-size:14px; line-height:2; }
.contact-band { background:var(--coral); }
.contact-inner { padding-top:125px; padding-bottom:105px; }
.contact-inner .eyebrow { color:var(--ink); } .contact-inner h2 { margin-bottom:52px; } .contact-inner h2 em { color:var(--paper); }
.contact-links { display:flex; align-items:center; gap:30px; }
.button-light { background:var(--ink); color:var(--acid); } .button-light:hover { background:var(--paper); color:var(--ink); }
.contact-detail { border-bottom:1px solid var(--ink); font:12px 'DM Mono',monospace; }
.site-footer { display:flex; justify-content:space-between; padding:27px 0; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.04em; }
.reveal { animation:rise .8s both; } .reveal-delay { animation-delay:.15s; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:800px) {
    .section-wrap,.site-header { width:min(100% - 40px,620px); }
    .site-header { position:relative; min-height:75px; }
    .menu-toggle { display:block; }
    .site-nav { display:none; position:absolute; z-index:5; top:74px; right:0; left:0; flex-direction:column; align-items:stretch; gap:0; padding:10px; background:var(--paper); border:1px solid var(--ink); }
    .site-nav.is-open { display:flex; } .site-nav a { padding:13px; } .nav-contact { text-align:center; }
    .hero { display:block; min-height:auto; padding:80px 0 75px; } .hero h1 { font-size:clamp(3.2rem,15vw,5rem); } .hero-intro { font-size:16px; } .hero-aside { margin-top:60px; }
    .portrait-frame { margin:0; max-width:100%; aspect-ratio:1.4; } .portrait-monogram { font-size:7rem; } .hero-note { margin-left:0; }
    .section-block { padding:90px 0; } .section-heading { display:block; margin-bottom:45px; } .section-heading h2 { font-size:3.3rem; margin-bottom:25px; } .section-lede { max-width:430px; }
    .project-grid { display:block; } .project-card { margin-bottom:55px; } .project-feature { grid-row:auto; } .project-visual { min-height:210px; }
    .experience-layout { display:block; padding-top:90px; padding-bottom:90px; } .timeline { margin-top:70px; }
    .skills-section { padding-top:90px; padding-bottom:100px; } .skills-grid { display:block; }
    .skill-group,.skill-group+.skill-group { min-height:auto; padding:25px 0; border-right:0; border-bottom:1px solid var(--line); } .skill-group h3 { margin-top:24px; }
    .contact-inner { padding-top:90px; padding-bottom:80px; } .contact-inner h2 { font-size:3.5rem; margin-bottom:40px; } .contact-links { align-items:flex-start; flex-direction:column; gap:22px; }
    .site-footer { align-items:flex-start; flex-direction:column; gap:10px; padding:25px 0; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .reveal { animation:none; } }