/* ── Unholy Land — album card ─────────────────────────────────
   An overlay over the whole site, not a page of its own.
   Rides on band.css for the type scale and the 20/60 spacing.
   ------------------------------------------------------------ */

/* Geometry only. What this card is *made of* — its ground, its hairline, the
   shadow under it and the blur behind it — is archive-system.css's shared
   overlay material, which every dialog on the site takes, so the album card
   cannot drift into being its own thing again. */
#album-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gap-lg) var(--gap);
  overflow-y: auto;
}
#album-overlay[hidden] { display: none; }

/* ── the record lights its own case ──────────────────────────
   --ac-lamp is the cover, set by albumcard.js once the file is known to
   exist, and painted here at eighty pixels of blur — far past any drawing,
   so what reaches the walls is the sleeve's colour and nothing legible. It
   costs no request the card was not already making, and it means every
   release opens in its own light: Sahara's gold warms the whole case, a
   black-metal demo leaves it black, which is the right answer for both. */
#album-card {
  position: relative;
  width: min(1040px, 100%);
  max-height: calc(100vh - var(--gap-lg) * 2);
  overflow-y: auto;
  padding: var(--gap-lg);
}
#album-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ac-lamp) center top / 120% no-repeat;
  filter: blur(80px) saturate(1.5);
  opacity: 0;
  transition: opacity var(--mo-move) var(--ease-out);
  /* strongest behind the cover at the top left, gone by the tracklist — a
     lamp above the object, not a wash over the words */
  -webkit-mask-image: radial-gradient(120% 62% at 22% 0%, #000, transparent 72%);
          mask-image: radial-gradient(120% 62% at 22% 0%, #000, transparent 72%);
}
#album-card.ac-lit::before { opacity: .3; }
/* everything the card holds sits above its own light */
#album-card > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  #album-card::before { transition: opacity var(--mo-fade) linear; }
}

/* ── open / close ────────────────────────────────────────── */
@keyframes ac-fade    { from { opacity: 0 } to { opacity: 1 } }
@keyframes ac-fade-out{ from { opacity: 1 } to { opacity: 0 } }
@keyframes ac-in {
  0%   { opacity: 0; transform: translateY(30px) scale(.92); }
  62%  { opacity: 1; transform: translateY(-5px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ac-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(16px) scale(.95); }
}
/* the cover lands first, then the two columns rise in behind it */
@keyframes ac-rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

#album-overlay        { animation: ac-fade .22s ease both; }
#album-card           { animation: ac-in .42s var(--ease) both; }
#album-card .ac-hero  { animation: ac-rise .40s .07s var(--ease) both; }
#album-card .ac-cols  { animation: ac-rise .40s .15s var(--ease) both; }
#album-card .ac-press { animation: ac-rise .40s .22s var(--ease) both; }

#album-overlay.closing              { animation: ac-fade-out .20s ease both; }
#album-overlay.closing #album-card  { animation: ac-out .20s ease both; }
#album-overlay.closing .ac-hero,
#album-overlay.closing .ac-cols,
#album-overlay.closing .ac-press    { animation: none; }

@media (prefers-reduced-motion: reduce) {
  #album-overlay, #album-card, #album-card .ac-hero, #album-card .ac-cols,
  #album-card .ac-press,
  #album-overlay.closing, #album-overlay.closing #album-card { animation: none; }
}

#album-close {
  position: absolute; top: var(--gap); right: var(--gap);
  background: none; border: 0; padding: 0 4px;
  color: var(--ui-accent); cursor: pointer;
  font-family: var(--nav-font);
  font-size: 22px; font-weight: 700; line-height: 1;
}
#album-close:hover { color: var(--white); }

/* ── card hero ───────────────────────────────────────────── */
.ac-hero {
  display: grid; grid-template-columns: 240px 1fr;
  gap: var(--gap-lg);
  align-items: center;
}
.ac-cover {
  width: 240px; height: 240px;
  background: #16191e;
  overflow: hidden;
}
.ac-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-cover.empty { border: 1px solid #1c2027; }

.ac-title {
  margin: 0;
  font-family: var(--display-font);
  font-size: 34px; font-weight: 400; line-height: 1.05;
  color: var(--white); letter-spacing: .5px;
}
.ac-title.len-m { font-size: 26px; }
.ac-title.len-l { font-size: 21px; line-height: 1.15; }
.ac-band { margin-top: 6px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--white); }
.ac-band:hover { text-decoration: underline; }
.ac-meta { margin-top: 3px; color: var(--muted); font-size: 12px; }
.ac-facts {
  margin: var(--gap) 0 0;
  display: grid; grid-template-columns: 84px 1fr;
  row-gap: 3px; column-gap: var(--gap);
  font-size: 12px;
}
.ac-facts dt { color: var(--muted); }
.ac-facts dd { margin: 0; color: var(--text); }
.ac-physical {
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #1c2027;
  color: var(--text); font-size: 12px;
}
.ac-physical-label {
  color: var(--ui-accent); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase;
}
.ac-editions { flex-basis: 100%; display: grid; gap: 5px; }
.ac-edition {
  display: grid; grid-template-columns: minmax(90px, auto) 1fr auto; gap: 8px;
  padding: 5px 7px; background: #14181e;
}
.ac-edition-format { color: var(--white); }
.ac-edition-label { color: var(--text); }
.ac-edition-meta { color: var(--muted); white-space: nowrap; }
.ac-physical-sources { flex-basis: 100%; font-size: 10px; }
.ac-physical-sources a { color: var(--muted); }
.ac-physical-sources a:hover { color: var(--white); }

/* ── card body ───────────────────────────────────────────── */
.ac-cols {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr;
  gap: var(--gap-lg);
  margin-top: var(--gap-lg);
}
/* nothing was credited on the release — two columns, not a hole where the
   third used to be */
.ac-cols.two { grid-template-columns: 1.15fr 1fr; }
.ac-cols h3 {
  margin: 0 0 var(--gap);
  font-family: var(--display-font);
  font-size: 24px; font-weight: 400; line-height: 1;
  color: var(--white); letter-spacing: .5px;
}
.ac-cols h3.sub { margin-top: var(--gap-lg); color: var(--ui-accent); font-size: 20px; }

.track {
  display: grid; grid-template-columns: 26px 1fr auto;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid #171b21;
  font-size: 13px;
}
.track:last-child { border-bottom: 0; }
.t-no  { color: var(--dim); }
.t-ttl { color: var(--text); min-width: 0; }
.t-len { color: var(--muted); font-variant-numeric: tabular-nums; }
.track-total {
  display: flex; justify-content: space-between;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: 12px;
}

.person { padding: 4px 0; font-size: 13px; }
/* a person with an aid opens their page — same affordance the member cards
   on the band page use, so a name that reacts is a name you can click */
.person.linked { cursor: pointer; }
.person.linked:hover .p-name { color: var(--ui-accent); }
.p-name { color: var(--white); font-weight: 600; transition: color .2s; }
.p-role { color: var(--muted); font-size: 12px; margin-top: 1px; }
/* a quiet mark, never louder than the name it follows */
.p-rip {
  margin-left: 6px;
  color: var(--dim); font-size: 11px; font-weight: 400;
  white-space: nowrap;
}

/* ═══ press — the review index; every row is a credit and a door out.
   Runs the full width of the card, under the columns: the line somebody
   wrote is the point of the row, and a line wants room to be read. The
   attribution sits at the foot of each card so a grid row lines up whether
   or not a quote was saved. ═══ */
.ac-press {
  margin-top: var(--gap-lg); padding-top: 18px;
  border-top: 1px solid var(--border);
}
.ac-press h3 {
  margin: 0 0 var(--gap);
  font-family: var(--display-font);
  font-size: 24px; font-weight: 400; line-height: 1;
  color: var(--white); letter-spacing: .5px;
}
.press-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 10px;
}
.press-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: #14181e; border: 1px solid transparent;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.press-row:hover { background: #191e25; border-color: var(--border); }
.press-row:hover .press-src { color: var(--ui-accent); }
/* the quote carries the card; the attribution drops to the floor of it */
.press-quote {
  margin: 0; padding-inline-start: 10px;
  border-inline-start: 2px solid var(--border);
  color: var(--text); font-size: 13px; line-height: 1.45;
}
.press-quote::before { content: '“'; }
.press-quote::after  { content: '”'; }
.press-main {
  display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap;
  margin-top: auto;
}
.press-src { color: var(--white); font-weight: 600; font-size: 13px; transition: color .2s; }
.press-score {
  color: var(--ui-accent); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.press-meta { color: var(--muted); font-size: 12px; }
/* the community's aggregate is not one voice, so it is not one of the cards */
.press-ma {
  margin-top: 10px; background: none;
  border: 0; border-top: 1px dashed var(--border);
  padding: 10px 0 0;
}
.press-ma:hover { background: none; border-color: var(--border); }

@media (max-width: 760px) {
  .ac-hero { grid-template-columns: 1fr; }
  .ac-cover { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .ac-cols, .ac-cols.two { grid-template-columns: 1fr; }
  .press-grid { grid-template-columns: 1fr; }
}

/* ═══ mobile ═══ */
@media (max-width: 860px) {
  #album-overlay { padding: 10px; }
  #album-card { padding: 20px 16px; max-height: calc(100vh - 20px); }
  .ac-hero { gap: 16px; }
  .ac-cover { width: 200px; height: 200px; margin: 0 auto; }
  .ac-title { font-size: 26px; }
  .ac-cols { gap: 28px; margin-top: 28px; }
  .ac-cols h3.sub { margin-top: 28px; }
}

/* ── the release's own thread ─────────────────────────────────
   Under the press, which is the right order: the press is what was written
   about this record and this is what is being said about it now. It shares
   the card's ground rather than sitting in a box of its own — a panel inside
   a panel is two frames around one conversation. */
.ac-talk { margin-top: var(--gap-lg); border-top: 1px solid var(--arch-rule); padding-top: var(--gap); }
.ac-talk .remark-holder { min-height: 80px; }