/* Styles for /more/the-team/: star-field, team-credits.
   Search for "── <name> ──" to find a part.
   Forum Homini website, editable IIS version v016 20261109 081746. Generated with Claude Opus 5.5. */

/* ── star-field ── */
/* Star field.
   Used on: /more/the-team/.
   Forum Homini website, */
.stars[data-c-star-field] {
  --st-1: color-mix(in srgb, var(--naledi) 42%, transparent);
  --st-2: color-mix(in srgb, var(--naledi) 66%, transparent);
  --st-3: color-mix(in srgb, var(--naledi) 88%, transparent);
  --st-warm: color-mix(in srgb, var(--ember) 85%, transparent);
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle at 311px 64px,
      var(--st-3) 0 1.05px,
      transparent 1.8px),
    radial-gradient(
      circle at 76px 301px,
      var(--st-warm) 0 1.05px,
      transparent 1.8px),
    radial-gradient(
      circle at 215px 352px,
      var(--st-3) 0 1px,
      transparent 1.75px),
    radial-gradient(
      circle at 23px 41px,
      var(--st-1) 0 0.6px,
      transparent 1.1px),
    radial-gradient(
      circle at 97px 12px,
      var(--st-1) 0 0.6px,
      transparent 1.1px),
    radial-gradient(
      circle at 141px 88px,
      var(--st-2) 0 0.7px,
      transparent 1.2px),
    radial-gradient(
      circle at 58px 131px,
      var(--st-1) 0 0.6px,
      transparent 1.1px),
    radial-gradient(
      circle at 12px 156px,
      var(--st-1) 0 0.5px,
      transparent 1px),
    radial-gradient(
      circle at 119px 151px,
      var(--st-2) 0 0.6px,
      transparent 1.1px);
  background-size:
    397px 397px,
    397px 397px,
    397px 397px,
    173px 173px,
    173px 173px,
    173px 173px,
    173px 173px,
    173px 173px,
    173px 173px;
}
/* 263 px tile: the middle stars, the layer that twinkles */
.stars[data-c-star-field]::before,
.stars[data-c-star-field]::after {
  content: "";
  position: absolute;
  inset: 0;
}
.stars[data-c-star-field]::before {
  background-image:
    radial-gradient(
      circle at 47px 72px,
      var(--st-2) 0 0.9px,
      transparent 1.5px),
    radial-gradient(
      circle at 188px 29px,
      var(--st-3) 0 0.8px,
      transparent 1.4px),
    radial-gradient(
      circle at 221px 197px,
      var(--st-2) 0 0.9px,
      transparent 1.5px),
    radial-gradient(
      circle at 104px 236px,
      var(--st-2) 0 0.8px,
      transparent 1.4px);
  background-size: 263px 263px;
}
/* The last light on the horizon */
.stars--horizon[data-c-star-field]::after {
  background:
    radial-gradient(
      130% 55% at 50% 100%,
      color-mix(in srgb, var(--ember) 20%, transparent),
      color-mix(in srgb, var(--ember) 6%, transparent) 45%,
      transparent 75%);
}
@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    .stars--twinkle[data-c-star-field].is-lit::before {
      animation: stars-twinkle 1.6s ease-in-out 3;
    }
    @keyframes stars-twinkle {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.3;
      }
    }
  }
}
@media (forced-colors: active) {
  .stars[data-c-star-field] {
    display: none;
  }
}
@media print {
  .stars[data-c-star-field] {
    display: none;
  }
}

/* ── team-credits ── */
/* The team list.
   Used on: /more/the-team/.
   Forum Homini website, */
.credits[data-c-team-credits] {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--section-pad) calc(var(--section-pad) + var(--s-6));
  text-align: center;
}
/* (owner, 27 Oct 2026: "From the brown stars, it's going into a black line"): the stars and their warm glow (not the names)
     fade out softly at the foot, into the night that leads to the next photo */
.credits[data-c-team-credits] .stars,
.credits__contours[data-c-team-credits] {
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 78%,
      transparent 100%);
  mask-image:
    linear-gradient(
      to bottom,
      #000 78%,
      transparent 100%);
}
/* Terrain contours at the side, never behind the names (§5.1) */
.credits__contours[data-c-team-credits] {
  position: absolute;
  inset-block: 8% -12%;
  inset-inline-end: -14%;
  z-index: -1;
  inline-size: min(52%, 720px);
  background-color: var(--line-dark);
  opacity: 0.45;
  -webkit-mask: url(/Resources/Images/resized/site/contours-400.svg) no-repeat 100% 50% / contain;
  mask: url(/Resources/Images/resized/site/contours-400.svg) no-repeat 100% 50% / contain;
  pointer-events: none;
}
.credits__list[data-c-team-credits] {
  display: grid;
  justify-items: center;
  gap: 0;
  margin: 0;
}
.credits__item[data-c-team-credits] {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  inline-size: 100%;
}
/* A small star between the credits (the chamber of stars, the footer's motif): pure decoration */
.credits__item[data-c-team-credits] + .credits__item[data-c-team-credits]::before {
  content: "";
  display: block;
  inline-size: 12px;
  block-size: 12px;
  margin-block: calc(var(--s-9) / 2);
  background: var(--ember);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  justify-self: center;
}
.credits__photo[data-c-team-credits] {
  inline-size: min(100%, 52rem);
  margin: clamp(28px, 4vw, 56px) 0 0;
}
.credits__photo[data-c-team-credits] .credits__art {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.credits__photo[data-c-team-credits] img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* (6 Nov 2026) letter-spacing was var(--tr-label); always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) text-transform was uppercase; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) color was var(--eyebrow); always overridden by css/site.css, so its value is here now */
.credits__role[data-c-team-credits] {
  font-family: var(--face-text);
  font-size: var(--fs-label);
  font-weight: var(--wt-label);
  letter-spacing: 0.16em;
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: #e6c27a;
}
/* (6 Nov 2026) color was var(--heading); always overridden by css/site.css, so its value is here now */
.credits__name[data-c-team-credits] {
  margin: 0;
  font-family: var(--face-display);
  font-size: var(--fs-h2);
  font-weight: var(--wt-display);
  line-height: var(--lh-h2, 1.05);
  letter-spacing: var(--tr-h2, -0.01em);
  font-stretch: var(--layer-wdth, 100%);
  color: #f6efe4;
  max-inline-size: 22ch;
  text-wrap: balance;
}
@media (max-width: 640px) {
  .credits__name[data-c-team-credits] {
    font-size: var(--fs-l);
    font-stretch: var(--layer-wdth-phone, 100%);
  }
  .credits__item[data-c-team-credits] + .credits__item[data-c-team-credits]::before {
    margin-block: calc(var(--s-7) / 2);
  }
  /* No room beside the names on phone: the contours would run behind them */
  .credits__contours[data-c-team-credits] {
    display: none;
  }
}
@media (min-width: 1025px) {
  .credits__name[data-c-team-credits] {
    max-inline-size: 20ch;
  }
}
@media (forced-colors: active), (prefers-contrast: more) {
  .credits__contours[data-c-team-credits] {
    display: none;
  }
}
/* (owner, 2 Nov 2026: "All the names there should be smaller"): the size of the names in the carousels, the roles a step under them */
html body .credits[data-c-team-credits] .credits__role[data-c-team-credits] {
  font-size: 0.8125rem !important;
}
html body .credits[data-c-team-credits] .credits__name[data-c-team-credits] {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem) !important;
  line-height: 1.25;
  max-inline-size: 22ch;
}
/* (owner, 30 Oct 2026, her Option C: "you mustn't go and cut off their heads … let the one photo flow into the other, not with a straight
     line … the starry feeling"): each person one full screen; the whole photo shows, never cropped, its four edges melting into the stars,
     the next person following on from the night; the name in the foot of the photo */
html body .credits[data-c-team-credits] {
  padding-block: clamp(100px, 14vw, 200px) clamp(100px, 14vw, 200px);
}
/* (owner, same day: "The background … brown … Change it back to black … I never want a hard line"): no warm glow, black all the way down,
     and the stars melt away over the last stretch into the Enquire band */
.credits[data-c-team-credits] .stars {
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 calc(100% - 340px),
      transparent 100%);
  mask-image:
    linear-gradient(
      to bottom,
      #000 calc(100% - 340px),
      transparent 100%);
}
.credits[data-c-team-credits] .stars::after,
.credits[data-c-team-credits] .credits__contours[data-c-team-credits] {
  display: none;
}
.credits__list[data-c-team-credits] {
  inline-size: 100%;
}
/* (owner, same day: "The heading should be above … bigger starry gaps between the photos"): the title and name above the photo, on the
     stars, and a wide stretch of stars before the next person */
.credits[data-c-team-credits] .credits__item--photo[data-c-team-credits] {
  gap: var(--s-3);
  align-content: start;
}
.credits[data-c-team-credits] .credits__item--photo[data-c-team-credits]::before {
  display: none;
}
.credits[data-c-team-credits] .credits__item--photo[data-c-team-credits] + .credits__item--photo[data-c-team-credits] {
  margin-block-start: clamp(120px, 26svh, 260px);
}
.credits[data-c-team-credits] .credits__photo[data-c-team-credits] {
  inline-size: min(94vw, calc(100svh * var(--r)));
  aspect-ratio: var(--r);
  margin: clamp(10px, 2vw, 24px) 0 0;
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent,
      #000 10%,
      #000 90%,
      transparent),
    linear-gradient(
      to bottom,
      transparent,
      #000 10%,
      #000 90%,
      transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      to right,
      transparent,
      #000 10%,
      #000 90%,
      transparent),
    linear-gradient(
      to bottom,
      transparent,
      #000 10%,
      #000 90%,
      transparent);
  mask-composite: intersect;
}
.credits[data-c-team-credits] .credits__photo[data-c-team-credits] .credits__art {
  aspect-ratio: var(--r);
}
.credits[data-c-team-credits] .credits__photo[data-c-team-credits] img {
  object-fit: cover;
  object-position: 50% var(--pos, 12%);
}
@media (max-width: 640px) {
  html body .credits[data-c-team-credits] {
    padding-block: 56px;
  }
  .credits[data-c-team-credits] .credits__item--photo[data-c-team-credits] + .credits__item--photo[data-c-team-credits] {
    margin-block-start: 48px;
  }
}