:root{
  --lf-metallic-fallback:#c8901e;
  --lf-metallic-foil:
    linear-gradient(180deg,
      #f0c54d 0%,
      #e3af2f 12%,
      #bf8214 25%,
      #d99e21 38%,
      #efbf45 50%,
      #cf9321 62%,
      #9b640d 76%,
      #d59f2e 88%,
      #b97a13 100%),
    repeating-linear-gradient(112deg,
      rgba(123,74,10,.11) 0 2px,
      rgba(222,168,44,.08) 2px 6px,
      rgba(144,88,12,.14) 6px 10px,
      rgba(214,154,31,.05) 10px 14px),
    linear-gradient(90deg,
      rgba(245,194,73,.16) 0%,
      rgba(168,105,14,.04) 35%,
      rgba(240,182,49,.12) 68%,
      rgba(145,86,9,.04) 100%);
}

:where(
  h1,h2,h3,h4,
  h1 span,h1 em,h1 strong,
  h2 span,h2 em,h2 strong,
  h3 span,h3 em,h3 strong,
  h4 span,h4 em,h4 strong,
  .success-index,
  .member-role,
  .intro h1 .title-mix,
  .intro h1 .title-mix em
){
  color:var(--lf-metallic-fallback) !important;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  :where(
    h1,h2,h3,h4,
    h1 span,h1 em,h1 strong,
    h2 span,h2 em,h2 strong,
    h3 span,h3 em,h3 strong,
    h4 span,h4 em,h4 strong,
    .success-index,
    .member-role,
    .intro h1 .title-mix,
    .intro h1 .title-mix em
  ){
    background-image:var(--lf-metallic-foil) !important;
    background-size:100% 100%, 220% 100%, 160% 100% !important;
    background-position:center center, 0 0, center center !important;
    background-repeat:repeat !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    text-shadow:
      0 1px 0 rgba(133,83,11,.10),
      0 2px 8px rgba(4,31,64,.10) !important;
  }
}