/* The shared festival layout provides typography, navigation, and the photo viewer. */
:root {
  background: #110f0b;
}
body {
  background: #110f0b;
  color: #f8f1df;
}
.brand strong,
.eyebrow,
.text-link {
  color: #e8c461;
}
.app-link,
.button {
  background: #e8c461;
  color: #251d08;
}
.button-secondary {
  background: transparent;
  color: #f1d784;
  border-color: #a08235;
}
.collection-nav a[aria-current] {
  background: #614d1a;
  border-color: #d6b253;
  color: #fff2bc;
}
.festival-card,
.detail-panel,
.empty-state {
  background: #1c1810;
  border-color: #65512a;
}
.hiphop-poster {
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: auto;
  background: #18150f;
  border: 0;
}
button.hiphop-poster {
  cursor: zoom-in;
}
.hiphop-poster img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.hiphop-card .hiphop-poster {
  min-height: 180px;
  display: grid;
  place-items: center;
}
.hiphop-card .hiphop-poster img {
  max-height: 420px;
  width: 100%;
  height: auto;
}
.hiphop-card .festival-card-body {
  padding: 20px;
}
.hiphop-card .festival-card-body p {
  margin-top: 8px;
}
.detail-panel {
  padding: 28px;
  border: 1px solid #65512a;
  border-radius: 20px;
}
.detail-layout + .detail-panel {
  margin-top: 30px;
}
.hiphop-information {
  margin: 18px 0;
}
.hiphop-information > div {
  display: grid;
  grid-template-columns: minmax(100px, 0.35fr) minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #ffffff12;
}
.hiphop-information dt {
  color: #c7b992;
}
.hiphop-information dd {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.hiphop-hall {
  margin-top: 22px;
}
.hiphop-gallery {
  margin: 40px 0;
}
.hiphop-gallery h2 {
  margin-bottom: 20px;
}
.hiphop-gallery .gallery-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: start;
}
.image-viewer {
  background: #17130c;
  border-color: #ddba52;
}
.image-viewer-photo.hiphop-poster,
.image-viewer-photo .hiphop-poster {
  height: 100%;
}
.image-viewer-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-viewer-hint,
.image-credit,
.freshness {
  color: #c0b18c;
}
.visit-notice {
  margin: 24px 0 14px;
  line-height: 1.7;
  color: #e7d49d;
}
.source-notice {
  margin-bottom: 28px;
}
.site-footer {
  border-top-color: #b08d3540;
}
@media (max-width: 560px) {
  .hiphop-information > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}