/* English homepage SEO section. Kept below the first viewport so the existing home design remains unchanged. */
body{
  overflow-x:hidden;
  overflow-y:auto;
}

.brand .brand-name{
  margin:0;
  font-family:Georgia,serif;
  font-size:clamp(34px,5.4vh,58px);
  letter-spacing:4px;
  color:#f4cd73;
  text-shadow:0 3px 10px #000;
  font-weight:700;
}

.brand .home-hero-title{
  margin:4px 0 0;
  font-family:inherit;
  font-size:clamp(10px,1.5vh,13px);
  line-height:1.2;
  letter-spacing:3px;
  color:#dcae4f;
  font-weight:700;
  text-transform:uppercase;
}

.brand .home-hero-title:before,
.brand .home-hero-title:after{
  content:"◆";
  font-size:7px;
  margin:0 12px;
  color:#dcae4f;
}

.home-seo-content{
  width:min(900px,calc(100% - 28px));
  margin:0 auto;
  padding:clamp(28px,5vw,54px) 0 clamp(36px,6vw,64px);
  color:#d8c69f;
  text-align:center;
}

.home-seo-content h2{
  margin:0 0 12px;
  color:#f4cd73;
  font-family:Georgia,serif;
  font-size:clamp(22px,3vw,32px);
  line-height:1.15;
}

.home-seo-content p{
  max-width:780px;
  margin:0 auto;
  font-size:clamp(14px,1.8vw,16px);
  line-height:1.7;
}

.home-seo-content p a{
  color:#f4cd73;
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.home-seo-content p a:hover{
  filter:brightness(1.12);
}

html[data-theme="light"] .brand .brand-name{
  color:#9b670f;
  text-shadow:0 2px 8px #ffffffa8;
}

html[data-theme="light"] .brand .home-hero-title,
html[data-theme="light"] .brand .home-hero-title:before,
html[data-theme="light"] .brand .home-hero-title:after{
  color:#7d5312;
}

html[data-theme="light"] .home-seo-content{
  color:#5f5549;
}

html[data-theme="light"] .home-seo-content h2{
  color:#8d5e12;
}

html[data-theme="light"] .home-seo-content p a{
  color:#7d5312;
}

/* Keep the LCP brand independent from the decorative board's raster work. */
.board-shell{
  contain:layout paint;
}

.brand{
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}

@media (min-width:900px){
  .brand{
    transform:translate3d(0,-4vh,0);
  }
}

@media (max-width:600px){
  .home-seo-content{
    width:min(100% - 22px,900px);
    padding-top:24px;
  }
}