/* Huanzhang homepage core thesis.
   Loaded after the compiled site and announcement spotlight styles. */

main[data-locale] > #top.hero{
  color:#fffaf0;
  border-top:1px solid rgba(220,187,108,.28);
  border-bottom:1px solid rgba(220,187,108,.32);
  background:
    radial-gradient(circle at 78% 16%,rgba(220,187,108,.20),transparent 29%),
    radial-gradient(circle at 8% 92%,rgba(53,132,116,.30),transparent 36%),
    linear-gradient(132deg,#0c2925 0%,#123b34 54%,#0a2421 100%);
}
main[data-locale] > #top.hero::before{
  opacity:.25;
  background-image:
    linear-gradient(rgba(235,215,159,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(235,215,159,.12) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 56%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 56%,transparent 100%);
}
main[data-locale] > #top.hero::after{
  content:"TFA-01";
  display:block;
  right:-18px;
  bottom:-58px;
  color:rgba(242,215,145,.055);
  font-size:clamp(118px,13vw,188px);
  font-weight:850;
  letter-spacing:-.065em;
}

#top.hero .hero-grid{
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
  gap:clamp(46px,5.2vw,78px);
  min-height:720px;
  padding-block:92px 98px;
}
#top.hero .hero-copy{
  position:relative;
  z-index:2;
  min-width:0;
}
#top.hero .eyebrow{
  margin-bottom:28px;
  color:rgba(250,244,226,.72);
  font-size:12px;
  font-weight:650;
  letter-spacing:.13em;
}
#top.hero .eyebrow::before{
  width:38px;
  background:#d8b45b;
  box-shadow:0 0 18px rgba(216,180,91,.38);
}
#top.hero .eyebrow > span{
  color:#f1cd77;
  font-weight:800;
}
#top.hero h1{
  max-width:760px;
  margin:0;
  color:#efd285;
  font-size:clamp(48px,4.1vw,62px);
  font-weight:720;
  line-height:1.08;
  letter-spacing:-.045em;
  word-break:keep-all;
  overflow-wrap:normal;
  text-wrap:balance;
  text-shadow:0 12px 38px rgba(0,0,0,.18);
}
#top.hero h1 em{
  display:block;
  margin-top:.16em;
  color:#fffaf0;
  font-size:1.19em;
  font-weight:820;
  line-height:.98;
  letter-spacing:-.055em;
}
#top.hero .hero-lead{
  max-width:650px;
  margin-top:30px;
  padding:3px 0 3px 19px;
  border-left:2px solid #d8b45b;
  color:rgba(250,246,235,.82);
  font-size:17px;
  line-height:1.82;
  text-wrap:pretty;
}
#top.hero .hero-actions{
  margin-top:34px;
}
#top.hero .button{
  border-color:rgba(255,248,226,.34);
}
#top.hero .button-primary{
  color:#17231f;
  border-color:#d9b65f;
  background:#e3c675;
  box-shadow:0 12px 30px rgba(0,0,0,.19);
}
#top.hero .button-primary:hover{
  border-color:#f0d78f;
  background:#f0d78f;
  transform:translateY(-2px);
}
#top.hero .button-quiet{
  color:#fffaf0;
  background:rgba(255,255,255,.035);
}
#top.hero .button-quiet:hover{
  color:#f2d486;
  border-color:#d8b45b;
  background:rgba(255,255,255,.07);
}
#top.hero .hero-footnote{
  max-width:620px;
  color:rgba(244,237,217,.72);
  font-size:12px;
  line-height:1.65;
}

#top.hero .hero-science{
  position:relative;
  z-index:1;
  min-width:0;
}
#top.hero .hero-science::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-42px -38px;
  border:1px solid rgba(226,194,115,.16);
  border-radius:50%;
  box-shadow:
    0 0 0 28px rgba(226,194,115,.035),
    0 0 0 64px rgba(226,194,115,.018);
  pointer-events:none;
}
#top.hero .tfa-model{
  overflow:hidden;
  border:1px solid rgba(231,203,135,.68);
  background:
    radial-gradient(circle at 32% 18%,rgba(255,255,255,.96),transparent 48%),
    linear-gradient(145deg,#fbf5e5 0%,#eadbb7 100%);
  box-shadow:
    0 34px 86px rgba(0,0,0,.30),
    inset 0 1px rgba(255,255,255,.9);
}
#top.hero .tfa-model-heading strong{
  color:#173d35;
  font-weight:700;
}
#top.hero .tfa-model-heading span,
#top.hero .tfa-model-legend,
#top.hero .tfa-model-source{
  color:#675a3e;
}

main[data-locale="en"] #top.hero h1{
  max-width:780px;
  font-size:clamp(42px,3.8vw,58px);
  line-height:1.05;
  word-break:normal;
  overflow-wrap:normal;
  text-wrap:balance;
}
main[data-locale="en"] #top.hero h1 em{
  font-size:1.02em;
  line-height:1.06;
}

@media (max-width:1100px){
  #top.hero .hero-grid{
    grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);
    gap:44px;
  }
  #top.hero h1{
    font-size:clamp(44px,4.5vw,54px);
  }
}

@media (max-width:980px){
  #top.hero .hero-grid{
    grid-template-columns:minmax(0,1fr);
    gap:48px;
    min-height:0;
    padding-block:74px 82px;
  }
  #top.hero .hero-copy{
    max-width:780px;
  }
  #top.hero .hero-science{
    width:100%;
    max-width:640px;
  }
  #top.hero .hero-science::before{
    inset:-28px;
  }
}

@media (max-width:640px){
  main[data-locale] > #top.hero::after{
    right:-8px;
    bottom:-22px;
    font-size:88px;
  }
  #top.hero .hero-grid{
    gap:38px;
    padding-block:52px 60px;
  }
  #top.hero .eyebrow{
    gap:8px 11px;
    margin-bottom:22px;
    font-size:10px;
    letter-spacing:.1em;
  }
  #top.hero .eyebrow::before{
    display:block;
    width:24px;
  }
  #top.hero h1{
    max-width:100%;
    font-size:clamp(25px,7.8vw,34px);
    line-height:1.16;
    letter-spacing:-.04em;
  }
  #top.hero h1 em{
    margin-top:.22em;
    font-size:1.22em;
    line-height:1.02;
  }
  #top.hero .hero-lead{
    margin-top:25px;
    padding-left:15px;
    font-size:16px;
    line-height:1.78;
  }
  #top.hero .hero-actions{
    margin-top:28px;
  }
  #top.hero .hero-footnote{
    margin-top:21px;
  }
  #top.hero .hero-science::before{
    inset:-14px;
  }
  #top.hero .tfa-model{
    border-radius:20px;
  }
  main[data-locale="en"] #top.hero h1{
    font-size:clamp(30px,8.8vw,39px);
    line-height:1.08;
  }
  main[data-locale="en"] #top.hero h1 em{
    margin-top:.18em;
    font-size:1em;
  }
}

@media (max-width:370px){
  #top.hero h1{
    font-size:25px;
  }
  #top.hero .hero-actions{
    flex-direction:column;
  }
  #top.hero .hero-actions .button{
    flex:auto;
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  #top.hero .button-primary:hover{
    transform:none;
  }
}