:root { --ink:#050505; --paper:#fff; --line:rgba(5,5,5,.2); --soft:rgba(5,5,5,.62); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"Courier New",Courier,monospace; font-size:16px; } a { color:inherit; text-decoration:none; } ::selection { background:var(--ink); color:var(--paper); }
.site-header { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; min-height:72px; padding:0 4vw; background:rgba(255,255,255,.94); border-bottom:1px solid var(--ink); backdrop-filter:blur(12px); }
.brand { font-weight:700; letter-spacing:-.05em; } .brand span { font-weight:400; } nav { display:flex; gap:clamp(1rem,3vw,3rem); font-size:.85rem; } nav a::before { content:"./"; opacity:.45; } nav a:hover,nav a:focus-visible { text-decoration:underline; text-underline-offset:5px; }
.hero { min-height:calc(100vh - 72px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); align-items:center; gap:7vw; padding:10vh 7vw; border-bottom:1px solid var(--ink); background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:48px 48px; }
.hero-copy { background:var(--paper); padding:1.25rem 0; } .eyebrow { margin:0 0 1.5rem; font-size:.76rem; letter-spacing:.18em; font-weight:700; } h1 { margin:0; max-width:850px; font-size:clamp(3.2rem,7vw,7.2rem); line-height:.91; letter-spacing:-.085em; font-weight:700; } .cursor { animation:blink 1s steps(1) infinite; }
.hero-intro { max-width:660px; margin:2.5rem 0 0; font-family:Arial,sans-serif; font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.6; } .hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.5rem; } .button { display:inline-flex; min-height:48px; align-items:center; padding:0 1.1rem; border:1px solid var(--ink); font-size:.8rem; transition:.18s; background:var(--paper); } .button.solid,.button:hover,.button:focus-visible { background:var(--ink); color:var(--paper); } .button.solid:hover,.button.solid:focus-visible { background:var(--paper); color:var(--ink); }
.terminal { align-self:center; background:var(--ink); color:var(--paper); border:1px solid var(--ink); box-shadow:18px 18px 0 var(--paper),18px 18px 0 1px var(--ink); } .terminal-bar { display:flex; justify-content:space-between; gap:1rem; padding:.7rem 1rem; background:var(--paper); color:var(--ink); font-size:.72rem; border-bottom:1px solid var(--ink); } .terminal-body { min-height:390px; padding:2rem; font-size:clamp(.76rem,1vw,.95rem); line-height:1.7; } .terminal-body p { margin:0 0 .35rem; } .terminal-body p span { font-weight:700; } .terminal-body .output { margin-bottom:1.5rem; padding-left:1.5rem; opacity:.75; } .prompt i { display:inline-block; width:.6em; height:1em; vertical-align:-.15em; background:var(--paper); animation:blink 1s steps(1) infinite; }
.section { display:grid; grid-template-columns:minmax(150px,.28fr) 1fr; gap:6vw; padding:8rem 7vw; border-bottom:1px solid var(--ink); } .section-label { display:flex; gap:1rem; align-items:flex-start; font-size:.77rem; text-transform:uppercase; letter-spacing:.15em; } .section-label span { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid var(--ink); } .section-label p { margin:.55rem 0 0; }
.about-content { max-width:1050px; } .lead { margin:0; font-family:Arial,sans-serif; font-size:clamp(2rem,4vw,4.6rem); line-height:1.05; letter-spacing:-.045em; } .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-top:5rem; font-family:Arial,sans-serif; line-height:1.75; } .about-grid p { margin:0; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); margin-top:5rem; border-top:1px solid var(--ink); border-left:1px solid var(--ink); } .facts div { min-height:115px; padding:1.2rem; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); } .facts span { display:block; margin-bottom:1rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; opacity:.55; } .facts strong { font-size:.83rem; }
.skill-list { border-top:1px solid var(--ink); } .skill-row { display:grid; grid-template-columns:minmax(160px,.3fr) 1fr; gap:2rem; padding:1.75rem 0; border-bottom:1px solid var(--ink); } .skill-row h3 { margin:.45rem 0 0; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; } .skill-row>div { display:flex; flex-wrap:wrap; gap:.55rem; } .skill-row span,.tags span { border:1px solid var(--ink); padding:.5rem .7rem; font-size:.76rem; }
.projects-section { background:var(--ink); color:var(--paper); } .projects-section .section-label span { border-color:var(--paper); } .projects { border-top:1px solid var(--paper); } .project { position:relative; display:grid; grid-template-columns:70px 1fr 60px; gap:2rem; padding:3.25rem 0; border-bottom:1px solid var(--paper); transition:.2s; } .project:hover { padding-left:1rem; } .project-index { padding-top:.5rem; font-size:.76rem; opacity:.6; } .project-heading { display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; } .project-heading h2 { margin:0; font-size:clamp(2rem,4vw,4.4rem); line-height:1; letter-spacing:-.06em; } .project-heading span { white-space:nowrap; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; opacity:.65; }
.project-description { max-width:790px; margin:1.6rem 0 0; font-family:Arial,sans-serif; font-size:1.15rem; line-height:1.6; } .project-detail { max-width:760px; margin:.75rem 0 0; line-height:1.7; font-size:.83rem; opacity:.65; } .tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem; } .tags span { border-color:var(--paper); } .project-link { align-self:start; display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--paper); font-size:1.4rem; } .project-link:hover,.project-link:focus-visible { background:var(--paper); color:var(--ink); }
.contact { padding:8rem 7vw; } .contact-heading { display:flex; justify-content:space-between; align-items:end; gap:3rem; margin-bottom:3rem; } .contact-heading .eyebrow { margin:0; } .contact-heading>p:last-child { max-width:520px; margin:0; font-family:Arial,sans-serif; line-height:1.6; } .contact-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--ink); border-left:1px solid var(--ink); } .contact-grid>a { min-height:150px; display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:1.5rem; padding:1.5rem; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); transition:.18s; } .contact-grid>a:hover,.contact-grid>a:focus-visible { background:var(--ink); color:var(--paper); } .contact-grid svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .contact-grid span { min-width:0; } .contact-grid small { display:block; margin-bottom:.55rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.13em; font-weight:400; opacity:.6; } .contact-grid strong { display:block; overflow-wrap:anywhere; font-size:clamp(.82rem,1.25vw,1rem); } .contact-grid b { font-size:1.25rem; font-weight:400; } footer { display:flex; justify-content:space-between; gap:2rem; padding:1.5rem 4vw; background:var(--ink); color:var(--paper); font-size:.7rem; } footer p { margin:0; }
@keyframes blink { 50% { opacity:0; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .cursor,.prompt i { animation:none; } .project { transition:none; } }
@media (max-width:900px) { .hero { grid-template-columns:1fr; padding:7rem 5vw; } .terminal { max-width:640px; width:calc(100% - 18px); } .section { grid-template-columns:1fr; padding:6rem 5vw; } .section-label { margin-bottom:1rem; } }
@media (max-width:640px) { .site-header { min-height:62px; } nav { gap:.8rem; font-size:.68rem; } nav a::before { display:none; } .brand { font-size:.82rem; } .hero { min-height:auto; padding-top:5rem; background-size:32px 32px; } h1 { font-size:clamp(3rem,15vw,5rem); } .terminal-body { min-height:330px; padding:1.35rem; } .about-grid,.facts { grid-template-columns:1fr; gap:1.5rem; } .facts { gap:0; } .skill-row { grid-template-columns:1fr; gap:1rem; } .project { grid-template-columns:35px 1fr; gap:1rem; } .project-link { grid-column:2; } .project-heading { display:block; } .project-heading span { display:inline-block; margin-top:1rem; } .contact { padding:6rem 5vw 5rem; } .contact-heading { display:block; } .contact-heading>p:last-child { margin-top:1.5rem; } .contact-grid { grid-template-columns:1fr; } .contact-grid>a { min-height:120px; grid-template-columns:38px 1fr auto; gap:1rem; } .contact-grid svg { width:28px; height:28px; } footer { flex-direction:column; } }