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

:root { --ink:#151515; --paper:#f3f0e9; --acid:#d7f24b; --coral:#ff765c; --line:rgba(21,21,21,.18); --muted:#6c6b64; --mono:'DM Mono', monospace; --display:'Space Grotesk', sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--display); overflow-x:hidden; } a { color:inherit; text-decoration:none; } button { color:inherit; font:inherit; }
.ambient { position:fixed; z-index:-1; border-radius:50%; filter:blur(1px); pointer-events:none; } .ambient-one { width:38vw; height:38vw; right:-13vw; top:8vh; background:var(--acid); opacity:.28; } .ambient-two { width:22vw; height:22vw; left:-12vw; top:52vh; background:var(--coral); opacity:.14; }
.section-shell { width:min(1160px, calc(100% - 80px)); margin:auto; } .site-header { width:min(1160px, calc(100% - 80px)); margin:auto; height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:3; } .brand { display:flex; align-items:center; gap:11px; font:500 14px var(--mono); } .brand-mark { display:grid; place-items:center; width:31px; height:31px; border:1px solid var(--ink); border-radius:50%; font:500 15px var(--display); } .main-nav { display:flex; align-items:center; gap:34px; font-size:13px; } .main-nav a:not(.nav-contact) { color:var(--muted); transition:color .2s; } .main-nav a:hover { color:var(--ink); } .nav-contact { border-bottom:1px solid var(--ink); padding-bottom:5px; } .nav-contact span, .text-link span, .contact-email span { font-size:17px; margin-left:8px; } .menu-toggle { display:none; border:0; background:none; }
.hero { min-height:680px; display:grid; grid-template-columns:1.4fr .6fr; align-items:center; padding:90px 0 116px; } .eyebrow, .section-kicker, .project-type, .visual-tag { font:500 11px var(--mono); text-transform:uppercase; letter-spacing:.04em; } .eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 28px; color:var(--muted); } .status-dot { width:7px; height:7px; background:#7cba46; border-radius:50%; box-shadow:0 0 0 4px rgba(124,186,70,.18); } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(54px, 8vw, 106px); line-height:.93; letter-spacing:-.06em; margin-bottom:38px; font-weight:600; } em { color:var(--coral); font-style:normal; } .hero-text { max-width:430px; color:var(--muted); line-height:1.6; font-size:16px; } .hero-actions { display:flex; align-items:center; gap:30px; margin-top:38px; } .button { display:inline-flex; align-items:center; gap:19px; padding:15px 19px; font:500 12px var(--mono); text-transform:uppercase; } .button-primary { background:var(--ink); color:var(--paper); transition:transform .2s, background .2s; } .button-primary:hover { background:var(--coral); transform:translateY(-3px); } .button span { font-size:18px; } .text-link { font:500 12px var(--mono); text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:7px; } .hero-aside { justify-self:end; width:260px; align-self:center; } .orbit-card { height:290px; position:relative; display:grid; place-items:center; } .orbit-core { width:118px; height:118px; display:grid; place-items:center; background:var(--acid); border-radius:50%; font:500 31px var(--mono); z-index:1; } .orbit-label { position:absolute; top:4px; left:15px; font:11px var(--mono); color:var(--muted); } .orbit-ring { position:absolute; border:1px solid var(--line); border-radius:50%; } .ring-one { width:208px; height:208px; transform:rotate(32deg) skewX(-8deg); } .ring-two { width:277px; height:124px; transform:rotate(-42deg); } .orbit-chip { position:absolute; padding:6px 9px; color:var(--paper); background:var(--ink); font:10px var(--mono); } .chip-python { top:78px; right:0; } .chip-cpp { bottom:46px; left:4px; } .chip-web { bottom:1px; right:26px; background:var(--coral); } .aside-note { margin:18px 0 0; color:var(--muted); font:11px var(--mono); line-height:1.7; text-transform:uppercase; } .aside-note span { color:var(--ink); }
.marquee { padding:21px 0; background:var(--acid); overflow:hidden; transform:rotate(-1deg) scale(1.02); } .marquee-track { display:flex; align-items:center; justify-content:space-around; min-width:1100px; font:500 12px var(--mono); } .marquee b { font-size:18px; font-weight:400; }
.about { display:grid; grid-template-columns:.7fr 1.5fr .7fr; gap:40px; padding:160px 0; border-bottom:1px solid var(--line); } .section-kicker { color:var(--muted); padding-top:8px; } .about h2, .stack h2 { font-size:clamp(34px, 4vw, 55px); line-height:1.05; letter-spacing:-.05em; margin-bottom:29px; } .about h2 span { color:var(--coral); } .about-content p { max-width:450px; line-height:1.65; color:var(--muted); margin-bottom:31px; } .about-facts { align-self:end; border-top:1px solid var(--line); } .about-facts div { display:flex; gap:16px; border-bottom:1px solid var(--line); padding:17px 0; } .about-facts strong { font-size:33px; font-weight:500; line-height:.8; } .about-facts span { color:var(--muted); font:11px var(--mono); line-height:1.5; }
.work { padding:112px 0 150px; } .section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:32px; } .filter-group { display:flex; gap:20px; } .filter-button { background:none; border:0; border-bottom:1px solid transparent; padding:0 0 6px; color:var(--muted); cursor:pointer; font:11px var(--mono); text-transform:uppercase; } .filter-button.active, .filter-button:hover { color:var(--ink); border-color:var(--ink); } .project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .project-card { min-width:0; } .project-featured { grid-row:span 2; } .project-visual { height:280px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; } .project-featured .project-visual { height:585px; } .visual-nara { background:var(--ink); color:var(--acid); } .visual-code { position:absolute; top:27px; left:27px; font:13px var(--mono); } .visual-wave { font-size:80px; transform:rotate(-8deg); letter-spacing:-20px; } .visual-interface { background:#cbd7ff; } .mini-window { width:67%; height:68%; background:var(--paper); padding:13px; box-shadow:18px 18px 0 rgba(21,21,21,.12); } .mini-window i { width:6px; height:6px; display:inline-block; border-radius:50%; background:var(--coral); margin-right:4px; } .mini-window i:nth-child(2) { background:var(--acid); } .mini-window i:nth-child(3) { background:var(--ink); } .mini-lines { margin-top:28px; display:grid; gap:7px; } .mini-lines b { height:7px; width:75%; background:var(--ink); opacity:.8; } .mini-lines b:nth-child(2) { width:51%; opacity:.3; } .mini-lines b:nth-child(3) { width:64%; opacity:.3; } .mini-chart { width:90%; height:55px; margin-top:28px; border-bottom:2px solid var(--coral); border-radius:50% 50% 0 0; transform:skewY(-8deg); } .visual-cpp { background:var(--coral); color:var(--paper); } .cpp-symbol { font:500 79px var(--mono); letter-spacing:-10px; } .cpp-symbol span { color:var(--acid); } .visual-tag { position:absolute; left:27px; bottom:25px; } .project-info { display:flex; justify-content:space-between; align-items:start; padding:22px 0 9px; border-bottom:1px solid var(--ink); } .project-type { color:var(--muted); margin-bottom:10px; } .project-info h3 { font-size:22px; margin:0; letter-spacing:-.03em; } .project-arrow { font-size:25px; transition:transform .2s; } .project-card:hover .project-arrow { transform:translate(4px,-4px); } .project-description { color:var(--muted); font-size:13px; line-height:1.55; max-width:500px; } .project-card.hidden { display:none; }
.stack { padding:110px 0 145px; border-top:1px solid var(--line); } .stack-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:72px; } .stack h2 em { color:var(--coral); } .tool-list > div { display:grid; grid-template-columns:50px 1fr auto; align-items:center; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); } .tool-list span, .tool-list small { color:var(--muted); font:11px var(--mono); } .tool-list strong { font-size:19px; font-weight:500; } .tool-list small { text-align:right; }
.contact { padding:95px 0 85px; background:var(--ink); color:var(--paper); width:100%; padding-left:max(40px, calc((100% - 1160px) / 2)); padding-right:max(40px, calc((100% - 1160px) / 2)); } .contact .section-kicker { color:#a3a29b; } .contact-top { display:flex; justify-content:space-between; border-bottom:1px solid rgba(243,240,233,.28); padding-bottom:75px; } .contact-top p { color:var(--acid); font-size:18px; line-height:1.35; margin:0; text-align:right; } .contact-bottom { display:flex; justify-content:space-between; align-items:end; padding-top:55px; } .contact h2 { font-size:clamp(48px, 7vw, 92px); line-height:.9; letter-spacing:-.06em; margin:0; } .contact-email { font:12px var(--mono); border-bottom:1px solid var(--acid); padding-bottom:9px; color:var(--acid); } .site-footer { display:flex; justify-content:space-between; padding:25px 0; color:var(--muted); font:10px var(--mono); text-transform:uppercase; } .site-footer a { color:var(--ink); } .toast { position:fixed; right:24px; bottom:24px; padding:15px 18px; background:var(--acid); color:var(--ink); font:11px var(--mono); transform:translateY(120px); transition:transform .3s; z-index:5; } .toast.show { transform:translateY(0); }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; } .reveal.visible { opacity:1; transform:none; } .reveal-delay { transition-delay:.18s; }
@media (max-width:700px) { .section-shell, .site-header { width:calc(100% - 40px); } .site-header { height:72px; } .main-nav { display:none; position:absolute; top:72px; left:0; right:0; padding:22px 20px; background:var(--ink); color:var(--paper); flex-direction:column; align-items:flex-start; gap:22px; } .main-nav.open { display:flex; } .main-nav a:not(.nav-contact) { color:#c8c6bd; } .nav-contact { border-color:var(--acid); } .menu-toggle { display:block; font:11px var(--mono); text-transform:uppercase; } .menu-toggle span { font-size:20px; margin-left:7px; } .hero { min-height:auto; display:block; padding:90px 0 82px; } h1 { font-size:clamp(55px, 16vw, 80px); } .hero-aside { margin:80px auto 0; } .about { display:block; padding:105px 0; } .about-content { margin-top:55px; } .about-facts { margin-top:65px; } .section-heading { display:block; } .filter-group { margin-top:28px; gap:15px; flex-wrap:wrap; } .project-grid { display:block; } .project-card, .project-featured { margin-bottom:58px; } .project-featured .project-visual, .project-visual { height:340px; } .stack { padding:85px 0 105px; } .stack-layout { display:block; margin-top:55px; } .tool-list { margin-top:55px; } .tool-list > div { grid-template-columns:35px 1fr; } .tool-list small { grid-column:2; text-align:left; margin-top:-10px; } .contact { padding-left:20px; padding-right:20px; } .contact-top, .contact-bottom { display:block; } .contact-top { padding-bottom:48px; } .contact-top p { text-align:left; margin-top:42px; } .contact-bottom { padding-top:47px; } .contact-email { display:inline-block; margin-top:50px; font-size:10px; } .site-footer { width:calc(100% - 40px); display:grid; gap:12px; } }

/* Portfolio additions */
.project-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.project-tags span { padding:6px 8px; border:1px solid var(--line); color:var(--muted); font:10px var(--mono); }
.skill-bar { grid-column:2 / 3; height:5px; background:rgba(21,21,21,.13); margin-top:-6px; }
.skill-bar i { display:block; height:100%; background:var(--coral); }
.skill-value { grid-column:3; grid-row:2; color:var(--ink); font:500 12px var(--mono); }
.contact-details { display:grid; gap:18px; justify-items:end; }
.contact-email, .contact-phone { font:12px var(--mono); border-bottom:1px solid var(--acid); padding-bottom:9px; color:var(--acid); }
.contact-phone { color:var(--paper); border-color:var(--paper); }
@media (max-width:700px) { .tool-list > div { grid-template-columns:35px 1fr auto; } .skill-bar { grid-column:2 / 3; } .skill-value { grid-column:3; } .contact-details { justify-items:start; } .contact-email, .contact-phone { display:inline-block; margin-top:28px; font-size:10px; } }
.education-note { margin:24px 0 0; color:var(--muted); font:11px/1.7 var(--mono); }
.education-note strong { color:var(--ink); font-weight:500; }