/* ═══════════════════════════════════════════════════════
   PEOPLE PAGE — Page-Specific Styles
   ═══════════════════════════════════════════════════════ */

/* ── 1. Hero ───────────────────────────────────────── */
.pp-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: clamp(2rem, 4.1vw, 2.87rem);
}

.pp-hero__bg {
  position: absolute;
  inset: 0;
}

.pp-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 40, 60, 0.25) 0%, rgba(20, 30, 45, 0.55) 100%);
}

.pp-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4.1vw, 4.1rem);
  align-items: end;
}

/* Mockup: heading sits left across two hero columns, supporting copy
   right-aligned in the second column, both at the foot of the image. */
.pp-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.05vw, 2.46rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
  color: #fff;
  margin-bottom: 1.5rem;
  line-height: 1.25;
}

.pp-hero__title em {
  font-style: italic;
  font-weight: 400;
}

.pp-hero__desc {
  font-size: clamp(1rem, 0.943vw, 1.1275rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-align: right;
  max-width: 34em;
  margin-left: auto;
}

/* ── 2. Team filter ────────────────────────────────── */
.pp-filters {
  padding-top: clamp(2.5rem, 4.1vw, 2.87rem);
  padding-bottom: clamp(1.5rem, 2.46vw, 1.64rem);
}
.pp-filters__label {
  font-size: 0.9225rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-text);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.pp-filters__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem clamp(1.25rem, 1.804vw, 1.558rem);
  flex-wrap: wrap;
}
.pp-filters__link {
  font-family: var(--font-sans);
  font-size: 0.984rem;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease;
}

.pp-filters__link:hover {
  color: var(--color-text);
}

.pp-filters__link--active {
  color: var(--color-text);
  font-weight: 600;
}

.pp-filters__clear {
  margin-left: auto;
  font-size: 0.984rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-copper);
}

/* ── 3. Team grid ──────────────────────────────────── */
.pp-grid-section {
  padding-bottom: clamp(2.5rem, 4.1vw, 2.87rem);
}

.pp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  padding: 0 var(--gutter);
}

.pp-card {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 4px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--color-dark);
}

.pp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(100%);
  transition: transform 0.6s var(--ease-out);
}

.pp-card:hover img {
  transform: scale(1.05);
}

.pp-card--active {
  outline: 3px solid var(--color-copper);
  outline-offset: -3px;
}

.pp-card__avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.968rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: var(--color-dark-surface);
}

/* Hover personality caption — a full-width copper bar across the foot of the
   portrait, per the design. Currently dormant: no .pp-card__badge elements are
   rendered in people.html because the per-person caption lines don't exist yet.
   Add a <span class="pp-card__badge"> to each card and this switches on. */
.pp-card__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.25rem;
  background: var(--color-copper);
  color: #fff;
  font-size: 0.86rem;   /* was 0.82rem; 16 Sept responsive pass: 12px floor */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
  pointer-events: none;
}

.pp-card:hover .pp-card__badge,
.pp-card:focus-visible .pp-card__badge {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .pp-card__badge { transition: opacity 0.3s ease; transform: none; }
  .pp-card:hover .pp-card__badge,
  .pp-card:focus-visible .pp-card__badge { transform: none; }
}

/* ── Name + role caption on every portrait ────────── */
.pp-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.5rem 0.875rem 0.75rem;
  text-align: left;
  background: linear-gradient(to top,
              rgba(20, 18, 17, 0.92) 0%,
              rgba(20, 18, 17, 0.72) 55%,
              rgba(20, 18, 17, 0) 100%);
  pointer-events: none;
}

.pp-card__name {
  font-family: var(--font-serif);
  font-size: 0.984rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.pp-card__role {
  font-size: 0.9225rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
}

.pp-card--active .pp-card__caption {
  background: linear-gradient(to top,
              rgba(180, 91, 56, 0.95) 0%,
              rgba(180, 91, 56, 0.7) 55%,
              rgba(180, 91, 56, 0) 100%);
}

.pp-card--active .pp-card__role {
  color: rgba(255, 255, 255, 0.92);
}

/* ── 4. Profile detail ─────────────────────────────── */
.pp-profile__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(2.5rem, 4.1vw, 4.1rem);
  align-items: start;
}

.pp-profile__photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 4px;
}

.pp-profile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.pp-profile__avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 3.444rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: var(--color-dark-surface);
}

.pp-profile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-dark);
  color: #fff;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pp-profile__name {
  font-size: 0.984rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pp-profile__role {
  font-size: 0.9225rem;
  color: var(--color-text-muted-on-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pp-profile__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-text);
  margin-bottom: 1.5rem;
}
.pp-profile__label {
  font-size: 0.9225rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text);
  line-height: 1.5;
}

.pp-profile__close {
  font-size: 1.3366rem;
  line-height: 1;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
}
.pp-profile__bio p {
  font-size: 0.93rem;   /* was 0.7687rem; 16 Sept responsive pass: 13px floor */
  line-height: 1.85;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

.pp-profile__buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
.btn--outline-dark {
  background: rgba(255, 255, 255, 0);
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn--outline-dark::before {
  background: var(--color-dark);
}

.btn--outline-dark:hover {
  color: #fff;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .pp-hero__content {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .pp-hero__desc {
    text-align: left;
  }

  .pp-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pp-profile__grid {
    grid-template-columns: 1fr;
  }

  .pp-profile__photo {
    max-width: 340px;
  }
}

@media (max-width: 768px) {
  .pp-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 var(--gutter);
  }

  .pp-filters__bar {
    gap: 1rem 1.5rem;
  }

  .pp-filters__clear {
    margin-left: 0;
  }
}
/* Person without a written bio yet */
.pp-profile__bio--empty {
  font-style: italic;
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════
   16 Sept: matched to the Canva mockup (Our People).
   Sizes measured off the 1366-wide canvas (vw = px / 13.66).
   ═══════════════════════════════════════════════════════ */

/* Hero — shorter, framed on the red pendants, title top-left */
.pp-hero {
  min-height: clamp(360px, 31.8vw, 520px);
  align-items: stretch;
  padding: clamp(110px, 12.6vw, 180px) 0 clamp(2rem, 3.1vw, 3rem);
}

.pp-hero__bg img { object-position: 50% 17%; }

.pp-hero__overlay {
  background: linear-gradient(180deg, rgba(20, 30, 45, 0.18) 0%, rgba(20, 30, 45, 0.3) 100%);
}

.pp-hero__content {
  max-width: none;
  width: 100%;
  padding: 0 clamp(20px, 1.76vw, 30px) 0 clamp(20px, 6.6vw, 100px);
  grid-template-columns: 1fr auto;
  align-items: stretch;
}

.pp-hero__title {
  align-self: start;
  font-size: clamp(1.9rem, 3.22vw, 3.4rem);
  line-height: 1.33;
  letter-spacing: 0;
  max-width: 11.5em;
  margin: 0;
}

.pp-hero__desc {
  align-self: end;
  font-size: clamp(1rem, 1.21vw, 1.3rem);
  line-height: 1.34;
  color: #fff;
  max-width: 24.5em;   /* mockup wraps the description to five lines */
}

/* Filters, grid and profile sit on charcoal */
.pp-filters,
.pp-grid-section,
.pp-profile {
  background: var(--color-dark);
  color: #fff;
}

.pp-filters > .container,
.pp-grid-section > .container {
  max-width: none;
  padding: 0 clamp(20px, 3.37vw, 50px);
}

.pp-filters {
  padding-top: clamp(2.5rem, 4.8vw, 4.8rem);
  padding-bottom: clamp(2rem, 3.9vw, 3.9rem);
}

.pp-filters__label {
  font-size: clamp(1.1rem, 1.39vw, 1.45rem);
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
  padding: 0 0 0.5rem 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  margin-bottom: 1.1rem;
}

.pp-filters__bar {
  gap: 0.75rem clamp(1.5rem, 5.4vw, 5.4rem);   /* mockup: ~74px between the four filters */
  padding-left: 0.3rem;
}

.pp-filters__link,
.pp-filters__link:hover,
.pp-filters__link--active {
  font-size: clamp(1.1rem, 1.46vw, 1.55rem);
  font-weight: 400;
  color: #fff;
}

.pp-filters__link--active:not(.pp-filters__clear) { color: var(--color-copper-light); }

.pp-filters__clear,
.pp-filters__clear.pp-filters__link--active {
  margin-left: 0;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Grid — four portraits edge to edge, name and role under each photo */
.pp-grid-section {
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

.pp-grid {
  padding: 0;
  gap: clamp(1.75rem, 3.2vw, 3.2rem) clamp(0.75rem, 1.03vw, 1.1rem);
}

.pp-card {
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 0;
  background: none;
  text-align: left;
  color: #fff;
}

.pp-card img {
  display: block;
  aspect-ratio: 305 / 315;
  height: auto;
  transition: opacity 0.3s ease;
}

.pp-card:hover img {
  transform: none;
  opacity: 0.85;
}

.pp-card--active {
  outline: none;
}

.pp-card--active img {
  outline: 3px solid var(--color-copper);
  outline-offset: -3px;
}

.pp-card__caption,
.pp-card--active .pp-card__caption {
  position: static;
  gap: 0;
  padding: clamp(0.6rem, 0.9vw, 0.9rem) 0.25rem 0;
  background: none;
}

.pp-card__name {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.54vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}

.pp-card__role,
.pp-card--active .pp-card__role {
  font-family: var(--font-serif);
  font-size: clamp(0.93rem, 1.24vw, 1.3rem);
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
}

/* Profile — big portrait with a copper name tag */
.pp-profile {
  padding: clamp(3rem, 6.1vw, 6rem) 0 clamp(3rem, 6.4vw, 6.4rem);
}

.pp-profile > .container {
  max-width: none;
  padding: 0 clamp(20px, 5.56vw, 80px) 0 clamp(20px, 10.83vw, 160px);
}

.pp-profile__grid {
  grid-template-columns: clamp(280px, 33.45vw, 480px) 1fr;
  gap: clamp(2rem, 5.7vw, 5.7rem);
  align-items: stretch;
}

.pp-profile__photo {
  aspect-ratio: auto;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.pp-profile__photo img {
  aspect-ratio: 457 / 516;
  height: auto;
}

.pp-profile__caption {
  position: static;
  background: var(--color-copper);
  padding: clamp(1rem, 1.9vw, 1.9rem) clamp(1rem, 1.83vw, 1.8rem) clamp(1.5rem, 2.9vw, 2.9rem);
  gap: 0;
}

.pp-profile__name {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.54vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.25;
}

.pp-profile__role {
  font-family: var(--font-serif);
  font-size: clamp(0.93rem, 1.24vw, 1.3rem);
  letter-spacing: 0.01em;
  color: #fff;
}

.pp-profile__body {
  display: flex;
  flex-direction: column;
  /* 28 Sept: was 0.6rem, which dropped the PROFILE rule ~10px below the top of
     the portrait. Victor wants the text column to start level with the photo. */
  padding-top: 0;
  margin-right: 1.3rem;
}

.pp-profile__heading-row {
  position: relative;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  margin-bottom: clamp(2rem, 3.5vw, 3.5rem);
}

.pp-profile__label {
  font-family: var(--font-sans);
  font-size: clamp(0.9rem, 0.98vw, 1.02rem);
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
}

.pp-profile__close {
  position: absolute;
  right: -1.5rem;
  top: -0.1rem;
  color: #fff;
}

.pp-profile__bio p {
  /* 28 Sept: brought down twice. The clamp maximums were what bit on a large
     monitor -- at 1920 the first pass still rendered 24px lead / 17.9px body,
     so the caps are now the limiting value rather than the vw term. */
  font-size: clamp(0.94rem, 1vw, 1.04rem);
  line-height: 1.62;
  color: #fff;
  max-width: 34em;
  margin-bottom: 1.3em;
}

.pp-profile__bio p:first-child:not(.pp-profile__bio--empty) {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.28vw, 1.32rem);
  font-weight: 600;
  line-height: 1.42;
  max-width: 26em;
  margin-bottom: 1.15em;
}

.pp-profile__bio--empty { color: rgba(255, 255, 255, 0.75); }

.pp-profile__buttons {
  margin-top: auto;
  padding-top: 2rem;
  gap: clamp(1rem, 1.46vw, 1.4rem);
}

.pp-profile__buttons .btn {
  min-width: clamp(150px, 13.25vw, 190px);
  justify-content: center;
}

.pp-profile__buttons .btn:first-child {
  background: var(--color-copper);
  border-color: var(--color-copper);
  color: #fff;
}

.pp-profile__buttons .btn + .btn {
  border-color: #fff;
  color: #fff;
}

.pp-profile__buttons .btn::before { background: #fff; }
.pp-profile__buttons .btn:hover { color: var(--color-dark); border-color: #fff; }

/* the contact band heading is set in capitals on this page's mockup */
/* 1 Oct: Victor asked for the form headings to be consistent and in sentence
   case across the site - some pages were shouting it in capitals, others were
   not. The underlying text is already sentence case ("Let's start a
   conversation"); it was this transform doing the shouting. */
.contact__heading { text-transform: none; }

@media (max-width: 1024px) {
  .pp-hero__content { grid-template-columns: 1fr; gap: 1.5rem; padding: 0 var(--gutter); }
  .pp-profile > .container { padding: 0 var(--gutter); }
  .pp-profile__close { right: 0; }
}

/* 18 Sept: Let's start a conversation — the same form proportions as the
   approved Careers and Awards forms (221 x 45 fields, 474 x 121 message,
   181 x 45 Submit, content from x102, form from x764). */
.contact {
  padding: clamp(60px, 7.3vw, 110px) 0 clamp(60px, 6vw, 90px);
}

.contact__heading {
  font-size: clamp(1.9rem, 2.93vw, 3.2rem);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

.contact__text {
  font-size: clamp(1.05rem, 1.32vw, 1.4rem);
  line-height: 1.45;
  color: #fff;
  max-width: 21.6em;
}

.contact__form,
.contact__form > form {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.76vw, 1.7rem);
}

.contact__row { gap: clamp(1rem, 2.34vw, 2.3rem); }

.contact__input,
.contact__select,
.contact__textarea {
  height: auto;
  min-height: 45px;
  margin-bottom: 0;   /* Webflow's .w-input / .w-select add 10px */
  padding: 0.95rem 1rem;
  background: var(--color-surface-light);
  color: var(--color-dark);
  font-family: var(--font-sans);
  font-size: 0.93rem;
  font-weight: 400;
  letter-spacing: 0;
  border-radius: 0;
}

.contact .contact__textarea {   /* outranks Webflow's textarea.w-input height */
  height: clamp(96px, 8.86vw, 140px);
  min-height: 0;
  padding-top: clamp(2.2rem, 3.6vw, 3.6rem);   /* mockup centres MESSAGE in the box */
  resize: vertical;
}

.contact .contact__submit {
  align-self: flex-start;
  justify-content: center;
  min-width: clamp(150px, 13.25vw, 195px);
  min-height: 45px;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-serif);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.contact .contact__submit svg { display: none; }

@media (min-width: 1025px) {
  .contact > .container {
    max-width: none;
    padding: 0 9.4vw 0 7.47vw;
  }

  .contact__inner {
    grid-template-columns: 1fr 34.7vw;
    align-items: start;
  }
}

/* 18 Sept: each card's copper hover bar carries the person's quirk from
   the bios (added by the People script). The caption now sits under the
   photo, so the bar is pinned to the foot of the portrait rather than the
   card: the card is a size container and the bar's top is the photo's
   height (the card width x 315/305), lifted by its own height. */
.pp-card {
  container-type: inline-size;
}

.pp-card .pp-card__badge {
  top: calc(100cqw * 315 / 305);
  bottom: auto;
  z-index: 2;
  padding: clamp(0.8rem, 1.3vw, 1.2rem) clamp(0.75rem, 1.2vw, 1.25rem);
  font-family: var(--font-sans);
  font-size: clamp(0.86rem, 1.1vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.35;
  transform: translateY(-100%);
  clip-path: inset(100% 0 0 0);
  opacity: 1;
  transition: clip-path 0.35s var(--ease-out);
}

.pp-card:hover .pp-card__badge,
.pp-card:focus-visible .pp-card__badge {
  transform: translateY(-100%);
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .pp-card .pp-card__badge { transition: none; }
}

/* 18 Sept: the whole page sits on charcoal #231F20, so no cream shows at
   the edges or when the page over-scrolls. */
body { background: var(--color-dark); }

/* 18 Sept: blank placeholders for people whose portraits aren't on file
   yet — the same shape as a portrait, a shade lighter than the page. */
.pp-card__placeholder,
.pp-profile__avatar {
  display: block;
  background: rgba(255, 255, 255, 0.06);
}

.pp-card__placeholder {
  width: 100%;
  aspect-ratio: 305 / 315;
  transition: opacity 0.3s ease;
}

.pp-card:hover .pp-card__placeholder { opacity: 0.85; }

.pp-profile__avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 457 / 516;
}

.pp-card--active .pp-card__placeholder {
  outline: 3px solid var(--color-copper);
  outline-offset: -3px;
}

/* ═══════════════════════════════════════════════════════
   25 Sept: the profile panel on a phone.

   The panel's styling above sits outside any media query — it was written
   against the 1366 mockup and therefore overrides the earlier
   max-width: 768px block, which never mentions .pp-profile at all. The
   result was a two-column grid surviving all the way down to 390px: the
   photo column alone claims its 280px floor, and the body column's
   min-content width pushed the page 260px wider than the viewport, so the
   whole site scrolled sideways on a phone.

   Stack the two columns instead, and let the photo be a comfortable size
   rather than a fixed slot.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pp-profile__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .pp-profile__photo {
    max-width: 320px;
    width: 100%;
  }

  .pp-profile__body {
    /* the right-hand inset only made sense beside the photo */
    margin-right: 0;
    padding-top: 0;
  }

  .pp-profile__heading-row {
    margin-bottom: 1.5rem;
    /* leave room for the close button, which is absolutely positioned here */
    padding-right: 2.5rem;
  }

  .pp-profile__buttons {
    padding-top: 1.5rem;
    flex-wrap: wrap;
  }

  .pp-profile__buttons .btn {
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* 25 Sept: touch targets on a phone. The filter links were 25px tall and the
   panel's close button only 12 x 19 — and that close button is the one way
   back out of a profile, so it matters most of all. The × keeps its size and
   position; the hit area around it grows to 44 x 44. */
@media (max-width: 768px) {
  .pp-filters__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .pp-profile__close {
    position: relative;
  }

  .pp-profile__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}