@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
	--bg:#0f0f10;
	--panel:#0f1213;
	--muted:#9aa3a8;
	--accent:#6ab3ff;
	--glass:rgba(255,255,255,0.03);
	--radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:#e9f0f3;background:linear-gradient(180deg,#070708,#0f0f10);-webkit-font-smoothing:antialiased}

.site-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:transparent;backdrop-filter:blur(4px)}
.logo{font-weight:700;color:#fff;text-decoration:none;font-size:1.05rem;letter-spacing:0.2px}
.site-header nav a{color:var(--muted);margin-left:1.25rem;text-decoration:none;padding:.25rem .35rem;border-radius:6px;transition:color .18s,background .18s}
.site-header nav a:hover,.site-header nav a:focus{color:#fff;background:var(--glass);outline:none}

.container{max-width:1100px;margin:2.25rem auto;padding:0 1rem}

.hero{padding:3.25rem 0;text-align:center}
.hero h1{font-size:2.4rem;margin:0 0 .5rem;font-weight:600}
.lead{color:var(--muted);max-width:68ch;margin:0 auto;font-weight:300}
.btn{display:inline-block;margin-top:1rem;padding:.6rem 1rem;background:var(--accent);color:#04212a;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 6px 20px rgba(106,179,255,0.12)}

.featured{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.feature{display:block;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:.6rem;border-radius:var(--radius);text-decoration:none;color:inherit;transition:transform .28s ease,box-shadow .28s}
.feature img{width:100%;height:240px;object-fit:cover;border-radius:8px}
.feature h3{margin:.6rem 0 0;font-size:1rem;color:var(--muted);font-weight:600}
.feature:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(2,6,23,0.6)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.art{display:block;border-radius:12px;overflow:hidden;background:var(--panel);transition:transform .22s ease,box-shadow .22s}
.art img{width:100%;height:280px;object-fit:cover;display:block}
.art:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(2,6,23,0.55)}
.art .caption{padding:.6rem .7rem;color:var(--muted);font-size:.95rem}

.site-footer{text-align:center;padding:2.5rem 0;color:var(--muted);margin-top:3.5rem}

/* Accessibility & responsive tweaks */
a:focus-visible{outline:3px solid rgba(106,179,255,0.18);outline-offset:3px}

@media (max-width:900px){.featured{grid-template-columns:repeat(2,1fr)}.feature img{height:200px}}
@media (max-width:520px){.featured{grid-template-columns:1fr}.site-header{padding:1rem}.hero h1{font-size:1.6rem}.art img{height:200px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Project-specific styles */
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.25rem}
.project-card{display:block;border-radius:12px;overflow:hidden;background:var(--panel);text-decoration:none;color:inherit;padding:0;box-shadow:0 8px 30px rgba(2,6,23,0.45);transition:transform .22s,box-shadow .22s}
.project-card img{width:100%;height:220px;object-fit:cover;display:block}
.project-card .proj-meta{padding:.75rem}
.project-card h3{margin:0;font-size:1.05rem}
.project-card .muted{color:var(--muted);margin:.4rem 0 0;font-size:.95rem}
.project-card:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(2,6,23,0.6)}

.project-hero{padding:1.25rem 0 0}
.project-hero{text-align:center}
.project-hero h1{margin-bottom:.4rem}
.project-hero .lead{margin:0.4rem auto 0;max-width:60ch;color:var(--muted)}
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.project-grid .art{background:transparent;padding:0;border-radius:8px}
.project-grid figcaption{padding:.5rem;color:var(--muted);font-size:.95rem}

/* Filters */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 0}
.filter-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:.35rem .6rem;border-radius:999px;cursor:pointer;font-weight:600}
.filter-btn:hover{background:var(--glass);color:#fff}
.filter-btn.active{background:var(--accent);color:#04212a;border-color:transparent}

/* Email link styling */
a[href^="mailto:"]{color:#8fd3ff;font-weight:600;text-decoration:underline}
a[href^="mailto:"]:hover,a[href^="mailto:"]:focus{color:#cfeeff}

/* Lightbox styles */
.lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(1,2,3,0.6);opacity:0;pointer-events:none;transition:opacity .18s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox-inner{max-width:1100px;width:calc(100% - 4rem);max-height:85vh;padding:1rem}
.lightbox-content{background:var(--panel);padding:.8rem;border-radius:12px;display:flex;flex-direction:column;align-items:center}
.lightbox-content img{max-width:100%;max-height:70vh;border-radius:8px;display:block}
.lightbox-caption{color:var(--muted);margin-top:.5rem;text-align:center}
.lightbox-close{position:absolute;right:1rem;top:1rem;background:transparent;border:0;color:#fff;font-size:1.4rem;cursor:pointer}

.lightbox-desc{color:var(--muted);margin-top:.35rem;text-align:center;max-width:80ch;font-size:.95rem}