:root { --bg:#071426; --surface:#0d213b; --text:#eaf3ff; --muted:#aabbd1; --blue:#44b8ff; --gold:#f4be57; --line:rgba(150,196,236,.22); color-scheme:dark; }
:root[data-theme="light"] { --bg:#f4f8fc; --surface:#fff; --text:#10213a; --muted:#50627a; --blue:#076ba8; --gold:#96650a; --line:rgba(21,62,105,.2); color-scheme:light; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } a { color:var(--blue); text-underline-offset:.2em; } a:hover { color:var(--gold); } :focus-visible { outline:3px solid var(--gold); outline-offset:4px; } .container { width:min(1120px,calc(100% - 2.5rem)); margin:auto; } .skip-link { position:absolute; left:-999px; top:1rem; z-index:10; background:var(--gold); color:#111; padding:.55rem .8rem; } .skip-link:focus { left:1rem; }
.site-header { position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .nav-wrap { min-height:4.5rem; display:flex; align-items:center; gap:1.25rem; } .wordmark { color:var(--text); text-decoration:none; font-weight:800; font-size:1.2rem; letter-spacing:-.04em; margin-right:auto; } .wordmark span { color:var(--gold); } nav { display:flex; gap:1.25rem; } nav a { color:var(--text); text-decoration:none; font-weight:650; } .theme-toggle,.menu-toggle { border:1px solid var(--line); border-radius:.4rem; background:transparent; color:var(--text); font:inherit; padding:.4rem .6rem; cursor:pointer; } .menu-toggle { display:none; }
.hero { min-height:min(680px,calc(100vh - 4.5rem)); position:relative; display:grid; align-items:center; overflow:hidden; border-bottom:1px solid var(--line); } .hero-art,.hero-shade { position:absolute; inset:0; width:100%; height:100%; } .hero-art { object-fit:cover; object-position:center; } .hero-shade { background:linear-gradient(90deg,rgba(5,13,27,.94) 0%,rgba(5,13,27,.7) 45%,rgba(5,13,27,.22) 100%); } .hero-content { position:relative; padding-block:5rem; max-width:1120px; } .eyebrow { color:var(--gold); font-weight:750; letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; margin:0 0:.8rem; } h1,h2,h3 { line-height:1.12; letter-spacing:-.035em; } h1 { font-size:clamp(2.8rem,7vw,5.8rem); max-width:11ch; margin:.1rem 0 1rem; } h1 span { color:var(--gold); } .hero-copy { max-width:39rem; color:#e2eefc; font-size:clamp(1.05rem,2vw,1.28rem); margin-bottom:2rem; } .button { display:inline-flex; gap:.5rem; align-items:center; background:var(--blue); color:#041322; font-weight:800; text-decoration:none; border-radius:.38rem; padding:.72rem 1rem; } .button:hover { background:var(--gold); color:#171006; }
.section { padding-block:6rem; } .section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:2rem; } h2 { font-size:clamp(2rem,4vw,3.2rem); margin:.1rem 0 1.2rem; } .project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .project-card { background:var(--surface); border:1px solid var(--line); padding:1.5rem; border-radius:.55rem; min-height:250px; display:flex; flex-direction:column; } .project-card:hover { border-color:var(--blue); transform:translateY(-3px); transition:.18s ease; } .project-number { color:var(--gold); font:700 .8rem ui-monospace,SFMono-Regular,Menlo,monospace; } h3 { font-size:1.45rem; margin:1.7rem 0 .6rem; } .project-card p { color:var(--muted); margin:0; } .project-card .status { font-size:.88rem; margin-top:auto; padding-top:1rem; color:var(--gold); } .featured { background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 70%,#17456b)); }
.project-link { color:var(--text); text-decoration:none; } .project-link span { color:var(--blue); font-size:.9em; } .project-link:hover { color:var(--blue); }
.about-section { border-block:1px solid var(--line); background:color-mix(in srgb,var(--surface) 40%,var(--bg)); } .about-grid { display:grid; grid-template-columns:minmax(220px,.72fr) 1.25fr; gap:clamp(2rem,7vw,6rem); align-items:center; } .avatar-frame { margin:0; border-radius:50%; overflow:hidden; border:4px solid var(--gold); aspect-ratio:1; box-shadow:0 0 0 10px color-mix(in srgb,var(--gold) 13%,transparent); } .avatar-frame img { width:100%; height:100%; object-fit:cover; display:block; } .about-grid p,.contact>p:last-child { color:var(--muted); max-width:62ch; font-size:1.05rem; }
.page-hero { padding:clamp(5rem,12vw,9rem) 0 4.5rem; background:radial-gradient(circle at 72% 12%,color-mix(in srgb,var(--blue) 20%,transparent),transparent 35%),var(--bg); border-bottom:1px solid var(--line); } .page-hero h1 { max-width:16ch; font-size:clamp(2.8rem,7vw,5.4rem); } .page-hero h1 span { color:var(--gold); } .page-lead { max-width:44rem; color:var(--muted); font-size:1.15rem; } .focus-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .focus-card { padding:1.4rem; border:1px solid var(--line); border-radius:.55rem; background:var(--surface); } .focus-card h3 { margin:.2rem 0 .6rem; font-size:1.18rem; } .focus-card p { color:var(--muted); margin:0; } .privacy-note { padding:1.6rem; border-left:4px solid var(--gold); background:color-mix(in srgb,var(--surface) 75%,var(--gold)); border-radius:0 .5rem .5rem 0; } .privacy-note h2 { font-size:1.55rem; margin:0 0 .7rem; } .privacy-note p { margin:.5rem 0 0; color:var(--muted); } .back-link { font-weight:700; }
.contact { padding-bottom:7rem; } footer { border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; } footer .container { min-height:5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; } footer p { margin:0; }
@media (max-width:700px) { .menu-toggle { display:block; } nav { display:none; position:absolute; top:4.5rem; left:0; right:0; padding:1rem 1.25rem; background:var(--bg); border-bottom:1px solid var(--line); flex-direction:column; } nav.open { display:flex; } .theme-toggle { margin-left:0; } .hero { min-height:580px; } .hero-shade { background:linear-gradient(90deg,rgba(5,13,27,.92),rgba(5,13,27,.5)); } .project-grid,.about-grid,.focus-grid { grid-template-columns:1fr; } .avatar-frame { width:min(280px,72vw); } footer .container { padding-block:1rem; align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .project-card:hover { transform:none; transition:none; } }