/* YuanFeng V52.4 — English title proportions + large about/philosophy scroll headings. */

/* --------------------------------------------------------------------------
   Products landing — keep Chinese and English hero geometry visually aligned.
   The H1 keeps the original Chinese block height; only Latin lines may shrink
   horizontally to stay inside the rule width (JS calculates the exact fit).
   -------------------------------------------------------------------------- */
.yf-products-intro h1{
  min-height:1.96em;
}
html[data-language="en"] .yf-products-intro h1>span{
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow:visible!important;
}
html[data-language="en"] .yf-products-intro h1>span>.yf-title-line-inner{
  text-transform:uppercase;
  letter-spacing:-.025em;
  max-width:100%;
  white-space:nowrap;
  transform-origin:left center;
}
/* English support copy is intentionally a little smaller so the entire hero
   keeps roughly the same vertical footprint as the Chinese composition. */
html[data-language="en"] .yf-products-intro h2{
  font-size:clamp(16px,1.08vw,20px)!important;
  line-height:1.22!important;
  max-width:620px!important;
}
html[data-language="en"] .yf-products-intro>p{
  font-size:clamp(11px,.74vw,13px)!important;
  line-height:1.56!important;
  max-width:590px!important;
}

/* --------------------------------------------------------------------------
   English: visible page display titles are uppercase, while navigation, body
   copy and footer retain their original casing.
   -------------------------------------------------------------------------- */
html[data-language="en"] .yf-section-heading h1,
html[data-language="en"] .yf-products-intro h1,
html[data-language="en"] .yf-project-poster .yfpp-title,
html[data-language="en"] .dtlTitleName h1,
html[data-language="en"] .staticPlaceholder>h1,
html[data-language="en"] .yf-v523-scroll-title,
html[data-language="en"] .tips404 h1{
  text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   About / Brand / Philosophy headings — same display language as Projects.
   The title itself uses a clipped-rise reveal and is only shown when its
   section reaches the viewport.
   -------------------------------------------------------------------------- */
.yf-v523-scroll-title{
  margin:clamp(58px,6vw,92px) 0 clamp(22px,2.2vw,36px)!important;
  padding:0!important;
  border:0!important;
  font-family:inherit!important;
  font-size:clamp(58px,7.2vw,118px)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
  font-weight:800!important;
  color:#292525!important;
  width:100%!important;
  max-width:none!important;
}
html[data-language="en"] .yf-v523-scroll-title{
  font-size:clamp(48px,6vw,100px)!important;
  letter-spacing:-.045em!important;
}
.yf-v523-title-line{
  display:block;
  overflow:hidden;
  padding-top:.10em;
  padding-bottom:.08em;
  margin-top:-.10em;
}
.yf-v523-title-inner{
  display:block;
  opacity:.001;
  transform:translate3d(0,112%,0) skewY(4deg);
  transform-origin:left bottom;
  will-change:transform,opacity;
}
.yf-v523-title-reveal-ready .yf-v523-scroll-title.is-revealed .yf-v523-title-inner{
  animation:yf-v523-heading-rise .64s cubic-bezier(.16,1,.3,1) both;
}
@keyframes yf-v523-heading-rise{
  0%{opacity:.001;transform:translate3d(0,112%,0) skewY(4deg)}
  100%{opacity:1;transform:translate3d(0,0,0) skewY(0)}
}

/* Override the legacy tiny heading rules on these content sections. */
.pageData .aboutProfile div .yf-v523-scroll-title,
.pageData .aboutGallery .agTitle div .yf-v523-scroll-title,
.pageData .pageCont div .yf-v523-scroll-title,
.pageData .pagePoint div .yf-v523-scroll-title{
  font-size:clamp(58px,7.2vw,118px)!important;
  line-height:.98!important;
  margin:clamp(58px,6vw,92px) 0 clamp(22px,2.2vw,36px)!important;
  padding:0!important;
  border:0!important;
  font-family:inherit!important;
}
html[data-language="en"] .pageData .aboutProfile div .yf-v523-scroll-title,
html[data-language="en"] .pageData .aboutGallery .agTitle div .yf-v523-scroll-title,
html[data-language="en"] .pageData .pageCont div .yf-v523-scroll-title,
html[data-language="en"] .pageData .pagePoint div .yf-v523-scroll-title{
  font-size:clamp(48px,6vw,100px)!important;
}

/* Philosophy point blocks used to be 50% wide because their old headings were
   small. Large titles need the full content width, matching the project look. */
.pageData .pagePoint>div{width:100%!important;}

/* Gallery arrows remain available, aligned to the baseline of the new title. */
.pageData .aboutGallery .agTitle>.flex{
  align-items:flex-end;
  gap:24px;
}
.pageData .aboutGallery .agTitle div ul{
  flex:0 0 auto;
  padding-bottom:clamp(24px,2.2vw,38px);
}

/* The removed brand quick-anchor block must not reserve any space if an older
   cached DOM fragment is injected. */
body .aboutTitle.scrollD .aboutMenu{display:none!important;}

@media(max-width:900px){
  .yf-v523-scroll-title,
  .pageData .aboutProfile div .yf-v523-scroll-title,
  .pageData .aboutGallery .agTitle div .yf-v523-scroll-title,
  .pageData .pageCont div .yf-v523-scroll-title,
  .pageData .pagePoint div .yf-v523-scroll-title{
    font-size:clamp(48px,15vw,82px)!important;
    line-height:1!important;
    margin:42px 0 22px!important;
  }
  html[data-language="en"] .yf-v523-scroll-title,
  html[data-language="en"] .pageData .aboutProfile div .yf-v523-scroll-title,
  html[data-language="en"] .pageData .aboutGallery .agTitle div .yf-v523-scroll-title,
  html[data-language="en"] .pageData .pageCont div .yf-v523-scroll-title,
  html[data-language="en"] .pageData .pagePoint div .yf-v523-scroll-title{
    font-size:clamp(38px,10.8vw,68px)!important;
  }
  .pageData .aboutGallery .agTitle div ul{padding-bottom:18px;}
  html[data-language="en"] .yf-products-intro h2{font-size:16px!important;}
  html[data-language="en"] .yf-products-intro>p{font-size:11px!important;}
}

@media(prefers-reduced-motion:reduce){
  .yf-v523-title-inner{opacity:1!important;transform:none!important;animation:none!important;}
}


/* V52.4 — bilingual navigation integrity.
   English About sub-navigation is recalculated by site-i18n after translation;
   keep the container free to use the newly measured width. */
html[data-language="en"] .subMenu .menuTabs{max-width:100vw;}
html[data-language="en"] .subMenu .menuTabs a[href*="news.html"]{text-transform:uppercase;}