:root{
  --bg: #0b0b0b;
  --ink: #111;
  --muted: #666;
  --card: #ffffff;
  --maxw: 900px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --gap: 24px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  color: var(--ink);
  /* If this CSS is at /00_assets/css/styles.css and site runs at root, keep absolute: */
  background: var(--bg) url("/00_assets/img/backgrounds/black-ghost.jpg") center/cover fixed no-repeat;
  /* If serving from a subfolder, use relative: url("../img/backgrounds/black-ghost.jpg") */
}

/* ----- Layout chrome ----- */
.backdrop{
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.65));
  min-height: 100%;
  padding: 24px 16px 64px;
}

header{
  max-width: var(--maxw);
  margin: 0 auto 12px;
  display: grid;
  gap: 12px;
  justify-items: center;
}

.brand img{
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  border-radius: 8px;
}

nav{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
nav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: rgba(255,255,255,.08);
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  backdrop-filter: blur(2px);
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
nav a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }

main{
  max-width: var(--maxw);
  margin: 16px auto 0;
  display: grid;
  gap: var(--gap);
}

/* ----- Card (album) ----- */
.album{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: clip;
  display: grid;
  grid-template-columns: 1fr;
}

.album__header{
  padding: 18px 20px 0;
  text-align: center;
}
.album__title{
  margin: 0 0 6px;
  font-size: clamp(20px, 2.3vw, 28px);
  letter-spacing: .02em;
}
.album__subtitle{
  margin: 0 0 12px;
  color: var(--muted);
  font-style: italic;
  font-size: .95rem;
}

.album__content{
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 880px){
  .album__content{
    grid-template-columns: minmax(300px, 1fr) minmax(280px, 1fr);
  }
}

/* ----- Bandcamp player ----- */
.player{ padding: 20px; }
.player iframe{
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: #fff;
  height: auto;
}
/* Per-album heights (tweak as needed to avoid internal scroll) */
#album-Microdozer .player iframe{ height: 850px; }
#album-777       .player iframe{ height: 950px; }
#sleepwalk       .player iframe{ height: 760px; }
#cthulhu         .player iframe{ height: 950px; }
#interference    .player iframe{ height: 920px; }
#time-fluctuations .player iframe{ height: 950px; }
#who-cares       .player iframe{ height: 850px; }

/* ----- Details column ----- */
.details{
  position: relative;
  padding: 20px 20px 28px;
}
/* Reserve space for bottom badge (JS sets --badge-space) */
.details::after{
  content: "";
  display: block;
  height: var(--badge-space, 0px);
  pointer-events: none;
}
/* All images in details except the badge */
.details img:not(.corner-badge){
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Text blocks */
.credits{
  margin-top: 14px;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.4;
}
.credits b{ font-weight: 600; }
.release{
  margin-top: 14px;
  font-style: italic;
  color: var(--muted);
}

footer{
  max-width: var(--maxw);
  margin: 24px auto 0;
  text-align: center;
  color: #bbb;
  font-size: .9rem;
}

/* ----- Hover swap (default 5:3 box; opt-out per album) ----- */
.hover-gif{
  aspect-ratio: 320 / 192;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}
/* Albums wanting natural ratio instead */
#interference .hover-gif,
#sleepwalk .hover-gif,
#time-fluctuations .hover-gif,
#album-777 .hover-gif{
  aspect-ratio: auto;
}

/* ----- Bottom badge (fixed width, natural height) ----- */
.corner-badge{
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: auto;
  border-radius: 12px;
  z-index: 3;
  pointer-events: auto;
}

/* ----- Flyer grid ----- */
.flyer-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 880px){
  .flyer-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Uniform tile container so tiny images don’t look “small” */
.flyer-grid a { background: transparent; border: 0; padding: 0; }


.flyer-grid img{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* never crop; keep ratio */
  border-radius: 8px;        /* slightly smaller than outer to show frame */
  transition: transform .15s ease;
}
.flyer-grid a:hover img{ transform: translateY(-2px); }

/* ----- Lightbox (no distortion) ----- */
.lightbox{
  position: fixed;
  inset: 0;
  display: none;             /* toggled by .open */
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.9);
  z-index: 1000;
}
.lightbox.open{ display: flex; }

/* Lightbox layout – center image, caption below, no distortion */
.lightbox__figure{
  margin: 0;
  width: 95vw;
  height: 85vh;
  display: flex;
  flex-direction: column;      /* caption under the image */
  align-items: center;
  justify-content: center;
}

.lightbox__img{
  width: 100%;
  height: 100%;
  object-fit: contain;         /* keep correct aspect ratio */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

.lightbox__caption{
  margin-top: 12px;
  color: #eee;
  text-align: center;
  font-size: .95rem;
  max-width: 90vw;
}


/* Lightbox controls */
.lightbox__btn{
  position: absolute;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.lightbox__btn:hover{ background: rgba(255,255,255,.2); }
.lightbox__close{ top: 16px; right: 16px; font-size: 22px; line-height: 1; }
.lightbox__prev { left: 16px;  top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (pointer: coarse){
  .lightbox__btn{ width: 48px; height: 48px; }
}

/* (Legacy) artwork wrapper—safe to keep if reused */
.artwork{ display: flex; flex-direction: column; gap: 12px; }
.artwork img{ width: 100%; height: auto; display: block; border-radius: 12px; }

/* -------- Buttons -------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;          /* dark pill */
  color:#111;               /* white text */
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background:#fff;
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.btn .arrow{ transition: transform .15s ease; }
.btn:hover .arrow{ transform: translateX(2px); }

/* Optional: a lighter style (use for “Back to Shows”) */
.btn--light{
  background:#fff;
  color:#111;
  border-color: rgba(0,0,0,.25);
}
.btn--light:hover{
  background:#f7f7f7;
}

/* Shows page: push the archive button to the bottom and tighten spacing */
#shows-past .album__content > .details:last-child{
  display: flex;
  flex-direction: column;
  padding-bottom: 28px;      /* was 28px; lower = closer to border */
}

#shows-past .album__content > .details:last-child .credits:last-child{
  margin-top: auto;          /* pushes the "Open full archive" row down */
}

/* Make the player column wider on desktop */
@media (min-width: 880px){
  #videos-official .album__content,
  #videos-live .album__content{
    /* ~80% player / 20% side column */
    grid-template-columns: minmax(560px, 1.4fr) minmax(200px, .6fr);
    align-items: start;
  }

  /* Let the iframe grow to fill the wider column */
  #videos-official .video-frame,
  #videos-live .video-frame{
    max-width: none;   /* remove any cap */
    margin: 0;         /* no centering needed; it fills the column */
  }
}

/* Keep the right-side image small */
#videos-official .album__content > .details:last-child img,
#videos-live    .album__content > .details:last-child img{
  width: auto;
  max-width: clamp(160px, 65%, 280px);
  display: block;
  margin: 0 auto 8px;
}