/* ABOUT / player profile. The portrait frame can take the owner's photo later. */
#main .about-grid { align-items: start; }
#main .about-grid .identity { min-width: 0; }
#main .about-grid .profile-portrait {
  position: relative;
  isolation: isolate;
  width: min(100%, 350px);
  margin: 16px 0 22px;
  border: 3px solid var(--paper);
  background: var(--black);
  box-shadow: 6px 6px 0 var(--red);
}
.profile-portrait-matte {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(151deg, transparent 0 59%, var(--red) 59% 81%, transparent 81%),
    radial-gradient(circle at 2px 2px, #f5f1e83b 1px, transparent 1.5px) 0 0 / 7px 7px,
    var(--black);
}
.profile-portrait-matte::before {
  content: '';
  position: absolute;
  inset: 16%;
  background:
    linear-gradient(var(--paper) 0 0) left top / 17px 2px,
    linear-gradient(var(--paper) 0 0) left top / 2px 17px,
    linear-gradient(var(--paper) 0 0) right top / 17px 2px,
    linear-gradient(var(--paper) 0 0) right top / 2px 17px,
    linear-gradient(var(--paper) 0 0) left bottom / 17px 2px,
    linear-gradient(var(--paper) 0 0) left bottom / 2px 17px,
    linear-gradient(var(--paper) 0 0) right bottom / 17px 2px,
    linear-gradient(var(--paper) 0 0) right bottom / 2px 17px;
  background-repeat: no-repeat;
}
.profile-portrait-cross { color: var(--paper); font: 700 36px/1 monospace; }
.profile-portrait-label {
  position: absolute;
  top: 10px;
  left: 10px;
  color: var(--paper);
  font: 800 10px/1.4 monospace;
  letter-spacing: .12em;
}
.profile-portrait figcaption {
  padding: 7px 10px;
  border-top: 2px solid var(--paper);
  color: var(--black);
  background: var(--paper);
  font: 800 12px/1.4 system-ui,sans-serif;
}
#main .about-grid .identity .profile-bio p {
  max-width: none;
  margin: 0 0 9px;
  color: var(--paper);
  font: 500 14px/1.75 system-ui,sans-serif;
}
#main .about-grid .identity .profile-bio .profile-lead {
  margin-bottom: 12px;
  padding-inline-start: 10px;
  border-inline-start: 3px solid var(--red);
  font-weight: 850;
  font-size: 16px;
}
.profile-timeline {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f5f1e855;
}
.profile-timeline-range { color: var(--paper); font: 750 10px/1.5 monospace; letter-spacing: .15em; }
.profile-timeline h4 { margin: 4px 0 16px; font: 900 21px/1.3 system-ui,sans-serif; }
.profile-timeline ol { margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--red); list-style: none; }
.profile-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(36px,45px) minmax(0,1fr);
  align-items: baseline;
  gap: 8px;
  padding-bottom: 14px;
}
.profile-timeline li:last-child { padding-bottom: 0; }
.profile-timeline li::before {
  content: '';
  position: absolute;
  top: 7px;
  left: -19px;
  width: 8px;
  height: 8px;
  background: var(--red);
  border: 1px solid var(--paper);
  transform: rotate(45deg);
}
.profile-timeline time { color: var(--paper); font: 900 14px/1.5 monospace; font-variant-numeric: tabular-nums; }
.profile-timeline h5 { margin: 0 0 3px; color: var(--paper); font: 850 13px/1.55 system-ui,sans-serif; }
.profile-timeline h5 span {
  display: inline-block;
  margin-left: 3px;
  padding: 1px 4px;
  background: var(--paper);
  color: var(--black);
  font-size: 10px;
  line-height: 1.35;
  vertical-align: 1px;
}
#main .about-grid .identity .profile-timeline p { margin: 0; color: #f5f1e8c9; font-size: 12px; line-height: 1.65; }
@media (max-width: 600px) {
  #main .about-grid .profile-portrait { width: min(100%, 295px); }
  #main .about-grid .identity { padding: 25px 22px 28px; transform: rotate(-1.2deg); }
}