/* Release pages: one single, its canvas loop, and where to hear it.
   A standalone page, so it does not load style.css. On a phone the canvas
   fills the screen, as it does in a music app; on a wide screen it sits in
   a phone-shaped panel. */

:root {
  --bg: #0e0f13;
  --ink: #f0efea;
  --dim: rgb(240 239 234 / 0.7);
  --edge: rgb(240 239 234 / 0.24);
  --serif: "Spectral", "Iowan Old Style", Georgia, serif;
  color-scheme: dark;
}

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

html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--bg);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 27rem;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (min-width: 34rem) and (min-height: 40rem) {
  body { padding: 2rem 0; }
  .stage { min-height: min(100svh - 4rem, 48rem); border-radius: 8px; }
}

.backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.backdrop.blurred { filter: blur(36px) saturate(1.2) brightness(0.5); transform: scale(1.35); }

/* The canvas keeps its own 9:16 frame at the top of the page, so the
   artwork is never stretched or hidden when the list of stores is long.
   The text starts below the artwork and the rest scrolls over solid dark. */
.has-canvas .backdrop { inset: 0 0 auto 0; height: auto; aspect-ratio: 9 / 16; }

/* Scrim: clear over the artwork, dark under the text. */
.stage::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 9 / 16;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgb(14 15 19 / 0.45) 0%,
    rgb(14 15 19 / 0) 14%,
    rgb(14 15 19 / 0) 46%,
    rgb(14 15 19 / 0.85) 64%,
    rgb(14 15 19 / 1) 100%);
}
.has-cover.stage::after { inset: 0; aspect-ratio: auto; background: rgb(14 15 19 / 0.25); }

.back {
  position: absolute;
  top: 1rem;
  left: 1.25rem;
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--dim);
  text-decoration: none;
}
.back:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }

.sheet { padding: 3.5rem 1.25rem 1.5rem; }
.has-canvas .sheet { padding-top: min(29rem, 107vw); }

.cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 1.25rem;
  border-radius: 4px;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.5);
}

h1 {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 200;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.artist { margin: 0.4rem 0 0; font-size: 1.1875rem; font-style: italic; }
.meta { margin: 0.1rem 0 0; font-size: 0.9375rem; color: var(--dim); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
iframe:focus-visible { outline: none; }

/* Play: becomes the embedded player on click. */
.listen { margin: 1.1rem 0 0; }
.listen a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--ink);
  text-decoration: none;
}
.listen a::before {
  content: "";
  width: 2.25rem;
  height: 2.25rem;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-2.500 6.500v9l7.500-4.500z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-2.500 6.500v9l7.500-4.500z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.listen a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.listen iframe { display: block; width: 100%; height: 166px; border: 0; border-radius: 4px; }
.listen iframe.spotify { height: 152px; }
.listen iframe.video { height: auto; aspect-ratio: 16 / 9; }

/* Stores */
.stores { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.stores a {
  display: block;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: rgb(14 15 19 / 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  text-decoration: none;
}
.stores a:hover { background: rgb(240 239 234 / 0.12); border-color: rgb(240 239 234 / 0.55); }