/* Avatar gallery (06/11/2026): the title block, then one row of faces moving sideways. */
.avatar-gallery {
  --avatar-background: var(--stone-900, #25231C);
  --avatar-copy-color: rgba(245, 243, 239, .74);
  --avatar-caption-color: rgba(250, 248, 243, .6);
  position: relative;
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(32px, 4vw, 56px);
  background: var(--avatar-background);
  color: var(--paper);
  font-family: var(--sans);
  isolation: isolate;
}
.avatar-gallery-copy {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px var(--body-gap, 64px);
  width: min(var(--content-width, 1240px), calc(100% - 2 * var(--page-gutter, 24px)));
  max-width: 1240px;
  padding: 0;
  margin: 0 auto 24px;
}
.avatar-gallery-heading { display: contents; }
.avatar-gallery-intro { grid-column: 2; grid-row: 2; align-self: start; }
.avatar-gallery-kicker {
  grid-column: 1;
  grid-row: 1;
  display: block;
  margin-bottom: 18px;
  color: var(--green-400);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.avatar-gallery h2 {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--sans);
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.avatar-gallery h2 em {
  display: block;
  font-family: var(--sans);
  font-weight: 450;
  font-size: 1.06em;
  letter-spacing: -.025em;
}
@media (min-width: 1101px) {
  .avatar-gallery-copy { grid-template-columns: minmax(0, 1fr) 340px; }
  .avatar-gallery h2 em { display: inline; }
}
.avatar-gallery-copy p {
  max-width: 340px;
  margin: 0 0 24px;
  color: var(--avatar-copy-color);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}
.avatar-gallery-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 13px 23px;
  border: 1px solid var(--action);
  border-radius: 999px;
  background: var(--action);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  transition: background .2s, border-color .2s;
}
.avatar-gallery-cta:hover { background: var(--action-hover); border-color: var(--action-hover); }
.avatar-gallery-cta span { font-size: 20px; line-height: 1; }
/* One row of twenty faces. Two identical lists sit side by side and the track
   slides by half its width, so each face appears once per loop. Only transform
   moves (compositor thread); nothing is blurred, shaded or recalculated per frame. */
.avatar-gallery-stage {
  --avatar-card: 176px;
  --avatar-gap: 20px;
  --avatar-band-duration: 120s;
  --avatar-fade: 72px;
  position: relative;
  overflow: hidden;
  padding: 8px 0 4px;
}
/* Only the two side edges fade into the background. */
.avatar-gallery-stage::before,
.avatar-gallery-stage::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--avatar-fade);
  pointer-events: none;
}
.avatar-gallery-stage::before { left: 0; background: linear-gradient(90deg, var(--avatar-background), transparent); }
.avatar-gallery-stage::after { right: 0; background: linear-gradient(270deg, var(--avatar-background), transparent); }
.avatar-band-track {
  display: flex;
  width: max-content;
  animation: avatar-band var(--avatar-band-duration) linear infinite;
}
.avatar-band-list { display: flex; gap: var(--avatar-gap); padding-right: var(--avatar-gap); }
@keyframes avatar-band { to { transform: translate3d(-50%, 0, 0); } }
/* With JavaScript the row only moves while it is on screen, not paused and not
   playing a clip; without JavaScript it simply keeps moving. */
html.has-js .avatar-gallery:not(.is-moving) .avatar-band-track { animation-play-state: paused; }
@media (hover: hover) {
  .avatar-gallery-stage:hover .avatar-band-track { animation-play-state: paused; }
}
.avatar-portrait { flex: 0 0 var(--avatar-card); width: var(--avatar-card); margin: 0; }
.avatar-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 18px;
  background: #34312a;
}
.avatar-tile img, .avatar-tile video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}
.avatar-tile video { opacity: 0; transition: opacity .25s ease; }
.avatar-tile video.is-ready { opacity: 1; }
.avatar-static-profile { display: grid; gap: 2px; padding: 10px 2px 0; text-align: center; line-height: 1.35; }
.avatar-static-profile strong { color: var(--paper); font-size: 15px; font-weight: 500; }
.avatar-static-profile span { color: var(--avatar-caption-color); font-size: 14px; }
.avatar-gallery-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  margin-top: 20px;
  padding: 0 24px;
}
html:not(.has-js) .avatar-gallery-controls { display: none; }
.avatar-gallery-hint { margin: 0; color: var(--avatar-caption-color); font-size: 12px; line-height: 1.5; text-align: center; letter-spacing: .04em; }
.avatar-hint-touch { display: none; }
.avatar-gallery-pause {
  border: 1px solid var(--on-dark-line);
  border-radius: 999px;
  padding: 9px 16px;
  min-height: 44px;
  background: transparent;
  color: var(--action-on-dark);
  font: 600 13px var(--sans);
  cursor: pointer;
}
.avatar-gallery-pause:hover { border-color: var(--action-on-dark); color: var(--action-on-dark-hover); }
.avatar-gallery-pause[hidden], .avatar-play-text, .is-paused .avatar-pause-text { display: none; }
.is-paused .avatar-play-text { display: inline; }
.avatar-gallery-pause:focus-visible, .avatar-gallery-cta:focus-visible, .avatar-gallery-stage:focus-visible {
  outline: 2px solid var(--action-on-dark);
  outline-offset: 4px;
}
/* Reduced motion: the row stands still and scrolls sideways by hand, one copy only. */
@media (prefers-reduced-motion: reduce) {
  .avatar-band-track { animation: none; }
  .avatar-gallery-stage { overflow-x: auto; padding-inline: 24px; scrollbar-width: thin; }
  .avatar-gallery-stage::before, .avatar-gallery-stage::after, .avatar-band-list[aria-hidden], .avatar-gallery-pause { display: none; }
}
@media (max-width: 800px) {
  .avatar-gallery-copy { grid-template-columns: 1fr; row-gap: 16px; padding: 0; text-align: left; }
  .avatar-gallery-intro { grid-column: 1; grid-row: 3; margin-top: 8px; }
  .avatar-gallery-copy p { margin: 0 0 18px; }
}
@media (max-width: 700px) {
  .avatar-gallery-copy { margin-bottom: 20px; row-gap: 16px; }
  .avatar-gallery h2 { font-size: clamp(30px, 9vw, 36px); }
  .avatar-gallery-copy p { max-width: 300px; font-size: 15px; }
  .avatar-gallery-stage { --avatar-card: 136px; --avatar-gap: 14px; --avatar-band-duration: 100s; --avatar-fade: 28px; }
  .avatar-tile { border-radius: 14px; }
  .avatar-gallery-controls { padding: 0 16px; }
}
@media (hover: none) {
  .avatar-hint-pointer { display: none; }
  .avatar-hint-touch { display: inline; }
}