/* The selected text-led About layout. Background artwork is kept below the type. */
.about-letter{
  width:100%;
  min-height:760px;
  height:auto;
  max-height:none;
  padding:72px clamp(36px,7vw,102px) 64px;
  display:grid;
  place-items:center;
  color:#263d50;
  background-color:#f7f8f5;
  background-repeat:no-repeat;
  background-size:cover;
  overflow:hidden;
}
.about-letter--orbit{background-color:#fffaf0;background-image:url('assets/about-patterns/home-planet-sparse.png')}
.about-letter--paper{background-color:#fffaf0;background-image:url('assets/about-patterns/home-book-sparse.png')}
.about-letter--jelly{background-color:#fffaf0;background-image:url('assets/about-patterns/home-jelly-sparse.png')}
.about-letter .about-content{
  width:100%;
  max-width:1176px;
  display:grid;
  grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);
  gap:clamp(45px,7vw,125px);
  align-items:start;
  text-align:left;
  position:relative;
  z-index:1;
}
.about-letter .letter-left{position:relative}
.about-letter .letter-eyebrow{
  display:block;
  font-family:Outfit,system-ui,sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  color:#6a8597;
}
.about-letter .letter-left h2{
  font-family:Lanxing,'Kaiti SC',KaiTi,cursive;
  font-size:clamp(56px,8vw,112px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.025em;
  color:#263d50;
  margin:48px 0 8px;
}
.about-letter .letter-underline{
  display:block;
  width:92px;
  height:5px;
  background:#cdbd90;
  border-radius:100%;
  transform:rotate(-4deg);
  margin:9px 0 31px;
}
.about-letter .letter-lead{
  font-family:Lanxing,'Kaiti SC',KaiTi,cursive;
  font-size:clamp(22px,2vw,28px);
  font-weight:500;
  line-height:1.5;
  color:#3f6177;
  max-width:100%;
}
.about-letter .letter-signoff{
  display:block;
  font-family:Outfit,system-ui,sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  color:#7b8e98;
  margin-top:85px;
}
.about-letter--orbit .letter-eyebrow,
.about-letter--jelly .letter-eyebrow,
.about-letter--paper .letter-signoff,
.about-letter--jelly .letter-signoff{
  width:max-content;
  max-width:100%;
  background:#fffaf0dc;
  border-radius:3px;
  padding:3px 7px;
  margin-left:-7px;
}
.about-letter .letter-right{
  border-left:1px solid #bacbd2;
  padding-left:clamp(24px,4.5vw,65px);
  padding-top:100px;
}
.about-letter .letter-right p{
  max-width:640px;
  margin:0 0 27px;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  font-size:clamp(15px,1.34vw,19px);
  font-weight:400;
  line-height:1.95;
  letter-spacing:.015em;
  text-align:left;
  color:#263d50;
}
.about-letter .letter-right strong{color:#31526c;font-weight:650}
.about-letter .letter-links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:23px;
  border-top:1px solid #d4dfe1;
  padding-top:26px;
  margin-top:38px;
}
.about-letter .letter-primary{
  display:inline-flex;
  align-items:center;
  gap:13px;
  border:1px solid #59788c;
  background:#668aa2;
  color:#fff;
  padding:12px 22px;
  border-radius:100px;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  font-size:15px;
  line-height:1.4;
  text-decoration:none;
  cursor:pointer;
}
.about-letter .letter-secondary{
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  font-size:14px;
  color:#3d617a;
  text-decoration:underline;
  text-underline-offset:5px;
}
.about-letter .letter-primary:hover{background:#55778e}
.about-letter .letter-primary:focus-visible,.about-letter .letter-secondary:focus-visible{outline:3px solid #6d92ad;outline-offset:4px}
@media(max-width:850px){
  .about-letter{min-height:0;padding:58px 32px 200px;background-size:min(82vw,320px) auto;background-position:left bottom}
  .about-letter .about-content{grid-template-columns:1fr;gap:12px}
  .about-letter .letter-left h2{margin:22px 0 8px}
  .about-letter .letter-signoff{margin-top:26px}
  .about-letter .letter-right{border-left:0;border-top:1px solid #bacbd2;padding:30px 0 0}
}
@media(max-width:520px){
  .about-letter{padding:55px 24px 200px}
  .about-letter .letter-left h2{font-size:64px}
  .about-letter .letter-lead{font-size:25px}
  .about-letter .letter-right p{font-size:15px;line-height:1.85}
  .about-letter .letter-links{gap:16px}
  .about-letter .letter-primary{padding:10px 16px;font-size:14px}
}