/* X-RATED Tribute Site — JOUW aanpassingen
   Dit bestand wordt NOOIT overschreven door de generator.
   Zet hier al je kleuraanpassingen, lettertypes, en eigen stijl. */

:root {
  --bg: #191919;
  --bg2: #212121;
  --amber: #e9ddc6;
  --amber-dim: #b7a688;
  --text: #c8c8c8;
  --text-dim: #808080;
  --border: #2e2e2e;
  --glow: rgba(233, 221, 198, 0.08);
}

/* Naam-pillen: platte tekst in een kader, geen losse pil om de naam */
.tribute .name-card {
  padding: 24px 40px;
  border-radius: 10px;
  min-width: 220px;
}
.tribute .name-card .name,
.tribute .name-card a.name {
  display: inline;
  font-size: 1.4em;
  font-weight: 600;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
}
.tribute .name-card a.name:hover {
  background: none;
  border-color: transparent;
  box-shadow: none;
}
.tribute .name-card .lifespan {
  margin-top: 8px;
  font-size: 0.95em;
}

/* Subtiele "Over deze site" knop onder de jaartallen */
.about-trigger {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.85em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
}
.about-trigger:hover {
  color: var(--amber);
}

/* Pop-up met de achtergrondverhaal en foto van de cassettebandjes */
.about-modal {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  max-width: 520px;
  width: 90vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}
.about-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.about-modal p { margin-bottom: 12px; }
.about-modal .photo {
  width: 100%;
  border-radius: 6px;
  margin: 0 auto 20px;
  display: block;
  border: 1px solid var(--border);
}
.about-modal .signature {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.9em;
  margin-top: 4px;
}
.about-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4em;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.about-modal .modal-close:hover {
  color: var(--amber);
}