@font-face {
    font-family: "Chango";
    /* A name you choose to use later */
    src: url("Chango-Regular.ttf") format("truetype");
    /* Include multiple formats for compatibility */
}

/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; line-height: 1.4; color: #222; }

/* Navbar */
.site-nav { background: #fff; border-bottom: 1px solid #e6e6e6; }
.nav-container { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem; position: relative; }

.nav-left .logo { font-family: "Chango", system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; font-weight: 700; font-size: 1.1rem; color: #222; text-decoration: none; display: inline-block; }
.logo-accent { color: #e44; font-weight: 800; margin-left: 4px; }

.nav-center { flex: 1; display: flex; justify-content: center; }
.nav-links { display: flex; gap: 1.2rem; list-style: none; }
.nav-links a { color: #222; text-decoration: none; padding: 0.25rem 0.35rem; transition: color .15s ease, background .15s ease;; }
.nav-links a:hover { background: #f5f5f5; color: #e44; }

.nav-right { display: flex; gap: 0.6rem; }
.nav-right .social { text-decoration: none; color: #444; font-size: 0.95rem; padding: 0.2rem 0.4rem; border-radius: 4px; transition: background .15s ease, color .15s ease;; }
.nav-right .social:hover { background: #f5f5f5; color: #e44; }

.nav-toggle { display: none; background: transparent; border: none; cursor: pointer; text-decoration: none; color: #444; font-size: 0.95rem; padding: 0.2rem 0.4rem; border-radius: 4px; transition: background .15s ease, color .15s ease;; }
.nav-toggle:hover { background: #f5f5f5; color: #e44; }

/* Mobile styles */
@media (max-width: 760px) {
	.nav-container { justify-content: space-between; }
	.nav-toggle { display: inline-flex; order: 1; flex-shrink: 0; }
	.nav-left { order: 2; flex: 1; display: flex; justify-content: center; }
	.nav-center { display: none; }
	.nav-right { order: 3; flex-shrink: 0; }
	.site-nav.open .nav-center { display: flex; flex-direction: column; gap: 0.5rem; position: absolute; left: 0; right: 0; top: 56px; background: #fff; padding: 0.8rem 1rem; border-bottom: 1px solid #e6e6e6; }
	.site-nav.open .nav-links { flex-direction: column; align-items: flex-start; }
}

/* Optional page spacing */
main { padding: 2rem 1rem; max-width: 1100px; margin: 0 auto; }