/* Portraits keep their place on the charcoal brush; labels stay readable. */
.portrait-slot { min-width: 0; }
.portrait-row .band-portrait {
  display: block; width: 100%; min-height: 44px;
  background: transparent; border: 0; overflow: visible;
  transition: transform 220ms var(--ease);
}
.portrait-photo {
  display: block; position: absolute; inset: 0; overflow: hidden;
  border: 1px solid #ffffff50; background: #171717;
}
.portrait-photo::before, .portrait-photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.portrait-photo::before { background: linear-gradient(0deg,#080808c7,transparent 58%); }
.portrait-photo::after {
  box-shadow: inset 0 0 0 2px var(--red); opacity: 0;
  transition: opacity 140ms ease;
}
.portrait-caption {
  display: block; position: absolute; inset: 0; z-index: 2;
  font: 10px/1.25 var(--mono); text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 5px #000;
}
.portrait-name {
  display: block; position: absolute; left: 8px; bottom: 8px;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.portrait-role {
  display: block; position: absolute; top: calc(100% + 10px); right: 0;
  writing-mode: horizontal-tb; text-align: right; white-space: nowrap;
  color: #ddd; font-size: 10px; text-shadow: none;
}
.band-portrait:focus-visible { outline-offset: 5px; transition: none; }
.band-portrait:focus-visible .portrait-photo::after { opacity: 1; transition: none; }

@media (min-width: 761px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.frank-motion-off) .portrait-role {
    opacity: 0; transform: translateX(-12px);
    transition: opacity 160ms ease, transform 200ms var(--ease);
  }
  html:not(.frank-motion-off) .band-portrait:is(:hover,:focus-visible) .portrait-role {
    opacity: 1; transform: translateX(0);
  }
  html:not(.frank-motion-off) .band-portrait:focus-visible .portrait-role { transition: none; }
}
@media (hover: hover) and (pointer: fine) {
  .band-portrait:hover .portrait-photo::after { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.frank-motion-off) .band-portrait:hover:not(:focus-visible) { transform: translateY(-6px); }
}

/* Give the four faces enough room before the columns become cramped. */
@media (max-width: 1000px) {
  .world-strip { grid-template-columns: 1fr; gap: 40px; }
  .world-strip .portrait-frame { width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .world-strip .portrait-frame { margin-bottom: 64px; }
  .portrait-caption {
    top: calc(100% + 10px); bottom: auto; left: -4px; right: -4px;
    display: block; text-align: center; font-size: 10px; line-height: 1.3;
    text-shadow: none;
  }
  .portrait-name, .portrait-role { position: static; writing-mode: horizontal-tb; transform: none; overflow-wrap: anywhere; }
  .portrait-name { min-height: 2.6em; }
  .portrait-role { margin-top: 3px; padding-right: 4px; font-size: 9px; color: #bbb; white-space: normal; }
  .portrait-photo::before { display: none; }
}
html.frank-motion-off .band-portrait,
html.frank-motion-off .portrait-photo::after,
html.frank-motion-off .portrait-role { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .band-portrait, .portrait-photo::after, .portrait-role { transition: none; }
}