@font-face {
  font-family: "Roboto";
  src: url("fonts/roboto.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --black: #000;
  --discography-bg: #0a0a0a;
  --white: #fff;
  --nav: #c4c4c4;
  --credit: #666;
  --accent: #52779b;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--black);
  color: var(--white);
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.discography-page { background: var(--discography-bg); }
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }

.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: .6rem .8rem;
  background: #fff;
  color: #000;
  transform: translateY(-120%);
}
.skip-link:focus { transform: none; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 45px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  background: inherit;
  font-size: 13px;
  line-height: 25px;
  text-transform: uppercase;
}
.site-header a { text-decoration: none; }
.social-nav, .primary-nav { display: flex; align-items: center; }
.social-nav { gap: 8px; }
.primary-nav { gap: 5px; margin-left: 10px; font-weight: 500; }
.wordmark { color: var(--nav); }
.primary-nav a:last-child { color: var(--white); }
.home-page .primary-nav a:last-child { color: var(--accent); }
.discography-page .wordmark { color: var(--accent); }
.social-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: #171717;
  color: #fff;
}
.social-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-icon .icon-fill { fill: currentColor; stroke: none; }
.social-discogs { border-radius: 50%; }

.home-main { padding-bottom: 10px; }
.hero {
  position: relative;
  min-height: calc((100vw - 40px) * .26431 + 25px);
  margin: 0 20px;
  padding-top: 15px;
}
.hero-image { width: 59.47%; height: auto; }
.hero h1 {
  position: absolute;
  top: 50%;
  left: calc(59.47% + 20px);
  width: 371px;
  margin: 0;
  transform: translateY(-50%);
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0;
}
.image-strip {
  margin: 0 20px;
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.image-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home-seo {
  margin: 42px 20px 50px;
  color: #a9a9a9;
}
.home-seo h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}
.home-seo p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.65;
}
.home-seo a { color: #fff; text-underline-offset: 3px; }

.discography-main { padding: 10px 12.5px; }
.credit-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.credit-row.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.credit-row.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.credit-card {
  min-width: 0;
  padding: 7.5px;
  background: var(--discography-bg);
}
.cover-link, .cover-image { display: block; aspect-ratio: 1; overflow: hidden; }
.credit-card img { width: 100%; height: 100%; object-fit: cover; }
.credit-card p {
  min-height: 60.72px;
  margin: 10px 0 0;
  color: var(--credit);
  font-size: 12.8px;
  font-weight: 400;
  line-height: 15.36px;
  letter-spacing: -.64px;
}
.credit-card strong, .video-card strong { font-weight: 700; }
.credit-card em, .video-card em { font-style: italic; }
.video-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-row.columns-1 { grid-template-columns: 1fr; }
.video-card {
  min-width: 0;
  padding: 7.5px;
  background: var(--discography-bg);
}
.video-frame { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-play {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.video-play img { width: 100%; height: 100%; object-fit: cover; }
.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  border-radius: 12px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .82);
}
.video-play-icon::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 28px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #fff;
}
.video-play:hover .video-play-icon,
.video-play:focus-visible .video-play-icon { background: #f00; }
.video-fallback { display: grid; height: 100%; place-items: center; color: #fff; }
.video-card p {
  min-height: 45.36px;
  margin: 10px 0 0;
  color: var(--credit);
  font-size: 12.8px;
  font-weight: 400;
  line-height: 15.36px;
  letter-spacing: -.64px;
}

@media (max-width: 767px) {
  .site-header { padding-inline: 10px; }
  .primary-nav { margin-left: 8px; }
  .hero {
    min-height: auto;
    margin-inline: 20px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
  }
  .hero-image { width: 100%; }
  .hero h1 {
    position: static;
    width: min(100%, 371px);
    margin: 30px 10px 35px;
    transform: none;
  }
  .image-strip { grid-template-columns: 1fr; gap: 20px; }
  .home-seo { margin: 36px 20px 44px; }
  .credit-row,
  .credit-row.columns-4,
  .credit-row.columns-3 { grid-template-columns: 1fr; }
  .video-row, .video-row.columns-1 { grid-template-columns: 1fr; }
  .credit-card p { min-height: 45px; }
}