/* M20 Music — structure after the UK Deep site (design: Timothy Paul Read).
   Re-skinned to motorway blue; type set in Transport (road-sign lettering). */

@import url("./fonts.css");

:root {
  --blue:   rgb(43, 92, 204);   /* #2B5CCC — M20 brand blue */
  --white:  #FFFFFF;
  --black:  #0A0A0A;
  --grey:   rgba(255, 255, 255, 0.62);
  --hair:   rgba(255, 255, 255, 0.16);
  --bar-h:  60px;
  --logo-w: 768px;
  --minilogo-h: 30px;   /* mini wordmark height in the top bar (bar is 60px tall) */

  --sign-heavy:  "Transport Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sign-medium: "Transport Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

html, body { margin: 0; min-height: 100%; }

body {
  position: relative;
  background-color: var(--blue);
  color: var(--white);
  text-align: center;
  font-family: var(--sign-medium);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- fixed top bar (motorway gantry) ---- */
#ctrlbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: var(--bar-h);
  background-color: var(--black);
  z-index: 10;
  display: flex;
  align-items: center;
}
#minilogo {
  position: absolute;
  top: 50%; left: 16px;
  transform: translateY(-50%);
  height: var(--minilogo-h);
  display: flex;
  align-items: center;
}
#minilogo svg,
#minilogo img { height: 100%; width: auto; display: block; }

/* ---- spacer that pushes the masthead down from the bar ---- */
.emptypanel {
  width: 100%;
  height: clamp(120px, 22vh, 200px);
}

/* ---- main panel ---- */
#mainpanel {
  display: inline-block;
  width: min(var(--logo-w), 90vw);
  padding-bottom: 4rem;
}

/* centred masthead wordmark */
#mainlogo {
  width: 78%;
  height: auto;
  display: block;
  margin: 0 auto;
}
#mainlogo svg,
#mainlogo img { width: 100%; height: auto; display: block; }

.tagline {
  margin-top: clamp(1.1rem, 3vw, 2rem);
  font-family: var(--sign-medium);
  font-size: clamp(0.82rem, 1.7vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.9;
}

/* ---- reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-from, 40px));
  transition: opacity 0.9s ease-in-out, transform 0.9s ease-in-out;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- releases (hidden until catalogue.json carries content) ---- */
#releases {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 4vw, 3rem) 5rem;
  display: none;
}
#releases.has-content { display: block; }
.rgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 26rem));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: start;
  justify-content: center;
}

/* ---- release card ---- */
.release {
  background: var(--black);
  color: var(--white);
  text-align: left;
  display: flex;
  flex-direction: column;
}
.release .cover { aspect-ratio: 1; background: var(--black); position: relative; overflow: hidden; }
.release .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.release .cover .catno {
  position: absolute; top: .6rem; left: .6rem;
  font-family: var(--sign-medium);
  font-weight: 400; font-size: .68rem; letter-spacing: .12em;
  color: var(--white); background: var(--blue);
  padding: .22rem .5rem;
}

.release .rhead { padding: 1rem 1.1rem .5rem; }
.release .rhead .rtitle {
  font-family: var(--sign-heavy);
  font-size: 1.5rem; letter-spacing: .01em; margin: 0 0 .2rem;
}
.release .rhead .rartist {
  font-family: var(--sign-medium);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--grey); margin: 0;
}

.release .embed { margin: .25rem 0 0; }
.release .embed iframe { width: 100%; border: 0; display: block; background: var(--black); }

.release .buys { padding: .9rem 1.1rem 1.1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.release .buy {
  flex: 1 1 auto; text-align: center; text-decoration: none;
  font-family: var(--sign-medium);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .6rem .7rem; background: var(--blue); color: var(--white);
  border: 2px solid var(--blue);
  transition: background .12s ease, color .12s ease;
}
.release .buy:hover, .release .buy:focus-visible {
  background: var(--black); color: var(--white); outline: none;
}
.release .buy.secondary { background: transparent; color: var(--white); }
.release .buy.secondary:hover, .release .buy.secondary:focus-visible {
  background: var(--blue); color: var(--white);
}

/* ---- ctrlbar external links ---- */
.bar-links, .bar-links-short {
  margin-left: auto; margin-right: 18px;
  display: flex; align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
}
.bar-links a, .bar-links-short a {
  font-family: var(--sign-medium);
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color 0.12s ease;
}
.bar-links a:hover, .bar-links a:focus-visible,
.bar-links-short a:hover, .bar-links-short a:focus-visible {
  border-bottom-color: var(--white); outline: none;
}
.bar-links-short { display: none; }
@media (max-width: 560px) {
  .bar-links { display: none; }
  .bar-links-short { display: flex; gap: 0.9rem; margin-right: 12px; }
  .bar-links-short a { font-size: 0.66rem; letter-spacing: 0.08em; }
}

/* ---- footer ---- */
#sitefooter {
  border-top: 3px solid var(--black);
  padding: clamp(1.5rem, 4vh, 2.5rem) 1rem;
  text-align: center;
  background: var(--black);
}
#sitefooter a {
  font-family: var(--sign-medium);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color 0.12s ease;
}
#sitefooter a:hover, #sitefooter a:focus-visible {
  border-bottom-color: var(--white); outline: none;
}