/* --------------------------------------------------------------------------
   The Team page

   Attached to the two team-* bands rather than a page slug, so a band can be
   placed anywhere. Nothing here is measured against a deck canvas and no colour
   below is a new hex — ink, nav and rule all come from site.css.
   -------------------------------------------------------------------------- */

.team-band {
  background-image: var(--section-bg, none);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   The hero
   -------------------------------------------------------------------------- */

.team-hero { padding-block: clamp(2.5rem, 6vw, 5rem); }

/* Words left, picture right, on the ratio the screenshot has them. The words
   are vertically centred against the picture rather than sitting on its top
   edge, which is what the deck does with a short title beside a tall image. */
.team-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: center;
}

/* The largest type on the page and the only place the display face is used —
   Cinzel Decorative ships at 700, so this is a real weight. */
.team-hero__title {
  margin: 0;
  font-family: var(--font-display);
  /* Capped at 5.10rem on request, down from the 6.10rem of --step-display,
     which is what slide 4's 96pt rebases to. The floor and the slope are that
     step's own, so the title still comes down on a narrow screen instead of
     standing at 81.6px on a phone and running off the side. */
  font-size: clamp(2.25rem, 7.52vw, 5.10rem);   /* --step-display, recapped */
  line-height: 1.05;
  /* Also the source's: spc="-460" against 96pt is -0.048em, the same tracking
     every other engraved title here is measured to. */
  letter-spacing: -0.048em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.team-hero__picture img,
.team-hero__picture picture {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   The people
   -------------------------------------------------------------------------- */

.team-members { padding-block: clamp(1.5rem, 4vw, 3rem); }

.team-members__title {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-engraved);
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* Copy left, photograph right. The photograph column is fixed in proportion so
   two people in one band line their frames up with each other rather than each
   sizing to its own bio. */
.team-person {
  display: grid;
  grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
  gap: clamp(1.25rem, 3.5vw, 3rem);
  align-items: start;
}

.team-person + .team-person {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

/* The engraved face in caps, as every name in the screenshots is set. */
.team-person__name {
  margin: 0;
  font-family: var(--font-engraved);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.1;
  /* Cinzel loads 400 and 600 only, so 600 is the bold that exists — 700 here
     would be a face the browser synthesised. */
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* Bold body face, tight under the name — it is a label on the person, not a
   heading of its own, so it takes no heading level. --font-body leads with
   Century Gothic, which carries a real bold. */
.team-person__role {
  margin: 0.35rem 0 0;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.3;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   Deck size

   The slides set a name at 60pt and a role at 24pt on a 1704-wide content box —
   80px and 32px at the source, which is where 4.69vw and 1.88vw come from, the
   same arithmetic --step-display uses for its 128px title.

   Opted into rather than imposed: this band is reused on Warrior Queen for Cast
   and Crew, where the names were deliberately taken down and a run of them at
   60pt would swamp the page.
   -------------------------------------------------------------------------- */

.team-members--deck .team-person__name {
  font-size: clamp(1.5rem, 4.69vw, 3.81rem);   /* 80  -> 61.0px */
  /* The source spaces this at -288/100 pt against 60pt — the same -0.048em the
     other engraved titles on this site carry, and light, not semibold. */
  font-weight: 400;
  letter-spacing: -0.048em;
}

.team-members--deck .team-person__role {
  font-size: clamp(0.95rem, 1.88vw, 1.53rem);  /* 32  -> 24.4px */
}

.team-person__bio {
  margin: 1rem 0 0;
  line-height: 1.55;
  color: var(--c-ink);
}

.team-person__bio + .team-person__bio { margin-top: 0.75em; }

/* Bold, as the deck sets it. No longer on the end of the last sentence: it
   opens the rest of the bio now rather than continuing it, and a control reads
   as a control when it stands on a line of its own.

   The dialog opener is the shared .more-dialog__open from site.css; this only
   gives it the space a card wants, which is less than .more-link gives a page. */
.team-person__more {
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}

.team-person__more::after { content: "\2026"; }

.team-person__copy .more-dialog__open,
.team-person__link { margin-top: 0.85rem; }

.team-person__link { margin-bottom: 0; }

.team-person__more:hover,
.team-person__more:focus-visible {
  color: var(--c-nav-active);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   The photograph

   Nothing is drawn around it any more. The white mount, the drop shadow and
   the name printed beneath are all in the uploaded file now — Swati-B.webp is
   1323x1901 and carries the polaroid, its shadow and "Swati Gupté Bhisé" set
   on the mount — so the card this used to draw was a second card around the
   first, and the caption printed the name a second time under a name already
   in the picture.

   What is left is the sizing the file cannot do for itself. The frame stays a
   block so the figure has no baseline gap under the image, and the width rule
   is what makes the picture fit its column instead of standing at its own
   1323px.

   If a photograph that carries no mount of its own is ever added here, this is
   what to put back: padding: clamp(0.4rem, 0.9vw, 0.7rem), background #fff,
   box-shadow 0 4px 16px rgba(107, 94, 84, 0.22), and the figcaption in
   team-members.php. They were removed together and belong together.
   -------------------------------------------------------------------------- */

.team-person__photo { margin: 0; }

.team-person__frame {
  display: block;
}

.team-person__frame img,
.team-person__frame picture {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

/* One column at the width the rest of the site already breaks at. The words
   lead — the photograph is a portrait, not the point — and the picture is
   capped so it cannot fill a phone screen on its own. That cap is sizing, not
   the styling that came off above: the file is 1323px wide and would otherwise
   stand at whatever the column gives it. */
@media (max-width: 1024px) {
  .team-hero__body,
  .team-person {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .team-person__photo {
    max-width: 18rem;
  }
}

/* --------------------------------------------------------------------------
   One picture for the whole band

   Where a slide clusters everyone's photographs into a single composition
   rather than giving each person their own, the people's words stack in the
   left column and the picture stands beside them, spanning however many of
   them there are.

   The figure is last in the markup so the reading order reaches the people
   before their photographs; the grid is what puts it alongside. Proportions are
   .team-person's own, so a band with one picture and a band without line their
   columns up with each other.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  /* 61.3 / 38.7, measured off slide 26: the words run x=1114425 for 9952118 of
     a 16230600 content box and the cluster begins at 10966047. Not .team-person's
     68/32 — that is for a portrait beside one person, and this is a composition
     beside all of them. */
  .team-members--pictured .page {
    display: grid;
    grid-template-columns: minmax(0, 61.3fr) minmax(0, 38.7fr);
    column-gap: clamp(1.25rem, 3.5vw, 3rem);
    align-items: start;
  }

  /* Two rows, both named: title over people in the first column, the picture
     beside both in the second. Every placement below is explicit — the earlier
     `grid-row: 2 / -1` put the picture above the title, because -1 counts back
     from the explicit grid and this grid declares no rows at all. */
  .team-members--pictured .page {
    grid-template-rows: auto 1fr;
  }

  .team-members--pictured .team-members__title {
    grid-column: 1;
    grid-row: 1;
  }

  .team-members--pictured .team-members__people {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }

  /* From the top of the band rather than beside the words only: slide 26 starts
     the cluster at y=195866, above the title's own y=991656. */
  .team-members--pictured .team-members__picture {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .team-members--pictured .team-person { display: block; }
}

.team-members--pictured .team-members__picture {
  margin: 0;
  min-width: 0;
}

.team-members--pictured .team-members__picture img,
.team-members--pictured .team-members__picture picture {
  width: 100%;
  height: auto;
  display: block;
}

/* Under the words on a narrow screen, and capped: the cluster is tall, and at
   full width it would push the next band off the bottom of the phone. */
@media (max-width: 1024px) {
  .team-members--pictured .team-members__picture {
    max-width: 26rem;
    margin: clamp(1.25rem, 4vw, 2rem) auto 0;
  }
}

/* --------------------------------------------------------------------------
   Slide 26's own treatment of a person

   That slide does not set a name the way slides 5 to 9 do. There a name is
   60pt Cinzel over a 24pt role; here the two are one bold line in the body face
   — "Swati Gupte Bhise: Director" — at the same 24pt as the words under it, so
   the label reads as an introduction to the paragraph rather than a heading
   over it.

   24pt on the source's 1704 box is 32px, hence 1.88vw — the same arithmetic
   every other step here is measured with. Both elements are turned inline so
   the colon can join them without changing the markup, which keeps the name a
   heading for anything reading the page rather than looking at it.
   -------------------------------------------------------------------------- */

.team-members--pictured .team-person__name,
.team-members--pictured .team-person__role {
  display: inline;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.88vw, 1.53rem);   /* 32 -> 24.4px */
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.team-members--pictured .team-person__role::before { content: ": "; }

.team-members--pictured .team-person__bio {
  font-size: clamp(0.95rem, 1.88vw, 1.53rem);   /* the slide sets both at 24pt */
  line-height: 1.45;
}

/* The label and the paragraph are one block on the slide, not a heading with a
   paragraph spaced away from it. */
.team-members--pictured .team-person__bio { margin-top: 0.55em; }

/* 60pt Cinzel, spaced -288/100 against it — the size this slide titles itself,
   which is larger than a band heading elsewhere on the site. */
.team-members--pictured .team-members__title {
  font-size: clamp(1.5rem, 4.69vw, 3.81rem);    /* 80 -> 61.0px */
  letter-spacing: -0.048em;
}