/* The opening: an oversized headline over a fan of photographs whose feet sit in the folder below. */
.opening {
  /* One layout unit, so the headline and the photographs keep their relation at every width. */
  --u: min(1vw, 19.2px);
  --pad: clamp(var(--space-lg), 2.8vw, 48px);
  position: relative;
  max-width: calc(100 * var(--u));
  margin-inline: auto;
  min-height: calc(100svh - 86px - var(--tab-height) - var(--space-lg));
  padding: var(--pad) var(--gutter) var(--space-lg);
}

.opening__copy { position: relative; z-index: 3; pointer-events: none; }
.opening__copy a { pointer-events: auto; }

.opening__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3.5rem, 13.4 * var(--u), 16.5rem);
  line-height: .88;
  letter-spacing: -.035em;
}

.opening__lede {
  max-width: 27ch;
  margin-top: clamp(var(--space-lg), 2 * var(--u), var(--space-xxl));
  font-size: clamp(1.0625rem, 1.39 * var(--u), 1.5rem);
  line-height: 1.45;
}

.opening__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
}

.opening__note { margin-top: var(--space-compact); color: var(--ink-quiet); font-size: .875rem; }

/* From 901px to 1279px the photographs stand clear of the headline, to its right. */
.fan {
  --card: calc(22 * var(--u));
  --spread: 8deg;
  --pivot: 233%;
  position: absolute;
  z-index: 1;
  left: calc(var(--gutter) + 65.9 * var(--u));
  bottom: calc(var(--card) * -.26);
  width: var(--card);
}

.fan__cards { position: relative; aspect-ratio: 3 / 4; }

/* Each card turns about a point far below, so the photographs spread like a hand of cards. */
.fan__card {
  /* Cards on either side of the chosen one step aside, so more of each photograph shows. */
  --turn: calc((var(--i) - 2) * var(--spread) + var(--aside, 0) * var(--spread) * .5);
  position: absolute;
  inset: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-plate);
  background: var(--dark-photo-surface);
  overflow: hidden;
  transform-origin: 50% var(--pivot);
  transform: rotate(var(--turn));
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / .85);
  transition: transform var(--settle) var(--ease), border-color var(--settle) var(--ease);
  animation: fan-open var(--settle) var(--ease) backwards;
  animation-delay: calc(var(--i) * 30ms);
}
.fan__card[aria-pressed='true'] ~ .fan__card { --aside: 1; --zoom: .32; }
.fan__card:has(~ .fan__card[aria-pressed='true']) { --aside: -1; --zoom: .32; }
.fan__card:nth-child(2), .fan__card:nth-child(4) { z-index: 1; }
.fan__card:nth-child(3) { z-index: 2; }

/* A covered card shows only a strip, so its subject moves into that strip. */
.fan__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(calc(var(--aside, 0) * 21%)) scale(calc(1 + var(--zoom, 0)));
  transition: transform var(--settle) var(--ease);
}
.fan__card:hover { transform: rotate(var(--turn)) translateY(-3%); }
.fan__card[aria-pressed='true'] {
  z-index: 3;
  border-color: color-mix(in srgb, var(--ink) 42%, var(--ground));
  /* The scale turns about the far pivot, which is what lifts the card. */
  transform: rotate(calc(var(--turn) * .7)) translateY(-2%) scale(1.06);
}
.fan__card:focus-visible { z-index: 4; outline-offset: 4px; }

@keyframes fan-open {
  from { transform: rotate(0deg); }
}

/* Which photograph is chosen, counted from the left, so the caption can follow it. */
.fan { --picked: 1; }
.fan:has(.fan__card:nth-child(1)[aria-pressed='true']) { --picked: 0; }
.fan:has(.fan__card:nth-child(3)[aria-pressed='true']) { --picked: 2; }
.fan:has(.fan__card:nth-child(4)[aria-pressed='true']) { --picked: 3; }
.fan:has(.fan__card:nth-child(5)[aria-pressed='true']) { --picked: 4; }

/* The caption belongs to the chosen photograph: centred above the highest point it reaches. */
.fan__caption {
  --drift: .237;
  position: absolute;
  z-index: 4;
  left: calc(50% + (var(--picked) - 2) * var(--card) * var(--drift));
  bottom: calc(100% + var(--card) * .27);
  width: max-content;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: .875rem;
  transition: left var(--settle) var(--ease);
}
.fan__picked { display: flex; align-items: baseline; gap: var(--space-sm); }
.fan__name { font-weight: 600; }
.fan__state { color: var(--ink-quiet); }

/* From 1280px the headline runs over the front photograph: the "s" of "plans" sits on it,
   and its top edge falls between the two lines. */
@media (min-width: 1280px) {
  .opening { min-height: calc(var(--pad) + 46 * var(--u)); }
  .opening__title { font-size: calc(13.4 * var(--u)); }
  .fan { --card: calc(26 * var(--u)); left: calc(var(--gutter) + 53.7 * var(--u)); }
  /* The headline occupies the space above the photographs here, so the caption stands
     beside the chosen one's top corner. The two on the right keep it at the page edge. */
  .fan__caption {
    left: calc(50% + (var(--picked) - 2) * var(--card) * var(--drift) + var(--card) * .53 + 1.2 * var(--u));
    top: calc(var(--card) * -.24);
    bottom: auto;
    transform: none;
    align-items: flex-start;
  }
  .fan:has(.fan__card:nth-child(n + 4)[aria-pressed='true']) .fan__caption {
    left: auto;
    right: calc(2 * var(--gutter) - 20.3 * var(--u));
    top: auto;
    bottom: calc(100% + var(--card) * .27);
    align-items: flex-end;
  }
}

/* At 900px and below the page stacks: copy first, then the photographs, centred on the chosen one. */
@media (max-width: 900px) {
  .opening { min-height: 0; padding-bottom: 0; }
  .opening__title { font-size: clamp(2.5rem, 14vw, 6.5rem); }
  .opening__lede { max-width: 38ch; }
  .fan {
    --card: clamp(150px, 46vw, 300px);
    --pivot: 217%;
    position: relative;
    left: calc(var(--card) * .24);
    bottom: auto;
    /* Room for the caption above the lifted photograph, and no more. */
    margin: calc(var(--card) * .27 + 74px) auto calc(var(--card) * -.24);
  }
  .fan__caption {
    --drift: .217;
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-md);
    max-width: 92vw;
  }
}