/* People. Scoped under .pp. Every colour, ease and type size comes from the
   tokens in information-pages.css. The masthead and the group photograph sit
   under the photograph, in the dark the road fades into. Everything sits on the site's dark, so
   the black seamless plates dissolve into the page and the people carry it. */

.pp{
  --pp-gut:clamp(1.2rem,4vw,3.5rem);
  --pp-max:1680px;
  --pp-plate:var(--plate);
  --pp-lab-size:.76rem;
  --pp-lab-track:.14em;
  /* The word runs the width of the crew's footprint in the frame: their shoes
     span about 11.5% to 88% of the photograph, and the word is 3.15em wide. */
  --pp-title:min(24.3vw,408.24px);
  --pp-crew-left:min(11.5vw,193.2px);
  background:var(--pp-plate);
  color:#fff;
}
@supports(width:1cqw){.pp{--pp-title:24.3cqw;--pp-crew-left:11.5cqw}}
.pp__wrap{padding-inline:var(--pp-gut);max-width:var(--pp-max);margin:0 auto}
/* The page runs to 1680, so the shared header and footer run with it here. */
.page-header__inner,.page-footer__inner{max-width:1680px}
.pp__lab{
  font-size:var(--pp-lab-size);
  letter-spacing:var(--pp-lab-track);
  text-transform:uppercase;
  line-height:1.4;
}

/* The opening. One frame, full width to 1680, the whole photograph, no crop.
   The asphalt at the bottom of the frame runs into the site dark, and the
   title stands in that dark directly under the crew's feet. The road becomes
   the ground the studio portraits stand on, and the word is set in it. */
.pp__open{position:relative;max-width:var(--pp-max);margin:0 auto;container-type:inline-size}
.pp__open-frame{position:relative;line-height:0}
.pp__open-frame img{width:100%;height:auto}
.pp__open-frame::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:24%;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,12,13,0) 0%,rgba(11,12,13,.14) 30%,rgba(11,12,13,.5) 60%,rgba(11,12,13,.88) 85%,var(--pp-plate) 100%);
}
.pp__masthead{
  position:relative;z-index:1;
  margin-top:calc(var(--pp-title) * -.16);
}
/* The title aligns to the first boot, not the page gutter. It belongs to the
   photograph. Everything under it returns to the gutter. */
.pp__wordmark{margin-left:calc(var(--pp-crew-left) - var(--pp-gut))}
.pp__wordmark{
  color:#fff;
  font-weight:600;
  font-size:var(--pp-title);
  line-height:.84;
  letter-spacing:-.035em;
}
/* The dateline clears the descender of the p, then reads as one line. */
.pp__meta{
  color:rgba(255,255,255,.55);
  display:flex;flex-wrap:wrap;gap:.4rem 0;
  margin-top:calc(var(--pp-title) * .22);
  padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.pp__meta span{white-space:nowrap}
.pp__meta span + span::before{content:'·';content:'·' / '';padding:0 .8rem}

/* Portrait series */
.pp__series{background:var(--pp-plate);color:#fff}
.pp__lead{padding-block:clamp(2.2rem,4vw,3.6rem) clamp(2.2rem,4vw,3.6rem)}
.pp__lead p{
  font-size:clamp(1.15rem,1.9vw,1.6rem);
  line-height:1.32;
  letter-spacing:-.015em;
  max-width:36ch;
}
.pp__lead p strong{font-weight:600}
.pp__lead p span{color:rgba(255,255,255,.62)}
.pp__more{
  display:inline-flex;align-items:center;gap:.8rem;
  font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;
  min-height:44px;margin-top:.6rem;
}
.pp__more i{width:36px;height:1px;background:rgba(255,255,255,.6);transition:width .35s var(--ease)}
.pp__more:hover i,.pp__more:focus-visible i{width:60px}
.pp__more:hover{color:#fff}
.pp__more:focus-visible{outline:2px solid #fff;outline-offset:4px}

.pp__grid{
  --pp-col:clamp(1rem,3.3vw,3rem);
  --pp-row:clamp(2.6rem,6.6vw,6rem);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--pp-row) var(--pp-col);
  list-style:none;
  padding-bottom:clamp(3.4rem,7vw,6rem);
}
@media(min-width:900px){
  .pp__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* The three principals hold the first row. A hairline marks the break to
     the nine, centred in the row gap so it reads as a row break and not an
     underline. Same rule the homepage uses between projects. */
  .pp__person--principal{position:relative}
  .pp__person--principal::after{
    content:'';position:absolute;left:0;right:calc(-1 * var(--pp-col));bottom:calc(-.5 * var(--pp-row));height:1px;
    background:rgba(255,255,255,.14);
  }
  .pp__person--principal:nth-child(3)::after{right:0}
}

.pp__shot{position:relative;aspect-ratio:4/5;background:var(--pp-plate);overflow:hidden}
.pp__shot img{
  width:100%;height:100%;object-fit:cover;
  transition:filter .75s var(--ease);
}
.pp__caption{padding-top:.9rem}
/* The navy rule sits on the ground under the frame, so it reads under a white
   shirt and a black one alike. */
.pp__caption::before{
  content:'';display:block;height:2px;width:0;margin-bottom:.8rem;
  background:var(--navy);
  transition:width .55s var(--ease);
}
.pp__name{font-weight:600;font-size:clamp(1.05rem,1.3vw,1.32rem);letter-spacing:-.012em;line-height:1.2}
.pp__role{color:rgba(255,255,255,.55);margin-top:.35rem;transition:color .5s var(--ease)}

/* Hover is light. Nothing is dimmed at rest. The person you are on comes up
   a step and moves forward a hair, the role reads at full white, and the
   site's navy rule draws under the frame. Fast in, slow out, like a lamp. */
@media(hover:hover){
  .pp__person:hover .pp__shot img{
    filter:brightness(1.07) contrast(1.02);
    transition-duration:.35s;
  }
  .pp__person:hover .pp__caption::before{width:100%}
  .pp__person:hover .pp__role{color:#fff}
}
/* Nothing inside a card is focusable, and the name and role are always
   visible, so keyboard and touch already have what hover has. */

/* Close */
.pp__close{border-top:1px solid rgba(255,255,255,.14);padding-block:clamp(3rem,6vw,5.5rem)}
.pp__close-inner{
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem clamp(2rem,5vw,4rem);align-items:center;
}
.pp__close h2{font-weight:600;font-size:clamp(2rem,4.6vw,3.8rem);letter-spacing:-.02em;line-height:1.02}
.pp__close p{color:rgba(255,255,255,.7);margin-top:.9rem;max-width:40ch;font-size:clamp(1rem,1.4vw,1.18rem)}
@media(min-width:900px){.pp__close-inner{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.pp__close .btn{justify-self:end}}

/* Credits */
.pp__credits{
  padding-block:0 clamp(2.4rem,4vw,3.6rem);
  color:rgba(255,255,255,.55);
  display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;
}

@media(prefers-reduced-motion:reduce){
  .pp *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}