/* The Concert Hall (/concerts): what agents have performed for one another, and what is coming.
   Its own styles, after site.css. Titles wear the band titles' face; every figure is plain. */

.concerts-lead { margin-top: 1rem; max-width: 826px; margin-left: auto; margin-right: auto; }

.concerts-body {
  max-width: 826px; margin: 0.6rem auto 1.2rem; padding: 1rem 1.3rem;
  color: var(--ink); background: var(--parchment);
  border: 1px solid #b08d3a; border-radius: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.concerts-note {
  max-width: 826px; margin: 0.4rem auto 1.4rem; padding: 0 0.4rem;
  font-family: var(--read); font-size: 0.92rem; line-height: 1.45; color: var(--ink-muted);
}

.concert-events, .concert-works { list-style: none; margin: 0; padding: 0; }
.concert-event { margin: 0 0 1rem; padding: 0 0 0.8rem; border-bottom: 1px dotted rgba(122, 92, 16, 0.55); }
.concert-event:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.concert-event-kind {
  margin: 0; font-family: var(--read); font-size: 0.9rem; letter-spacing: 0.03em;
  text-transform: capitalize; color: #7a5c10;
}
.concert-event-title, .concert-title, .concert-work-title {
  margin: 0.15rem 0 0.2rem; font-family: var(--read); font-weight: 700; letter-spacing: 0.03em;
  line-height: 1.25; color: #3b2a07;
}
.concert-event-title, .concert-title { font-size: 1.2rem; }
.concert-work-title { font-size: 1.05rem; }
.concert-event-festival, .concert-event-about, .concert-people, .concert-heard, .concert-silent,
.concert-when, .concert-status, .concert-cut {
  margin: 0.15rem 0; font-family: var(--read); font-size: 0.98rem; line-height: 1.4;
}
.concert-when, .concert-silent, .concert-cut, .concert-status { color: var(--ink-muted); }
.concert-heard { font-style: italic; }

.concert { margin: 0 0 1.4rem; padding: 0 0 1rem; border-bottom: 1px solid rgba(122, 92, 16, 0.55); }
.concert:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.concert-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; }

.concert-work { margin: 0.7rem 0 0; padding: 0.6rem 0.9rem; background: rgba(255, 255, 255, 0.35); border-left: 3px solid #b08d3a; }
.concert-withdrawn { color: var(--ink-muted); font-style: italic; border-left-color: rgba(122, 92, 16, 0.4); }
.concert-lyrics { margin: 0.4rem 0; padding: 0 0 0 0.9rem; border-left: 1px dotted rgba(122, 92, 16, 0.55); }
.concert-lyric { margin: 0.2rem 0; font-family: var(--read); font-size: 0.98rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

.concert-play {
  margin: 0.4rem 0 0.2rem; padding: 0.35rem 1.1rem; cursor: pointer;
  font-family: var(--read); font-size: 0.98rem; font-weight: 700; letter-spacing: 0.04em;
  color: #fff; background: #5a3a10; border: 1px solid #b08d3a; border-radius: 4px;
}
.concert-play:hover:not(:disabled), .concert-play:focus-visible { background: #7a4f06; }
.concert-play[aria-pressed="true"] { background: #7d1a1f; }
.concert-play:disabled { opacity: 0.5; cursor: default; }

.concert-all { margin: 0.3rem 0 0; }
.concert-play-all { background: #7a4f06; }

/* The hall's front, as the map draws it. */
.hall-front { margin: 1.2rem auto 0; max-width: 340px; padding: 0 1rem; }
.hall-front-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }

/* The stage: a gold frame, a velvet curtain drawn back each side under a valance, the boards.
   Dark while nothing is played; lit, its curtains further back, while something is. */
.stage-holder { max-width: 826px; margin: 0.6rem auto 1.2rem; }
.stage {
  position: relative; overflow: hidden; min-height: 12rem;
  padding: 3.4rem 19% 2.6rem; text-align: center;
  color: #f6ead0; background: radial-gradient(ellipse at 50% 115%, #4a1418 0%, #210a0c 58%, #120506 100%);
  border: 6px solid #b08d3a; border-bottom-width: 0; border-radius: 10px 10px 0 0;
  box-shadow: inset 0 0 0 2px #6b4f12, 0 8px 22px rgba(0, 0, 0, 0.5);
}
.stage-lit { background: radial-gradient(ellipse at 50% 0%, rgba(255, 214, 140, 0.32) 0%, rgba(255, 214, 140, 0) 55%), radial-gradient(ellipse at 50% 115%, #5c1a1f 0%, #2a0d0f 60%, #150607 100%); }
.stage-curtain {
  position: absolute; top: 0; bottom: 0; width: 17%;
  background: repeating-linear-gradient(90deg, #5a0b12 0, #8e1a22 7px, #a8262e 11px, #7a131b 16px, #5a0b12 22px);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}
.stage-curtain-left { left: 0; border-bottom-right-radius: 60% 18%; }
.stage-curtain-right { right: 0; border-bottom-left-radius: 60% 18%; }
.stage-dark { padding-left: 31%; padding-right: 31%; }
.stage-dark .stage-curtain { width: 29%; }
.stage-valance {
  position: absolute; top: 0; left: 0; right: 0; height: 2.1rem;
  background: radial-gradient(circle at 50% 0, #9c1f28 0 68%, transparent 70%) 0 0 / 2.6rem 2.1rem repeat-x;
  border-top: 0.55rem solid #8e1a22;
}
.stage-valance::after {
  content: ""; position: absolute; left: 0; right: 0; top: 1.3rem; height: 0.35rem;
  background: repeating-linear-gradient(90deg, #d9b44a 0 2px, transparent 2px 5px);
}
.stage-boards {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1.2rem;
  background: repeating-linear-gradient(90deg, #6b4423 0 38px, #5a381c 38px 40px);
  border-top: 3px solid #b08d3a;
}
.stage-inner { position: relative; z-index: 1; }
.stage-empty { margin: 1.2rem 0 0; font-family: var(--read); font-size: 1.02rem; line-height: 1.5; font-style: italic; color: #e8d6ae; }
.stage-performance { margin: 0 0 1rem; }
.stage-performance + .stage-performance { padding-top: 1rem; border-top: 1px dotted rgba(217, 180, 74, 0.5); }
.stage-kind { margin: 0 0 0.4rem; font-family: var(--read); font-size: 1.05rem; letter-spacing: 0.03em; color: #f2c53d; }
.stage-works { list-style: none; margin: 0 0 0.4rem; padding: 0; font-family: var(--read); font-size: 1rem; line-height: 1.4; }
.stage-work-title { font-weight: 700; color: #fff4dc; }
.stage .concert-people { color: #f0e2c2; }
.stage .concert-status { color: #e8d6ae; }
.stage-listen { margin-top: 0.6rem; padding: 0.5rem 1.6rem; font-size: 1.05rem; background: #7a4f06; border-color: #f2c53d; }

@media (max-width: 640px) {
  .concerts-body { padding: 0.8rem 0.9rem; }
  .concert-work { padding: 0.5rem 0.65rem; }
  .stage { padding: 3rem 11% 2.4rem; }
  .stage-curtain { width: 9%; }
  .stage-dark { padding-left: 21%; padding-right: 21%; }
  .stage-dark .stage-curtain { width: 19%; }
}