:root {
      color-scheme: dark;
      --ink: #071012;
      --ivory: #f1eadf;
      --red: #e01d2a;
      --red-deep: #d3232b;
      --serif: "Cormorant Garamond", "Baskerville", "Times New Roman", serif;
      --sans: "DM Sans", Arial, sans-serif;
      --mono: "IBM Plex Mono", monospace;
    }

    *, *::before, *::after { box-sizing: border-box; }

    html { background: var(--ink); scroll-behavior: smooth; }

    body {
      min-width: 320px;
      margin: 0;
      color: var(--ivory);
      background: var(--ink);
      font-family: var(--sans);
      -webkit-font-smoothing: antialiased;
    }

    img { display: block; max-width: 100%; }

    .skip-link {
      position: fixed;
      z-index: 40;
      top: 12px;
      left: 12px;
      padding: 10px 14px;
      color: var(--ink);
      background: var(--ivory);
      font-family: var(--mono);
      font-size: 11px;
      text-decoration: none;
      text-transform: uppercase;
      transform: translateY(-160%);
    }

    .skip-link:focus { transform: translateY(0); }

    .people-banner {
      position: relative;
      isolation: isolate;
      min-height: 500px;
      overflow: hidden;
      border-bottom: 1px solid rgba(211, 195, 170, .35);
      background: #071012;
    }

    .people-banner__ambient {
      position: absolute;
      z-index: -2;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(3, 10, 12, .98) 0%, rgba(4, 16, 19, .90) 40%, rgba(4, 28, 32, .72) 78%, rgba(4, 31, 35, .58) 100%),
        linear-gradient(180deg, rgba(2, 8, 10, .08), rgba(2, 8, 10, .34)),
        url("../../media/old-assets/tales-from-the-trap-people.png") center / cover no-repeat;
      filter: saturate(.78) contrast(1.05);
      transform: scale(1.01);
    }

    .people-banner::after {
      position: absolute;
      z-index: -1;
      inset: 0;
      content: "";
      pointer-events: none;
      background: radial-gradient(circle at 50% 55%, transparent 26%, rgba(1, 6, 8, .32) 100%);
    }

    .banner-inner,
    .roster-inner {
      width: min(calc(100% - 48px), 1280px);
      margin-inline: auto;
    }

    .site-header {
      position: sticky;
      z-index: 30;
      top: 0;
      display: flex;
      width: 100%;
      height: 78px;
      padding-inline: max(24px, calc((100% - 1200px) / 2));
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(241, 234, 223, .18);
      background: rgba(10, 10, 11, .89);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .site-header .brand {
      position: relative;
      z-index: 2;
      display: inline-flex;
      min-width: auto;
      align-items: center;
      flex-direction: row;
      gap: 14px;
      color: var(--ivory);
      text-decoration: none;
    }

    .site-header .brand__mark {
      height: 34px;
      color: var(--ivory);
      font-family: var(--serif);
      font-size: 35px;
      font-weight: 400;
      letter-spacing: -.22em;
      line-height: 1;
    }

    .site-header .brand__mark span {
      display: inline-block;
      opacity: .78;
      transform: translateX(-4px) scaleX(.82);
    }

    .site-header .brand__name {
      color: var(--ivory);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .27em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .site-header nav {
      display: flex;
      align-items: center;
      gap: clamp(16px, 2.1vw, 34px);
    }

    .site-header nav a {
      position: relative;
      color: var(--ivory);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .19em;
      text-decoration: none;
      text-transform: uppercase;
    }

    .site-header nav a:not(.site-header__contact)::after {
      position: absolute;
      right: .18em;
      bottom: -8px;
      left: 0;
      height: 1px;
      content: "";
      background: var(--red);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s;
    }

    .site-header nav a:hover::after,
    .site-header nav a:focus-visible::after { transform: scaleX(1); }

    .site-header__contact {
      display: inline-flex;
      gap: 22px;
      padding: 12px 15px;
      border: 1px solid rgba(241, 234, 223, .36);
      transition: background .25s, color .25s;
    }

    .site-header__contact:hover,
    .site-header__contact:focus-visible {
      color: var(--ink);
      background: var(--ivory);
    }

    @media (max-width: 1050px) {
      .site-header nav a:nth-child(5),
      .site-header nav a:nth-child(6) { display: none; }
    }

    @media (max-width: 760px) {
      .site-header { height: 68px; padding-inline: 20px; }
      .site-header nav a { display: none !important; }
      .site-header nav .site-header__contact { display: inline-flex !important; }
    }
    .banner-heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
      align-items: end;
      gap: clamp(40px, 6vw, 84px);
      padding: 58px 0 64px;
    }

    .eyebrow {
      margin: 0 0 14px;
      color: var(--red);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      color: var(--ivory);
      font-family: var(--serif);
      font-size: clamp(64px, 5.45vw, 90px);
      font-weight: 400;
      letter-spacing: -.052em;
      line-height: .84;
    }

    h1 em {
      color: var(--red-deep);
      font-style: italic;
      font-weight: 400;
    }

    .banner-heading > p {
      max-width: 430px;
      margin: 0 0 4px;
      color: rgba(241, 234, 223, .82);
      font-size: 16px;
      line-height: 1.55;
    }

    .roster {
      padding: 46px 0 72px;
      background:
        radial-gradient(circle at 86% 8%, rgba(9, 68, 73, .20), transparent 32%),
        var(--ink);
    }

    .roster-heading {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 20px;
      color: rgba(241, 234, 223, .68);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .roster-heading::after {
      height: 1px;
      flex: 1;
      content: "";
      background: rgba(241, 234, 223, .2);
    }

    .talent-card-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .talent-card {
      position: relative;
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      align-items: center;
      gap: 24px;
      min-height: 178px;
      padding: 20px 22px;
      overflow: hidden;
      border: 1px solid rgba(211, 195, 170, .5);
      color: var(--ivory);
      background: linear-gradient(145deg, rgba(25, 28, 30, .82), rgba(7, 10, 11, .9));
      transition: transform .45s cubic-bezier(.2, .75, .25, 1), border-color .3s, box-shadow .45s;
    }

    .talent-card::before {
      position: absolute;
      z-index: 2;
      top: -1px;
      right: 0;
      left: 0;
      height: 2px;
      content: "";
      background: var(--red);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s cubic-bezier(.2, .75, .25, 1);
    }

    .talent-card:hover {
      z-index: 2;
      border-color: rgba(241, 234, 223, .72);
      box-shadow: 0 20px 55px rgba(0, 0, 0, .34);
      transform: translateY(-4px);
    }

    .talent-card:hover::before { transform: scaleX(1); }

    .talent-avatar {
      position: relative;
      display: grid;
      width: 132px;
      height: 132px;
      overflow: hidden;
      border: 1px solid rgba(221, 207, 184, .64);
      border-radius: 50%;
      background: radial-gradient(circle at 50% 28%, #33383a 0%, #171a1c 56%, #0a0c0d 100%);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .22);
      place-items: center;
    }

    .talent-avatar img {
      position: absolute;
      z-index: 1;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(.84) saturate(.5) contrast(1.08);
    }

    .talent-avatar img.image-high { object-position: 50% 12%; }

    .talent-avatar__placeholder {
      position: absolute;
      z-index: 1;
      inset: 0;
      overflow: hidden;
      background: radial-gradient(circle at 50% 28%, #33383a 0%, #171a1c 58%, #0a0c0d 100%);
    }

    .talent-avatar__placeholder::before {
      position: absolute;
      top: 24%;
      left: 50%;
      width: 30%;
      aspect-ratio: 1;
      border-radius: 50%;
      content: "";
      background: rgba(241, 234, 223, .23);
      transform: translateX(-50%);
    }

    .talent-avatar__placeholder::after {
      position: absolute;
      right: 18%;
      bottom: -10%;
      left: 18%;
      height: 49%;
      border-radius: 50% 50% 0 0;
      content: "";
      background: rgba(241, 234, 223, .18);
    }

    .talent-avatar::after {
      position: absolute;
      z-index: 2;
      inset: 0;
      content: "";
      pointer-events: none;
      background: linear-gradient(180deg, rgba(0, 0, 0, .02) 50%, rgba(3, 5, 6, .58) 100%);
    }


    .talent-card__copy { min-width: 0; }

    .talent-card__copy strong {
      display: block;
      margin-bottom: 0;
      color: var(--ivory);
      font-family: var(--serif);
      font-size: clamp(25px, 2.05vw, 34px);
      font-weight: 400;
      line-height: 1.02;
    }


    .talent-card__arrow {
      position: absolute;
      z-index: 3;
      top: 17px;
      right: 18px;
      color: rgba(241, 234, 223, .72);
      font-family: var(--serif);
      font-size: 21px;
      line-height: 1;
    }

    @media (max-width: 900px) {
      .people-banner { min-height: auto; }
      .banner-heading { grid-template-columns: 1fr; gap: 24px; padding-block: 52px 58px; }
      .banner-heading > p { max-width: 520px; }
      .talent-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .talent-card { grid-template-columns: 96px minmax(0, 1fr); min-height: 155px; gap: 15px; padding: 15px; }
      .talent-avatar { width: 96px; height: 96px; }
      .talent-card__copy strong { font-size: clamp(22px, 3.2vw, 30px); }
    }

    @media (max-width: 600px) {
      .banner-inner,
      .roster-inner { width: min(calc(100% - 40px), 1280px); }
      .banner-heading { padding-block: 48px 54px; }
      h1 { font-size: clamp(58px, 16vw, 78px); }
      .roster { padding-block: 32px 46px; }
      .talent-card-grid { grid-template-columns: 1fr; gap: 8px; }
      .talent-card { grid-template-columns: 100px minmax(0, 1fr); min-height: 132px; }
      .talent-avatar { width: 100px; height: 100px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .talent-card, .talent-card::before { transition: none; }
    }