body {
  font-family: 'Runic', sans-serif;
  background-color: #0a0a0a;
  color: #f5f5f5;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===== HEADER ===== */
.header {
  text-align: center;
  padding: 2.5rem; /* 40px → 2.5rem */
  background: #000;
  box-shadow: 0 0.25rem 1.25rem rgba(255,255,255,0.05); /* 4px 20px → rem */
}

.header h1 {
  letter-spacing: 0.125rem; /* 2px → 0.125rem */
  font-size: clamp(1.75rem, 5vw, 3rem); /* 28px–48px → rem */
}

/* ===== NAVIGATION ===== */
.nav {
  background: #111;
  border-top: 0.0625rem solid #222; /* 1px → 0.0625rem */
  border-bottom: 0.0625rem solid #222;
  box-shadow: 0 0.125rem 0.625rem rgba(255,255,255,0.05);
}

.nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.75rem 0.5rem;
  gap: 0.625rem;
}

.nav a {
  text-decoration: none;
  color: #eee;
  padding: 0.625rem 1.125rem;
  font-weight: 500;
  border: 0.0625rem solid transparent;
  border-radius: 0.375rem;
  transition: all .25s ease;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
}

.nav a:hover {
  background: #fff;
  color: #000;
  box-shadow: 0 0 0.625rem rgba(255,255,255,0.5);
}

.nav a.active,
.nav a[aria-current="page"] {
  border-color: #fff;
  background: #000;
  color: #fff;
  box-shadow: 0 0 0.5rem rgba(255,255,255,0.4);
}

/* ===== GRID ===== */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr)); /* 250px → 15.625rem */
  grid-auto-rows: auto;
  gap: 1.875rem; /* 30px → 1.875rem */
  padding: 2.5rem 5%;
  width: 100%;
  box-sizing: border-box;
}

.album {
  background: #111;
  border-radius: 0.75rem; /* 12px → 0.75rem */
  overflow: hidden;
  box-shadow: 0 0.25rem 0.9375rem rgba(255,255,255,0.08); /* 4px 15px → rem */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.album:hover {
  transform: scale(1.05);
  box-shadow: 0 0.375rem 1.5625rem rgba(255,255,255,0.15); /* 6px 25px → rem */
}

.album img {
  width: 100%;
  height: 15.625rem; /* 250px → 15.625rem */
  object-fit: cover;
}

.album h2 {
  font-size: 1.25rem; /* 20px → 1.25rem */
  margin: 0.625rem; /* 10px → 0.625rem */
  text-align: center;
}

.album p {
  text-align: center;
  color: #bbb;
  margin-bottom: 0.9375rem; /* 15px → 0.9375rem */
}

/* ===== FOOTER ===== */
.footer {
  text-align: center;
  background: #000;
  padding: 0.9375rem; /* 15px → 0.9375rem */
  font-size: 0.875rem; /* 14px → 0.875rem */
  letter-spacing: 0.0625rem; /* 1px → 0.0625rem */
}
.album {
  text-decoration: none;   /* забирає підкреслення */
  color: inherit;          /* успадковує колір тексту */
  display: block;          /* робить посилання блоком */
}

.album:link,
.album:visited,
.album:hover,
.album:active {
  color: inherit;
  text-decoration: none;
}