/* WHO SIGNS — hero
   Frame 2064:4702 (1440 x 1671). Hero spans y 72 -> 513. */
.signer-hero {
  position: relative;
  min-height: 441px;
  padding: 68px var(--pad-x) 0;
}

/* full-bleed hairline closing the hero (Vector 380, 1440 wide) */
.signer-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  border-bottom: 1px solid var(--color-border);
}

.signer-hero__title {
  margin-top: 12px;
  max-width: 64%;
  font-family: var(--font-base);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: 1.2;
  letter-spacing: -0.002em;
  color: var(--color-dark);
}

.signer-hero__lede {
  margin-top: 38px;
  width: 433px;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-light);
}

.signer-hero__note {
  position: absolute;
  top: 190px;
  right: 4.69%;
  width: 42.33%;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-light);
}

.signer-hero__arrow {
  position: absolute;
  left: 43.5%;
  bottom: 170px;
}

/* WHO SIGNS — the signer
   Section spans y 513 -> 1311 (798px tall). */
.signer {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-bottom: 85px;
}

.signer__left {
  flex: 0 0 53%;
  min-width: 0;
  padding: 222px 0 0 var(--pad-x);
}

.signer__id {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-right: var(--pad-x);
}

.signer__name {
  font-size: 26px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-dark);
}

.signer__role {
  margin-top: 12px;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-light);
}

.signer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-top: 6px;
  flex-shrink: 0;
  background: var(--color-cream);
  transition: background var(--transition-fast);
}

.signer__social:hover {
  background: var(--color-cream-hover);
}

.signer__rule {
  width: calc(100% + var(--pad-x));
  margin: 27px 0 0 calc(-1 * var(--pad-x));
  border: 0;
  border-top: 1px solid var(--color-border);
}

.signer__bio {
  margin-top: 29px;
  width: 93.2%;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-light);
}

.signer__actions {
  display: flex;
  gap: 10px;
  margin-top: 39px;
}

.btn-solid,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding-inline: 14px;
  font-size: 13.88px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  border-radius: 4.34px;
  transition: all 0.3s linear;
}

.btn-solid {
  background: var(--color-navy);
  color: var(--color-white);
}

.btn-solid:hover {
  background: var(--color-navy-hover);
  opacity: 80%;
}

.btn-outline {
  color: #505050;
  border: 1px solid #50505026;
}

.btn-outline:hover {
  border-color: var(--color-navy);
  background-color: var(--color-navy);
  color: var(--color-white);
}

.signer__card {
  position: relative;
  flex: 0 0 47%;
  margin: 86px 0 0;
  aspect-ratio: 601 / 627;
  overflow: hidden;
  background-color: var(--color-brown);
  /* two groups of four hairlines behind the portrait, 18px apart:
     card-relative x 19/37/55/73 and 529/547/565/583 */
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255, 248, 242, 0.2) 0 1px,
      transparent 1px 18px
    ),
    repeating-linear-gradient(
      to right,
      rgba(255, 248, 242, 0.2) 0 1px,
      transparent 1px 18px
    );
  background-size: 55px 100%;
  background-position:
    19px 0,
    right 17px top;
  background-repeat: no-repeat;
  /* Figma's drop shadow is a right-offset band: it starts 43px in from the
     card's left edge, clears the right edge by 2px, and dies 15px down. */
  box-shadow: 22px 32px 12px -27px rgba(140, 50, 30, 0.24);
}

.signer__card-mark {
  position: absolute;
  z-index: 1;
  top: 38px;
  left: 30px;
  width: 124px;
  height: 24px;
  filter: brightness(0) invert(1);
}

/* The portrait is a full-frame photograph carrying its own background, so it
   fills the card edge to edge. The brown ground and the hairline groups behind
   it stay as the backdrop while the image loads or if it fails to. */
.signer__card picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.signer__portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.signer__hero__svg-mob {
  display: none;
}

/* Below the design width the absolutely-placed hero note would collide with the
   headline, so the hero becomes an explicit two-column grid that keeps the same
   side-by-side relationship. The signer section already scales on its own. */
@media (max-width: 1311px) {
  .signer-hero {
    display: grid;
    grid-template-columns: 1fr minmax(0, 42%);
    column-gap: 44px;
    align-items: start;
    min-height: 0;
    padding-bottom: 56px;
  }

  .signer-hero .eyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  .signer-hero__title {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
  }

  .signer-hero__lede {
    grid-column: 1;
    grid-row: 3;
    width: auto;
    max-width: 433px;
  }

  .signer-hero__note {
    position: static;
    grid-column: 2;
    grid-row: 2 / span 2;
    width: auto;
    margin-top: 14px;
  }

  .signer-hero__arrow {
    display: none;
  }

  .signer__left {
    padding-top: 150px;
  }
}

@media (max-width: 900px) {
  /* the two-column hero collapses: below this the note column was being
     squeezed to ~26px and its text spilled past the viewport */
  .signer-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 42px;
    padding-bottom: 40px;
  }

  .signer-hero__lede {
    width: auto;
    max-width: 433px;
  }

  .signer-hero__note {
    grid-column: 1;
    grid-row: 4;
    max-width: none;
    margin-top: 24px;
  }

  .signer {
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
    padding: 51px 0;
  }

  .signer__left,
  .signer__card {
    flex-basis: auto;
  }

  .signer__left {
    padding-top: 0;
  }

  .signer__card {
    margin-top: 0;
  }

  .signer__bio {
    width: auto;
  }

  .signer__left {
    padding-inline: var(--pad-x) var(--pad-x);
  }

  .signer__rule {
    width: auto;
    margin-left: calc(-1 * var(--pad-x));
    margin-right: calc(-1 * var(--pad-x));
  }

  .signer__card {
    flex-basis: auto;
    align-self: stretch;
    margin-inline: var(--pad-x);
  }

  .signer__actions {
    flex-wrap: wrap;
  }

  /* The wordmark and the hairline groups were pinned in px against a 601px
     card. On a phone card (~335px) that made the mark oversized enough to sit
     on the portrait's face, and the two hairline groups covered ~40% of the
     card. Both are restated proportionally so they hold at any card size. */
  .signer__card-mark {
    top: 6.06%;
    left: 4.99%;
    width: 20.63%;
    height: auto;
  }

  .signer__card {
    background-image:
      repeating-linear-gradient(
        to right,
        rgba(255, 248, 242, 0.2) 0 1.8%,
        transparent 1.8% 32.7%
      ),
      repeating-linear-gradient(
        to right,
        rgba(255, 248, 242, 0.2) 0 1.8%,
        transparent 1.8% 32.7%
      );
    background-size: 9.15% 100%;
    /* background-size: 9.15% 100%; */
    background-position:
      3.48% 0,
      96.9% 0;
  }

  .signer__hero__svg-mob {
    display: block;
    position: absolute;
    right: 0;
    top: 135px;
  }
}

/* The action row needs ~459px (242 + 206 + the 10px gap) and the column it sits
   in is the viewport less 33px of inset either side, so the pair stops fitting
   on one line at ~525px and wraps. Wrapped, each button still shrink-wraps its
   own label and the two read as different buttons, so below that the stack is
   explicit and both take the column's width. */
@media (max-width: 560px) {
  .signer__actions {
    flex-direction: column;
  }
}

/* very narrow phones: let the display type and the action buttons shrink */
@media (max-width: 480px) {
  .signer-hero {
    padding-top: 30px;
  }
  .signer-hero__title {
    font-size: 36px;
  }

  .signer__name {
    font-size: 26px;
  }

  .signer__id {
    justify-content: space-between !important;
    padding-right: 0;
  }
  .signer__actions {
    gap: 14px;
    margin-top: 17px;
  }

  .signer__social {
    width: 48px;
    height: 48px;
    margin-left: auto !important;
  }

  .btn-solid,
  .btn-outline {
    /* flex: 1 1 100%; */
    height: auto;
    min-height: 42px;
    padding: 8px 13px;
    white-space: normal;
    text-align: center;
  }
  .signer-hero__lede,
  .signer-hero__note,
  .signer__bio,
  .signer__role {
    font-size: 14px !important;
    color: var(--color-light);
    margin-top: 40px;
  }
  .signer__role {
    margin-top: 5px;
  }
  .signer__card {
    margin-inline: 0px;
  }
}