* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: 1.5;
  text-align: center;
}

main { flex: 1; padding: 20px; }

footer {
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 10px;
}

nav { margin: 0 0 1rem; }
nav a { margin: 0 .25rem; }

nav a:focus-visible,
footer a:focus-visible { outline: 2px solid; outline-offset: 3px; }

nav a, footer a { text-decoration: none; font-size: 16px; }

.hidden { display: none; }


.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 450px);
  gap: 8px;
  justify-content: center;
}

.album { display: grid; gap: 6px; justify-items: center; }
.album img { width: 100%; height: auto; }

.album-title { font-size:.95rem; }

.album-grid.table-look {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: #000;
  justify-items: center;
}
.album-grid.table-look .album {
  background: #fff;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 8px;
  text-decoration: none;
}
.album-grid.table-look img {
  display: block;
  width: 100%;
  max-width: 350px;
  height: auto;
}

a:visited { color: blue; }


.site-header { display: none; }

:root{
  --header-pad: 12px;
  --home-header-offset: 0px;
  --contact-header-offset: 60px;
  --contact-logo-w: 120px;
  --synths-header-offset: 0px;
  --merch-header-offset: 0px;
}


.site-header .logo-contact { display: none; }

/* HEADER ON HOME + SYNTHS + MERCH + CONTACT */
[data-route="home"]    .site-header,
[data-route="contact"] .site-header,
[data-route="synths"]  .site-header,
[data-route="merch"]   .site-header {
  display: grid;
  place-items: center;
  padding-block: var(--header-pad);
}

[data-route="home"]    .site-header { margin-top: var(--home-header-offset); }
[data-route="contact"] .site-header {
  margin-top: var(--contact-header-offset);
}
[data-route="synths"]  .site-header { margin-top: var(--synths-header-offset); }
[data-route="merch"]   .site-header { margin-top: var(--merch-header-offset); }

.site-header .banner, .site-header .logo { display: none; }

/* BANNER ON HOME + SYNTHS + MERCH */
[data-route="home"]   .site-header .banner,
[data-route="synths"] .site-header .banner,
[data-route="merch"]  .site-header .banner {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
}
/* LOGO ONLY ON CONTACT */
[data-route="contact"] .site-header .logo-contact {
  display: block;
  width: var(--contact-logo-w);
  height: auto;
  justify-self: center;
}

@media (max-width: 480px) {
  .album-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  [data-route="contact"] .site-header .logo-contact { width: 100px; }
}

img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}