/* Written contributions from the artist's marked project index. */
.role-fx { --role-color: #ff969b; }
.role-lighting { --role-color: #eed479; }
.role-groom { --role-color: #90b9ff; }
.role-vfx { --role-color: #9cdaab; }
.role-gameplay { --role-color: #d3af95; }
.role-cinematic { --role-color: #f5a9da; }
[data-theme="light"] .role-fx { --role-color: #a32e42; }
[data-theme="light"] .role-lighting { --role-color: #775b00; }
[data-theme="light"] .role-groom { --role-color: #305ba8; }
[data-theme="light"] .role-vfx { --role-color: #21683c; }
[data-theme="light"] .role-gameplay { --role-color: #805237; }
[data-theme="light"] .role-cinematic { --role-color: #9c3479; }

/* Scene credits share the project index's role metadata. */
.scene-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
  width: min(440px, 80%);
  margin-top: 18px;
  padding-left: 12px;
  border-left: 1px solid var(--world-accent);
  color: #edf0f6;
  font: 500 14px/1.5 var(--sans);
}
.scene-role-name { max-width: 100%; }
[data-theme="light"] .scene-roles { color: #1e2c3e; border-color: currentColor; }
@media (min-width: 761px) {
  .scene-copy { margin-top: -64px; }
  .scene-summary .scene-description { width: min(520px, 90%); max-width: 46ch; }
}
@media (max-width: 760px) {
  /* Longer contribution notes need room above the scene footer. */
  .world-stage { min-height: 960px; }
  .scene-roles { width: 49%; margin-top: 14px; padding-left: 9px; }
  .scene-role-name { flex-basis: 100%; }
}

.index-collection .index-row {
  min-height: 112px;
  padding-block: 24px;
  column-gap: 12px;
  row-gap: 14px;
}
.index-row > span:first-child { grid-column: 1; grid-row: 1; }
.index-collection .index-world { grid-column: 2; grid-row: 1; }
.index-category, .index-year, .index-external { grid-row: 1; }
.index-roles {
  grid-column: 2 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 10px;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}
.role-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--role-color) 22%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--role-color) 6%, transparent);
  color: var(--role-color);
  font: 500 14px/1.5 var(--sans);
  letter-spacing: -.015em;
}
.role-tag > i {
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.role-name { min-width: 0; }
.index-collection .index-world:hover { transform: none; }

@media (max-width: 600px) {
  .index-collection .index-row {
    grid-template-columns: 18px minmax(0, 1fr) 74px;
    padding-block: 23px;
    gap: 12px 10px;
  }
  .index-collection .index-row > span:first-child { display: block; align-self: start; padding-top: 6px; }
  .index-collection .index-world { grid-column: 2 / -1; font-size: 18px; }
  .index-collection .index-category { display: none; }
  .index-collection .index-year { grid-column: 2; grid-row: 3; align-self: center; }
  .index-collection .index-external { grid-column: 3; grid-row: 3; padding-block: 6px; }
  .index-collection .index-roles { grid-column: 2 / -1; gap: 7px; }
}
@media print {
  .role-tag { color: #222; background: none; border-color: #999; }
}