* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0e0e0e; color: #e0e0e0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; min-height: 100vh; }
.site-wrapper { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }

#site-header { display: flex; justify-content: center; }
header { display: flex; flex-direction: column; align-items: center; padding: 2.5rem 0 1.5rem; }
.logo img { height: 60px; width: auto; }

nav { margin-top: 1.2rem; display: flex; gap: 2rem; }
nav a { color: #999; text-decoration: none; font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.2s; }
nav a:hover { color: #e0e0e0; }

.socials { display: flex; gap: 1.2rem; margin-top: 1.2rem; align-items: center; }
.socials a { color: #666; transition: color 0.2s; display: flex; align-items: center; }
.socials a:hover { color: #e0e0e0; }

a { color: inherit; text-decoration: none; border-bottom: 0.5px solid #666; transition: color 0.2s, border-color 0.2s; }
a:hover { color: #ffffff; border-color: #aaa; }

.divider { width: 100%; height: 1px; background: #222; margin: 1.5rem 0; }

footer { border-top: 0.5px solid #1a1a1a; margin-top: 2rem; padding: 2rem 0; text-align: center; }
footer p { font-size: 0.72rem; letter-spacing: 0.1em; color: #444; }
footer a { color: #444; text-decoration: none; transition: color 0.2s; }
footer a:hover { color: #888; }

html { scrollbar-gutter: stable; }

.socials a {
    display: flex;
    align-items: center;
    width: 18px;
    height: 18px;
    background-color: #666;
    transition: background-color 0.2s;
    -webkit-mask-size: cover;
    mask-size: cover;
}
.socials a:hover {
    background-color: #e0e0e0;
}

#site-socials { display: flex; justify-content: center; }
.socials a[title="Instagram"] { -webkit-mask: url(social-icons/instagram.svg) no-repeat center; mask: url(social-icons/instagram.svg) no-repeat center; }
.socials a[title="Bandcamp"] { -webkit-mask: url(social-icons/bandcamp.svg) no-repeat center; mask: url(social-icons/bandcamp.svg) no-repeat center; }
.socials a[title="Soundcloud"] { -webkit-mask: url(social-icons/soundcloud.svg) no-repeat center; mask: url(social-icons/soundcloud.svg) no-repeat center; }
.socials a[title="GitHub"] { -webkit-mask: url(social-icons/github.svg) no-repeat center; mask: url(social-icons/github.svg) no-repeat center; }

@media (max-width: 700px) {
  nav { flex-wrap: wrap; justify-content: center; gap: 1rem; }
}