/* XGN creator profile styles
   Consolidated during Cleanup Stage 2. Source order preserved to retain the approved cascade.
*/

/* ===== Source: creator-profile-v2.css ===== */
.xgn-creator-profile-page {
   background: #f0ede6;
   color: #0a0a0a
}

.xgn-creator-shell {
   width: min(100% - 36px, 1320px);
   margin: auto
}

.xgn-creator-kicker {
   display: block;
   color: #c79234;
   font: 800 10px/1 Inter, sans-serif;
   text-transform: uppercase;
   letter-spacing: .2em
}

.xgn-creator-hero {
   position: relative;
   min-height: 860px;
   background: #090909;
   color: #fff;
   overflow: hidden
}

.xgn-creator-hero__backdrop {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   filter: blur(38px) saturate(.7);
   transform: scale(1.1);
   opacity: .18
}

.xgn-creator-hero:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, #090909 0%, rgba(9, 9, 9, .93) 42%, rgba(9, 9, 9, .34) 76%, rgba(9, 9, 9, .8) 100%), linear-gradient(0deg, #090909 0%, transparent 35%)
}

.xgn-creator-hero__grid {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   align-items: end;
   min-height: 860px;
   padding-top: 150px
}

.xgn-creator-hero__copy {
   padding: 70px 0 90px
}

.xgn-creator-back {
   display: inline-flex;
   gap: 10px;
   align-items: center;
   color: #aaa59d;
   font: 800 10px Inter;
   text-transform: uppercase;
   letter-spacing: .14em;
   margin-bottom: 72px
}

.xgn-creator-back:hover {
   color: #c79234
}

.xgn-creator-hero h1 {
   font: 700 clamp(82px, 10vw, 156px)/.78 "Barlow Condensed", sans-serif;
   text-transform: uppercase;
   letter-spacing: -.045em;
   margin: 22px 0 18px;
   max-width: 760px
}

.xgn-creator-hero__role {
   font: 700 clamp(24px, 3vw, 40px)/1 "Barlow Condensed", sans-serif;
   text-transform: uppercase;
   color: #c7c1b8;
   margin: 0 0 40px
}

.xgn-creator-meta {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   max-width: 720px;
   border-top: 1px solid #333;
   border-bottom: 1px solid #333
}

.xgn-creator-meta div {
   padding: 22px 22px 22px 0
}

.xgn-creator-meta div+div {
   border-left: 1px solid #333;
   padding-left: 22px
}

.xgn-creator-meta span {
   display: block;
   color: #716d67;
   font: 800 8px Inter;
   text-transform: uppercase;
   letter-spacing: .15em
}

.xgn-creator-meta strong {
   display: block;
   margin-top: 8px;
   font: 800 18px "Barlow Condensed";
   text-transform: uppercase
}

.xgn-creator-hero__actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 35px
}

.xgn-creator-btn {
   display: inline-flex;
   min-height: 54px;
   padding: 0 24px;
   align-items: center;
   justify-content: center;
   gap: 11px;
   font: 800 10px Inter;
   text-transform: uppercase;
   letter-spacing: .13em;
   border: 1px solid transparent;
   transition: .2s
}

.xgn-creator-btn--gold {
   background: #c79234;
   color: #080808;
   border-color: #c79234
}

.xgn-creator-btn--gold:hover {
   background: #fff;
   border-color: #fff;
   color: #080808
}

.xgn-creator-btn--outline {
   border-color: #5a5752;
   color: #fff
}

.xgn-creator-btn--outline:hover {
   background: #fff;
   color: #080808;
   border-color: #fff
}

.xgn-creator-hero__portrait {
   position: relative;
   align-self: stretch;
   display: flex;
   align-items: end;
   justify-content: center
}

.xgn-creator-hero__portrait:before {
   content: "";
   position: absolute;
   width: 620px;
   height: 620px;
   border: 1px solid rgba(199, 146, 52, .35);
   border-radius: 50%;
   bottom: 80px;
   left: 50%;
   transform: translateX(-50%)
}

.xgn-creator-hero__portrait img {
   position: relative;
   z-index: 1;
   width: min(100%, 620px);
   height: 740px;
   object-fit: contain;
   object-position: center bottom;
   filter: drop-shadow(0 32px 45px rgba(0, 0, 0, .55))
}

.xgn-creator-hero__index {
   position: absolute;
   right: 0;
   top: 180px;
   color: #635f59;
   font: 800 9px Inter;
   letter-spacing: .2em;
   writing-mode: vertical-rl
}

.xgn-creator-story {
   padding: 120px 0
}

.xgn-creator-story__grid {
   display: grid;
   grid-template-columns: 360px 1fr;
   gap: 100px
}

.xgn-creator-story__aside h2 {
   font: 700 clamp(48px, 5vw, 72px)/.88 "Barlow Condensed";
   text-transform: uppercase;
   letter-spacing: -.03em;
   margin: 20px 0 38px
}

.xgn-creator-platforms {
   border-top: 2px solid #111
}

.xgn-creator-platforms a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 17px 0;
   border-bottom: 1px solid rgba(0, 0, 0, .2);
   color: #111;
   font: 800 10px Inter;
   text-transform: uppercase;
   letter-spacing: .12em
}

.xgn-creator-platforms a span {
   display: flex;
   align-items: center;
   gap: 12px
}

.xgn-creator-platforms a:hover {
   color: #9b6e28;
   padding-left: 8px
}

.xgn-creator-story__content {
   padding-top: 5px
}

.xgn-creator-section-number {
   display: block;
   color: #9b7130;
   font: 800 11px Inter;
   letter-spacing: .16em;
   margin-bottom: 18px
}

.xgn-creator-story__content h3 {
   font: 700 clamp(50px, 6vw, 86px)/.88 "Barlow Condensed";
   text-transform: uppercase;
   letter-spacing: -.035em;
   margin: 0 0 34px
}

.xgn-creator-lead {
   font-size: clamp(21px, 2.2vw, 31px);
   line-height: 1.5;
   color: #2b2926;
   margin: 0;
   max-width: 850px
}

.xgn-creator-highlight {
   display: grid;
   grid-template-columns: 70px 1fr;
   gap: 22px;
   border-top: 1px solid rgba(0, 0, 0, .22);
   margin-top: 70px;
   padding-top: 35px
}

.xgn-creator-highlight small {
   display: block;
   color: #8a6730;
   font: 800 9px Inter;
   text-transform: uppercase;
   letter-spacing: .15em;
   margin-bottom: 12px
}

.xgn-creator-highlight p {
   font: 700 28px/1.25 "Barlow Condensed";
   text-transform: uppercase;
   margin: 0
}

.xgn-creator-feature {
   background: #0b0b0b;
   color: #fff;
   padding: 100px 0
}

.xgn-creator-feature__grid {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   gap: 60px
}

.xgn-creator-feature h2 {
   font: 700 clamp(58px, 7vw, 108px)/.82 "Barlow Condensed";
   text-transform: uppercase;
   letter-spacing: -.04em;
   margin: 18px 0 0;
   max-width: 900px
}

.xgn-creator-feature__play {
   width: 130px;
   height: 130px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #c79234;
   color: #080808;
   font-size: 30px
}

.xgn-creator-feature__play:hover {
   transform: scale(1.05);
   background: #fff
}

.xgn-related-creators {
   background: #f0ede6;
   padding: 110px 0
}

.xgn-related-creators__head {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 40px;
   margin-bottom: 50px
}

.xgn-related-creators__head h2 {
   font: 700 clamp(58px, 7vw, 100px)/.82 "Barlow Condensed";
   text-transform: uppercase;
   letter-spacing: -.04em;
   margin: 16px 0 0
}

.xgn-related-creators__head>a {
   color: #111;
   font: 800 10px Inter;
   text-transform: uppercase;
   letter-spacing: .13em
}

.xgn-related-creators__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: #b8b1a7
}

.xgn-related-creator {
   position: relative;
   background: #0c0c0c;
   color: #fff;
   min-height: 550px;
   overflow: hidden
}

.xgn-related-creator__image {
   height: 390px;
   background: #151515;
   overflow: hidden
}

.xgn-related-creator__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
   transition: .35s
}

.xgn-related-creator:hover .xgn-related-creator__image img {
   transform: scale(1.025)
}

.xgn-related-creator__copy {
   padding: 24px
}

.xgn-related-creator__copy span {
   color: #c79234;
   font: 800 8px Inter;
   text-transform: uppercase;
   letter-spacing: .15em
}

.xgn-related-creator__copy h3 {
   font: 700 38px/.9 "Barlow Condensed";
   text-transform: uppercase;
   margin: 10px 0
}

.xgn-related-creator__copy p {
   margin: 0;
   color: #858079;
   font-size: 12px
}

.xgn-related-creator>i {
   position: absolute;
   right: 24px;
   bottom: 30px;
   color: #c79234
}

.xgn-creator-cta {
   background: #151515;
   color: #fff;
   padding: 85px 0
}

.xgn-creator-cta__grid {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   gap: 50px
}

.xgn-creator-cta h2 {
   font: 700 clamp(52px, 6vw, 88px)/.85 "Barlow Condensed";
   text-transform: uppercase;
   letter-spacing: -.035em;
   margin: 16px 0 0
}

.xgn-creator-missing {
   min-height: 80vh;
   display: flex;
   align-items: center;
   background: #090909;
   color: #fff;
   padding: 150px 0 100px
}

.xgn-creator-missing h1 {
   font: 700 clamp(70px, 9vw, 130px)/.8 "Barlow Condensed";
   text-transform: uppercase;
   margin: 25px 0
}

.xgn-creator-missing p {
   color: #9b968f;
   margin-bottom: 32px
}

@media(max-width:1000px) {
   .xgn-creator-hero__grid {
      grid-template-columns: 1fr
   }

   .xgn-creator-hero__copy {
      padding-bottom: 35px
   }

   .xgn-creator-hero__portrait {
      height: 570px
   }

   .xgn-creator-hero__portrait img {
      height: 570px
   }

   .xgn-creator-story__grid {
      grid-template-columns: 1fr;
      gap: 60px
   }

   .xgn-related-creators__grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:700px) {
   .xgn-creator-shell {
      width: min(100% - 26px, 1320px)
   }

   .xgn-creator-hero {
      min-height: auto
   }

   .xgn-creator-hero__grid {
      padding-top: 115px;
      min-height: auto
   }

   .xgn-creator-back {
      margin-bottom: 45px
   }

   .xgn-creator-hero__copy {
      padding: 35px 0 25px
   }

   .xgn-creator-meta {
      grid-template-columns: 1fr
   }

   .xgn-creator-meta div+div {
      border-left: 0;
      border-top: 1px solid #333;
      padding-left: 0
   }

   .xgn-creator-hero__portrait {
      height: 470px
   }

   .xgn-creator-hero__portrait img {
      height: 470px
   }

   .xgn-creator-hero__portrait:before {
      width: 420px;
      height: 420px;
      bottom: 25px
   }

   .xgn-creator-story,
   .xgn-related-creators {
      padding: 80px 0
   }

   .xgn-creator-highlight {
      grid-template-columns: 1fr
   }

   .xgn-creator-feature__grid,
   .xgn-creator-cta__grid {
      grid-template-columns: 1fr
   }

   .xgn-creator-feature__play {
      width: 95px;
      height: 95px
   }

   .xgn-related-creators__head {
      display: block
   }

   .xgn-related-creators__head>a {
      display: inline-block;
      margin-top: 20px
   }

   .xgn-related-creators__grid {
      grid-template-columns: 1fr
   }

   .xgn-creator-cta .xgn-creator-btn {
      justify-self: start
   }
}