:root { --ink:#18313f; --muted:#5d6d75; --paper:#f8f8f5; --white:#fff; --line:#d9e0df; --accent:#bd5b3e; --soft:#e9efed; --serif:'Libre Baskerville', Georgia, serif; --sans:'DM Sans', Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:96px; } body { margin:0; overflow-x:hidden; font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.6; } a { color:inherit; } img { display:block; max-width:100%; } .skip-link { position:absolute; left:-10000px; top:auto; } .skip-link:focus { left:1rem; top:1rem; z-index:10; background:var(--white); padding:.6rem 1rem; }
.site-header { min-height:78px; padding:0 max(5vw, 1.25rem); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(248,248,245,.96); position:sticky; top:0; z-index:5; } .brand { font-weight:700; text-decoration:none; font-size:1.35rem; letter-spacing:-.05em; } .brand span { color:var(--accent); } .site-nav { display:flex; gap:1.6rem; } .site-nav a,.back-link { color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:600; } .site-nav a:hover,.back-link:hover,.text-link:hover { color:var(--accent); } .menu-toggle { display:none; }
.section-shell { width:min(1120px, 90vw); margin:0 auto; } .hero { min-height:calc(100vh - 78px); padding:clamp(6rem, 14vw, 10rem) 0 6rem; max-width:none; padding-left:max(5vw, 1.25rem); padding-right:max(5vw, 1.25rem); background:var(--soft); } .eyebrow,.section-label,.project-category { text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:700; color:var(--accent); margin:0 0 1.2rem; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); line-height:1.17; letter-spacing:-.04em; } .hero h1 { font-size:clamp(3.5rem, 8.5vw, 7rem); margin-bottom:1.5rem; } .hero-copy { max-width:620px; font-size:clamp(1.1rem, 2vw, 1.35rem); color:var(--muted); } .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:2.25rem; } .button { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; padding:.8rem 1.1rem; font-weight:700; font-size:.9rem; border:1px solid var(--ink); } .button-primary { background:var(--ink); color:#fff; } .button-primary:hover { background:var(--accent); border-color:var(--accent); } .button-secondary { background:transparent; } .button-secondary:hover { background:var(--white); } .text-link { color:var(--ink); font-weight:700; }
.split-section { display:grid; grid-template-columns:1fr 2fr; gap:5rem; padding:8rem 0; border-bottom:1px solid var(--line); } .split-section h2,.section-heading h2 { font-size:clamp(2rem, 4vw, 3.4rem); margin-bottom:1.2rem; } .split-section p:not(.section-label) { color:var(--muted); max-width:650px; font-size:1.08rem; } .skills-section { padding:8rem 0; border-bottom:1px solid var(--line); } .skills-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); } .skills-grid article { padding:2rem 2rem 2.2rem 0; border-bottom:1px solid var(--line); } .skills-grid article:nth-child(odd) { margin-right:2rem; } .skills-grid h2 { font-family:var(--sans); font-size:1rem; letter-spacing:0; margin-bottom:.7rem; } .skills-grid p { color:var(--muted); margin:0; }
.projects-section { padding:8rem 0; } .section-heading { display:grid; grid-template-columns:1.3fr .7fr; gap:4rem; align-items:end; margin-bottom:3rem; } .section-heading > p { color:var(--muted); margin:0 0 1.2rem; } .projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; } .project-card { background:var(--white); border:1px solid var(--line); transition:transform .2s ease,box-shadow .2s ease; } .project-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(24,49,63,.08); } .project-card-link { display:block; text-decoration:none; height:100%; } .project-card img { width:100%; aspect-ratio:16 / 9; object-fit:cover; object-position:top; border-bottom:1px solid var(--line); background:var(--soft); } .project-card-body { padding:1.5rem; } .project-card-body h3 { font-family:var(--serif); font-size:1.45rem; line-height:1.25; margin-bottom:.6rem; } .project-description { color:var(--muted); margin-bottom:1rem; } .tag-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.45rem; } .tag-list li { color:var(--muted); font-size:.78rem; border:1px solid var(--line); padding:.2rem .45rem; } .card-cta { display:inline-block; color:var(--accent); font-weight:700; font-size:.88rem; margin-top:1.4rem; }
.education-section { border-top:1px solid var(--line); } .education-detail { font-weight:600; } .contact { padding:8rem 0; } .contact h2 { font-size:clamp(2.5rem, 5vw, 4.5rem); margin-bottom:2.5rem; } .contact-links { display:flex; flex-wrap:wrap; gap:1.2rem 2.2rem; } .contact-links a { font-weight:700; text-decoration:none; border-bottom:1px solid currentColor; } .contact-links a:hover { color:var(--accent); } footer { border-top:1px solid var(--line); padding:1.5rem max(5vw, 1.25rem); display:flex; justify-content:space-between; color:var(--muted); font-size:.82rem; }
.project-page { padding-bottom:6rem; } .project-intro { padding:6rem 0 3rem; } .project-intro h1 { font-size:clamp(3rem, 7vw, 5.8rem); margin-bottom:1.25rem; } .lead { max-width:720px; font-size:1.2rem; color:var(--muted); } .project-hero-image { width:min(1120px, 90vw); max-height:650px; object-fit:cover; object-position:top; margin:0 auto; border:1px solid var(--line); background:var(--soft); } .project-content { padding:4rem 0 1rem; display:grid; grid-template-columns:2fr 1fr; gap:3rem; } .project-copy { max-width:760px; } .detail-block { margin-bottom:2.5rem; } .detail-block h2 { font-size:1.6rem; margin-bottom:.75rem; } .detail-block p { color:var(--muted); } .resource-link { display:block; color:var(--accent); font-weight:700; margin:.75rem 0; } .gallery { padding-top:3rem; } .gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; } .gallery-grid img { width:100%; border:1px solid var(--line); object-fit:cover; aspect-ratio:16/10; object-position:top; background:var(--soft); }.not-found { padding:8rem 0; }
@media (max-width:720px) { .site-header { min-height:65px; } .menu-toggle { display:flex; width:38px; height:38px; border:0; background:transparent; padding:8px; flex-direction:column; justify-content:center; gap:5px; } .menu-toggle span { display:block; height:2px; background:var(--ink); width:22px; } .site-nav { display:none; position:absolute; top:64px; left:0; right:0; padding:1.25rem 5vw; flex-direction:column; gap:1rem; background:var(--paper); border-bottom:1px solid var(--line); } .site-nav.is-open { display:flex; } .hero { min-height:auto; padding-top:6rem; } .split-section,.section-heading,.project-content { grid-template-columns:1fr; gap:2rem; padding:5rem 0; } .skills-section,.projects-section,.contact { padding:5rem 0; } .skills-grid { grid-template-columns:1fr; } .skills-grid article:nth-child(odd) { margin-right:0; } .projects-grid,.gallery-grid { grid-template-columns:1fr; } footer { gap:.7rem; flex-direction:column; } .project-intro { padding:4.5rem 0 2.5rem; } }