:root{--bg:#0f1720;--card:#0b1220;--accent:#60a5fa;--muted:#94a3b8;color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;background:#071024;color:#e6eef8}

.container{max-width:1000px;margin:2rem auto;padding:1rem}

/* Header / Nav */
.site-header{padding:1.5rem 1rem;background:transparent}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1000px;margin:0 auto}
.site-title{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.1rem;display:inline-flex;align-items:center;gap:.6rem}
#nav-toggle{background:transparent;border:1px solid rgba(255,255,255,0.06);color:inherit;padding:.4rem .6rem;border-radius:6px}
.site-nav{display:none}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.site-nav a{color:var(--muted);text-decoration:none;padding:.25rem .4rem;border-radius:6px}
.site-nav a:hover{color:var(--accent);background:rgba(255,255,255,0.02)}

/* Logo and title */
.logo{width:36px;height:36px;display:block;border-radius:8px}
.site-name{font-weight:700;font-size:1.05rem;color:var(--accent)}

.hero{text-align:center;padding:2rem 1rem}
.site-header h1{margin:.2rem 0;font-size:2rem}
.tagline{color:var(--muted);margin:0}
.hero-cta{margin-top:1rem}
.btn{display:inline-block;padding:.5rem .8rem;border-radius:8px;background:var(--accent);color:#071024;text-decoration:none;margin-right:.5rem}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--accent)}

/* Content cards grid */
.links-grid{display:grid;grid-template-columns:1fr;gap:1rem;padding:1rem}
.card{display:block;padding:1rem;border-radius:10px;background:rgba(255,255,255,0.02);text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,0.02)}
.card h3{margin:.1rem 0}
.card p{color:var(--muted);margin:.4rem 0 0}

section{background:rgba(255,255,255,0.02);padding:1rem;border-radius:8px;margin:1.25rem 0}
.site-footer{text-align:center;padding:1rem;color:var(--muted);font-size:.9rem}
a{color:var(--accent)}

@media(min-width:700px){
	.site-header h1{font-size:3rem}
	.links-grid{grid-template-columns:repeat(3,1fr)}
	.site-nav{display:block}
	#nav-toggle{display:none}
}

@media(min-width:1000px){
	.container{padding:2rem}
	.nav-wrap{padding:0 1rem}
}

/* Small utility */
.muted{color:var(--muted)}

/* Utility: margin top 1.5rem (used by some pages) */
.mt-1-5{margin-top:1.5rem}

/* Focus states */
/* Stronger, more visible focus styles for keyboard users */
:root{
	--bg:#071024;
	--surface:#081426;
	--card:#0d1726;
	--accent:#60a5fa;
	--accent-2:#7dd3fc;
	--muted:#9aa9bb;
	--text:#e6eef8;
	--glass:rgba(255,255,255,0.04);
	color-scheme:dark;
}

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

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

a:focus, button:focus{
	outline:3px solid rgba(96,165,250,0.85);
	outline-offset:2px;
	box-shadow:0 0 0 3px rgba(96,165,250,0.12);
}

/* Skip link: hidden visually but visible on keyboard focus */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;border-radius:6px;background:var(--accent);color:#071024;z-index:9999;box-shadow:0 6px 18px rgba(2,6,23,0.6)}

/* Telephone links: keep functionality but neutral visual styling */
a[href^="tel:"]{color:inherit;text-decoration:none}
a[href^="tel:"]:hover,a[href^="tel:"]:focus{color:inherit;text-decoration:underline}

/* Projects list */
.proj-card{margin:1.25rem 0;padding:1rem;border-radius:8px;background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.02)}
.proj-card h3{margin:.25rem 0;font-size:1.05rem}
.proj-card .meta{margin-left:1.5rem;color:var(--muted);font-size:.95rem}
.proj-card .desc{margin-left:1.5rem;margin-top:.6rem;line-height:1.5}
.proj-card .proj-full{margin-left:1.5rem;margin-top:.5rem}
.proj-card .tags{margin-left:1.5rem;margin-top:.6rem;color:var(--muted);font-size:.9rem}

/* Tag pill styling */
.tag{display:inline-block;padding:.18rem .6rem;margin-right:.4rem;border-radius:999px;background:rgba(255,255,255,0.03);color:var(--muted);font-size:.85rem}

/* Blog post styles (updated per request) */
.blog-entries{margin-top:1rem}
.blog-entry{max-width:none;width:100%;margin:0;padding:0 1rem;background:transparent;line-height:1.65}
@media(min-width:900px){.blog-entry{padding:0}}

/* Optional utility to make a post full-bleed (edge-to-edge viewport) */
.blog-entry--fullbleed{width:100vw;max-width:100vw;margin-left:calc((100% - 100vw)/2);margin-right:calc((100% - 100vw)/2);padding-left:1rem;padding-right:1rem}
.post-header{margin:1rem 0 0}
.post-header h1{font-size:2rem;margin:.25rem 0 0;color:var(--text);line-height:1.15}
.post-subtitle{color:var(--muted);margin:0 0 1rem;font-size:1rem}
.post-content{padding:0;margin:0 0 1.25rem;line-height:1.65;text-align:left}
.post-intro{margin:0 0 0.5rem;font-size:1.0625rem;color:var(--muted);line-height:1.6}
.post-intro p{margin-bottom:1rem}
.post-content p{margin-top:0.25rem;margin-bottom:0}
.post-section{margin-top:1.25rem}
.post-section h2{margin-top:0;margin-bottom:0.4rem}
.post-section p{margin-top:0.25rem;margin-bottom:0}

.post-content blockquote{margin:1rem 0;padding-left:1rem;border-left:4px solid rgba(255,255,255,0.06);color:var(--muted);font-style:italic}
.input,
textarea{ }
input,textarea{width:100%;padding:.6rem .75rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text)}
input:focus,textarea:focus{outline:3px solid rgba(96,165,250,0.12);outline-offset:2px}
.btn.primary{background:var(--accent);color:#071024;padding:.6rem 1rem;border-radius:8px;border:none}

.entry-separator{
	border:0;
	height:2px;
	background:linear-gradient(90deg,transparent,rgba(154,169,187,0.12),transparent);
	margin:0.75rem 0;
}