/* Cześć, I'm ANNA: variants (prototype, 2 Oct 2026). Anna: not sure about the beige with the black and white
   photograph, and she doesn't like the flower; it should feel premium. Award sites that introduce one person
   with a black and white portrait set it on black or neutral grey, large and confident, with the name and the
   person overlapping in depth. So 2-4 are dark and drop the flower (also the unlicensed stand-in):
   2 Behind her: the current composition on Black, ANNA in Paper passing behind her head (the cut-out), the
     bright sky under the letters darkened by a power window, as in Resolve, instead of the old Paper wash.
   3 Poster: the portrait large on the right, its background darkened (a feathered window from the left and
     the foot) while she stays bright on the cut-out, and Cześć, I'm ANNA at the foot crossing onto it.
   4 Quiet: the words on the left, the portrait on the right, no overlap, room around both.
   person-variants.js switches them. */

/* Dark, for 2-4 */
.person--dark { background: var(--black); color: var(--paper); }
.person--dark .person__flower { display: none; }
.person--dark .person__line { color: var(--paper); }
.person--dark .person__blocks .lead { color: var(--paper); }
.person--dark .person__rule { background: var(--clay); }
.person--dark .person__how, .person--dark .person__how strong { color: var(--oat); }

/* 2 Behind her: a Black window over the bright sky, where the letters cross */
.person--depth .person__photo::after {
  background: radial-gradient(78% 44% at 0% 0%, rgb(14 12 11 / 0.88) 0%, rgb(14 12 11 / 0.55) 55%, rgb(14 12 11 / 0) 100%);
}

@media (min-width: 48.0625rem) {
  /* 3 Poster: the words at the top left, the name at the foot crossing onto the portrait */
  .person--poster .person__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto auto; --ns: calc(100cqw * 0.21); }
  .person--poster .person__photo { grid-area: 1 / 2 / 4 / 3; }
  .person--poster .person__line { grid-area: 2 / 1 / 4 / 3; align-self: end; padding-bottom: clamp(var(--s-5), 3vw, var(--s-7)); }
  .person--poster .person__blocks { grid-area: 1 / 1; align-self: start; padding-top: 0; padding-bottom: clamp(var(--s-7), 5vw, var(--s-9)); }   /* room between the button and the name below */
  .person--poster .person__photo::after {
    background:
      linear-gradient(to right, rgb(14 12 11 / 0.92) 0%, rgb(14 12 11 / 0.35) 30%, rgb(14 12 11 / 0) 55%),
      linear-gradient(to top, rgb(14 12 11 / 0.85) 0%, rgb(14 12 11 / 0) 42%);
  }

  /* 4 Quiet: two columns, nothing overlapping */
  .person--quiet .person__stage { grid-template-rows: auto minmax(0, 1fr); --ns: calc(var(--hi) * 1.9); }
  .person--quiet .person__line { grid-area: 1 / 1; }
  .person--quiet .person__photo { grid-area: 1 / 2 / 3 / 3; }
  .person--quiet .person__blocks { grid-area: 2 / 1; align-self: end; }
}
.person--quiet .person__photo::after, .person--quiet .person__cut { display: none; }

/* ============================================================
   Light versions (2 Oct 2026). Anna: "i like poster and behind her, but i feel this would look better on a
   light background". Two grounds: cream is Paper as it is (#F8EFE6); soft is Paper with its chroma dropped,
   #F4F0ED, at the red-leaning hue of Oat, Clay and Umber. That follows the brand book's own rule (if a
   neutral feels like beige, drop its chroma; never cool it): Paper is the yellowest neutral, hue 68 against
   55, which is what read as beige beside the black and white photograph. No flower in either.
   ============================================================ */
.person--light { --person-ground: var(--paper); background: var(--person-ground); }
.person--soft { --person-ground: #F4F0ED; }
.person--light.person--dark { --person-ground: var(--ink); color: var(--paper); }   /* 11 Oct: the poster on Ink; the photo fades into the dark */
.person--light .person__flower { display: none; }
/* The wash over the bright sky, where the black letters cross, is the ground colour */
.person--light .person__photo::after {
  background: radial-gradient(70% 38% at 0% 0%, color-mix(in srgb, var(--person-ground) 80%, transparent) 0%, color-mix(in srgb, var(--person-ground) 50%, transparent) 55%, transparent 100%);
}
@media (min-width: 48.0625rem) {
  /* Poster, light: the photograph dissolves into the ground on the left and at the foot; she stays crisp on
     the cut-out, and ANNA in black crosses the faded foot */
  /* Middle strength (Anna, 2 Oct): the first fade (to 55% across, 42% up) smudged her legs and shoes, the
     narrow feathers (8%) went too far the other way. This one reaches about 30% across and 22% up, so it
     passes behind her shoes and her jacket's edge. That only works on the tight cut-out below: the
     original mask's soft edge (8-12px at her legs) let the fade show through her outline */
  .person--light.person--poster .person__photo::after {
    /* 1px past the faded edges, so the photo's anti-aliased edge doesn't show as a hairline */
    inset: 0 0 -1px -1px;
    background:
      linear-gradient(to right, var(--person-ground) 0%, color-mix(in srgb, var(--person-ground) 50%, transparent) 12%, color-mix(in srgb, var(--person-ground) 18%, transparent) 22%, transparent 32%),
      linear-gradient(to top, var(--person-ground) 0%, color-mix(in srgb, var(--person-ground) 45%, transparent) 8%, color-mix(in srgb, var(--person-ground) 15%, transparent) 15%, transparent 22%);
  }
  /* Tight cut-out: the original mask cut at its midpoint, pulled in 1px and anti-aliased (edges about 4px) */
  .person--light.person--poster .person__cut {
    -webkit-mask-image: url("assets/anna-steps-mask-tight.png");
            mask-image: url("assets/anna-steps-mask-tight.png");
  }
}

/* Poster, name first (2 Oct 2026). Anna: should the name come first, then the filmmaker line? It reads right
   that way (and matches the page's own order, which screen readers already follow). Like a film poster: the
   picture dissolving into the ground, the title at its foot, the words underneath like the credits. */
@media (min-width: 48.0625rem) {
  /* The name and the words all sit within the portrait's height: the name crosses it around the middle,
     where the cut-out keeps her in front of the letters, and the words end level with its foot */
  .person--poster.person--namefirst .person__stage { grid-template-rows: minmax(0, 1fr) auto auto auto; }
  .person--poster.person--namefirst .person__photo { grid-area: 1 / 2 / 5 / 3; }
  .person--poster.person--namefirst .person__line { grid-area: 2 / 1 / 4 / 3; align-self: end; padding-bottom: 0; }
  .person--poster.person--namefirst .person__blocks { grid-area: 4 / 1 / 5 / 2; align-self: end; padding-top: clamp(var(--s-6), 3vw, var(--s-8)); padding-bottom: 0; }
}

/* Fit to the screen (11 Oct 2026): the portrait is never taller than the window under the header, so the name, the words
   and her face arrive together. It narrows instead of cropping, so the cut-out stays aligned with the photo. It keeps the
   column's right edge; the name is set larger instead, so ANNA crosses about a third of it (Anna: the name had stopped
   being editorial). 0.27-0.29 of the width was too large on 26 Sep; 0.25 stays under that. */
@media (min-width: 48.0625rem) {
  .person--poster .person__photo { justify-self: end; width: min(100%, calc((100svh - var(--header-h) - 2 * var(--section-y)) * 851 / 1136)); }
}

/* 11 Oct 2026 (Anna): "i don't like the photo being blurry". On Ink the portrait keeps its edges: no fade into the ground. */
.person--light.person--dark .person__photo::after { display: none; }

/* 11 Oct 2026 (Anna): "too big letter and image". Back to the poster's own name size (0.21 of the width, as approved
   2 Oct) and a smaller portrait, a third of the width. To keep ANNA crossing it, the portrait starts at 51% of the
   width instead of the right edge: the last A runs about a third onto it. */
@media (min-width: 48.0625rem) {
  .person--poster .person__stage { --ns: calc(100cqw * 0.21); grid-template-columns: 51% minmax(0, 1fr); column-gap: 0; }
  .person--poster .person__photo { justify-self: start; width: min(34cqw, calc((100svh - var(--header-h) - 2 * var(--section-y)) * 851 / 1136)); }
}
/* 11 Oct 2026 (Anna): "my image isn't well aligned". The portrait goes back to the column's right edge, in line with
   the Recent work cards above; a little wider so the last A of ANNA still crosses onto it. */
@media (min-width: 48.0625rem) {
  .person--poster .person__stage { grid-template-columns: minmax(0, 1fr) auto; }
  .person--poster .person__photo { justify-self: end; width: min(42cqw, calc((100svh - var(--header-h) - 2 * var(--section-y)) * 851 / 1136)); }
}