/* Our advocates: the portico of the Courts at night.
   Each advocate stands in an arched doorway, in the colour portrait. Names are
   cut into limestone and filled with navy, like the logo in the intro. */

.pp {
  --pp-hi: #F4E8CE;
  --pp-st: #E7D4AE;
  --pp-mid: #D7BE93;
  --pp-low: #C3A77D;
  --pp-deep: #A68A62;
  --pp-joint: #8F7450;
  --pp-warm: 246, 201, 138;               /* floodlight, as rgb for alpha */
  --pp-in: cubic-bezier(.33, 1, .68, 1);   /* the seals turning into place */
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  background:
    radial-gradient(1100px 560px at 50% -4%, rgba(70, 82, 138, .34), transparent 64%),
    var(--navy-900);
  color: var(--navy-200);
}

/* ------------------------------------------------------------ head */
.pp-head { max-width: 44rem; margin-bottom: clamp(52px, 6.5vw, 88px); }
.pp-head h2 { color: #fff; }
.pp-lead { color: var(--navy-200); }

/* ------------------------------------------------------------ the administration team (home/team.njk) */
/* it carries on from the advocates' section: no second glow, a rule above its heading */
.pp-team { background: var(--navy-900); padding-top: 0; }
.pp-team .pp-head { padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-light); }
/* five people make two rows on wide screens (the advocates are one row). The space goes
   above each later row's doorways, not in the list's row-gap: the cards' subgrid shares
   the list's rows, so a row-gap would also open up the gaps inside every card. */
@media (min-width: 960px) { .pp-team .pp-card:nth-child(n+4) .pp-door { margin-top: clamp(56px, 6vw, 88px); } }
/* a doorway whose photo isn't ready yet: the person's initials */
.pp-initials {
  display: grid; place-items: center; container-type: inline-size;
  background: radial-gradient(70% 55% at 50% 40%, rgba(70, 82, 138, .38), transparent 72%), var(--navy-950);
}
.pp-initials span { font: 400 30cqi/1 var(--serif); letter-spacing: .04em; color: var(--pp-st); opacity: .5; }

/* ------------------------------------------------------------ the three doorways */
.pp-list {
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 4.4vw, 72px);
}
/* the floodlight on the ground, as in the intro */
.pp-list::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -12%; right: -12%; top: 30%; height: 70%;
  background: radial-gradient(50% 42% at 50% 42%, rgba(var(--pp-warm), .075), transparent 72%);
}
/* rows line up across the three columns (plate, summary, languages, links) */
.pp-card { position: relative; min-width: 0; display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.pp-body { display: contents; }
.pp-summary { padding-top: 26px; }
.pp-links { align-self: start; justify-self: start; }

.pp-door { position: relative; display: flex; flex-direction: column; padding: 12px 12px 0; }

/* a link to the profile; a tap on it flashes no grey box over the arch */
.pp-arch { position: relative; display: block; color: inherit; -webkit-tap-highlight-color: transparent; }
/* the stone surround: one fine line, concentric with the arch */
.pp-arch::before {
  content: ""; position: absolute; inset: -12px -12px 0; pointer-events: none;
  border: 1px solid var(--pp-mid); border-bottom: 0; border-radius: 999px 999px 0 0; opacity: .6;
}
.pp-scene {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0;
  background: var(--navy-950);
}
.pp-scene img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ the plate */
.pp-plate {
  position: relative; overflow: hidden; margin-inline: -12px;
  flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; /* equal plates when a name wraps */
  padding: 19px 18px 17px; text-align: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .43 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #F7EEDB 0%, #EBDBBA 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -3px 0 rgba(143, 116, 80, .30),
    0 24px 36px -22px rgba(0, 0, 0, .7);
}
/* the doorway's light falls on the top of the plate (it only ever lightens the stone) */
.pp-plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 50% 0%, rgba(255, 250, 238, .55), rgba(255, 250, 238, 0) 72%);
}
.pp-name, .pp-role { position: relative; }
/* cut into the stone and filled with navy: a shadow on the upper edge, light on the lower */
.pp-name {
  font: 500 1.2rem/1.25 var(--serif); letter-spacing: .085em; text-transform: uppercase;
  color: var(--navy);
  text-shadow: 0 -1px 0 rgba(96, 74, 42, .32), 0 1px 0 rgba(255, 251, 240, .95);
}
.pp-role {
  margin-top: 6px;
  font: 600 .7rem/1.45 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: #62502F;
  text-shadow: 0 1px 0 rgba(255, 251, 240, .7);
}
.pp-role-part { white-space: nowrap; }

/* ------------------------------------------------------------ text */
.pp-summary, .pp-langs, .pp-links { margin-inline: 2px; }
.pp-summary { font-size: .98rem; line-height: 1.64; color: var(--navy-200); text-align: justify; hyphens: manual; }   /* justified, as the firm asked; words are never split */
.pp-langs { margin-top: 16px; font-size: .9rem; line-height: 1.5; color: #fff; }
.pp-label {
  display: block; margin-bottom: 3px;
  font: 600 .66rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--navy-300);
}
/* the email address, and the way to the advocate's full profile */
.pp-links { display: flex; flex-direction: column; align-items: flex-start; margin-top: 10px; }
.pp-email, .pp-profile {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: 500 .92rem/1.3 var(--sans); color: #fff; text-decoration: none; overflow-wrap: anywhere;
}
.pp-email .icon, .pp-profile .icon { flex: none; color: var(--orange); }
.pp-email span, .pp-profile span:not(.sr-only) {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px; transition: background-size .45s var(--ease);
}
.pp-email:hover span, .pp-email:focus-visible span,
.pp-profile:hover span, .pp-profile:focus-visible span { background-size: 100% 1px; }
.pp-email-short { display: none; }
/* "Full profile ->": the arrow after the words, as the site's other text links */
.pp-profile .icon { transition: transform .35s var(--ease); }
.pp-profile:hover .icon { transform: translateX(4px); }

/* ------------------------------------------------------------ memberships: seals */
.pp-members {
  margin-top: clamp(64px, 7vw, 96px); padding-top: 40px; border-top: 1px solid var(--line-light);
  display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 24px 40px; align-items: start;
}
.pp-members-label {
  padding-top: 8px;
  font: 600 .75rem/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--navy-300);
}
.pp-seals { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
.pp-seal { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.pp-seal-disc { position: relative; display: grid; place-items: center; width: 96px; aspect-ratio: 1; }
.pp-seal-ring {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: var(--pp-mid); stroke-width: .9; stroke-opacity: .5;
}
.pp-seal-mill { stroke-width: 3; stroke-dasharray: .3 .7; stroke-opacity: .34; }
.pp-seal-short {
  position: relative; text-decoration: none;
  font: 500 1.06rem/1 var(--serif); letter-spacing: .1em; color: var(--pp-st);
}
.pp-seal-short.is-long { font-size: .8rem; letter-spacing: .05em; }
.pp-seal-name { max-width: 13.5em; font-size: .78rem; line-height: 1.45; color: var(--navy-300); }

/* the seals turn into place as they arrive */
.js .pp-seal-ring { opacity: 0; transform: rotate(-70deg); transition: opacity 1.1s ease, transform 1.8s var(--pp-in); transition-delay: calc(var(--s, 0) * 90ms + 250ms); }
.js .pp-seals.is-in .pp-seal-ring { opacity: 1; transform: none; }

/* three columns but not much room: keep the emails on one line and the names calm */
@media (min-width: 960px) and (max-width: 1180px) {
  .pp-email { font-size: .84rem; gap: 8px; }
  .pp-plate { padding-inline: 12px; }
  .pp-name { font-size: 1.1rem; letter-spacing: .05em; }
  .pp-role { letter-spacing: .12em; }
}

@media (max-width: 1199px) {
  .pp-members { grid-template-columns: 1fr; }
  .pp-members-label { padding-top: 0; }
}

/* ------------------------------------------------------------ tablet and phone: rows */
@media (max-width: 959px) {
  .pp-list { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-light); }
  .pp-list::before { display: none; }
  .pp-card {
    grid-row: auto;
    display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; align-items: start;
    grid-template-areas: "door plate" "door summary" "door langs" "door email";
    grid-template-rows: auto auto auto 1fr;
    padding: 36px 0; border-bottom: 1px solid var(--line-light);
  }
  .pp-door, .pp-body { display: contents; }
  .pp-arch { grid-area: door; margin: 10px 10px 0; }
  .pp-arch::before { inset: -10px -10px 0; }
  .pp-plate { grid-area: plate; margin: 10px 0 0; padding: 14px 16px 12px; text-align: left; }
  .pp-plate::before { background: radial-gradient(90% 140% at 0% 0%, rgba(255, 250, 238, .55), rgba(255, 250, 238, 0) 72%); }
  .pp-summary { grid-area: summary; padding-top: 18px; }
  .pp-langs { grid-area: langs; }
  .pp-links { grid-area: email; }
  .pp-members { grid-template-columns: 1fr; margin-top: 56px; padding-top: 0; border-top: 0; }
  .pp-seals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .pp-head { margin-bottom: 36px; }
  .pp-card {
    grid-template-columns: 124px minmax(0, 1fr); column-gap: 16px;
    grid-template-areas: "door plate" "door langs" "summary summary" "email email";
    grid-template-rows: auto 1fr auto auto;
    padding: 28px 0 20px;
  }
  .pp-arch { margin: 7px 7px 0; }
  .pp-arch::before { inset: -7px -7px 0; }
  /* a quieter plate on phones */
  .pp-plate {
    margin-top: 7px; padding: 9px 12px 8px;
    background: linear-gradient(180deg, #EFE3C8 0%, #E2CFAA 100%);   /* a deeper, plainer stone: the portrait leads */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(143, 116, 80, .3);
  }
  .pp-name { font-size: .95rem; letter-spacing: .07em; }
  .pp-role { margin-top: 3px; font-size: .6875rem; letter-spacing: .12em; }
  /* each part of the role on its own line (as the hero eyebrow does); the dot is kept for screen readers */
  .pp-role-sep {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .pp-role-part { display: block; white-space: normal; }
  .pp-langs { margin-top: 12px; font-size: .86rem; }
  .pp-summary { padding-top: 14px; font-size: .95rem; }
  /* "Email Luigi" and "Full profile" side by side */
  .pp-links { flex-direction: row; flex-wrap: wrap; column-gap: 22px; margin-top: 6px; }
  .pp-email-full { display: none; }
  .pp-email-short { display: inline; }
  .pp-members { margin-top: 44px; }
  .pp-seals { gap: 22px 10px; }
  .pp-seal { gap: 9px; }
  .pp-seal-disc { width: 74px; }
  .pp-seal-short { font-size: .92rem; }
  .pp-seal-short.is-long { font-size: .66rem; letter-spacing: .02em; }
  .pp-seal-name { font-size: .72rem; }
}
/* the narrowest phones: a long first name and "Head of the firm" still clear the plate's edge */
@media (max-width: 359px) {
  .pp-name { font-size: .88rem; letter-spacing: .05em; }
  .pp-role { letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .js .pp-seal-ring { opacity: 1; transform: none; }
}

/* print: the seals are drawn (they would otherwise wait for a scroll that never comes),
   and an advocate is never split across pages */
@media print {
  .js .pp-seal-ring { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pp-card { break-inside: avoid; }
}