/*
HostDrift Shared Typography 0.2.4
Laravel Corporate + WordPress Blog use this exact same file.
*/
:root{
  --hd-font:"Sukhumvit Set","Thonburi",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto",sans-serif;
  --hd-body-line:1.65;
  --hd-th-body-line:1.76;
}
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,button,input,select,textarea{
  font-family:var(--hd-font)!important;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body.hd-blog-unified h1,body.hd-blog-unified h2,body.hd-blog-unified h3,
body.hd-blog-unified h4,body.hd-blog-unified h5,body.hd-blog-unified h6,
body.hd-blog-unified p,body.hd-blog-unified a,body.hd-blog-unified li,
.site-header,.site-header a,.site-header button{
  font-family:var(--hd-font)!important;
}
body p,body li{line-height:var(--hd-body-line)}
html[lang^="th"] body p,html[lang^="th"] body li{
  line-height:var(--hd-th-body-line);
  letter-spacing:0;
  word-spacing:0;
}
.site-header .site-nav a,.site-header .primary-nav a,
.site-header .language-switch,.site-header .hd-blog-language-switch{
  font-family:var(--hd-font)!important;
  font-size:13px!important;
  line-height:1.35!important;
  letter-spacing:0!important;
  font-weight:650!important;
}
html[lang^="th"] .site-header .site-nav a,
html[lang^="th"] .site-header .primary-nav a{
  font-size:14px!important;
  line-height:1.45!important;
  font-weight:600!important;
}
.site-header .button,.site-header .header-cta{
  font-family:var(--hd-font)!important;
  font-size:13px!important;
  line-height:1.35!important;
  letter-spacing:0!important;
}
html[lang^="th"] .site-header .button,
html[lang^="th"] .site-header .header-cta{
  font-size:14px!important;
  line-height:1.42!important;
  font-weight:600!important;
}
.site-header .brand-copy,.site-header .brand-text{line-height:1.05!important}
.site-header .brand-copy strong,.site-header .brand-text>span{
  font-family:var(--hd-font)!important;
  font-size:16px!important;
  line-height:1.05!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
}
.site-header .brand-copy small,.site-header .brand-text small{
  font-family:var(--hd-font)!important;
  font-size:10px!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  margin-top:4px!important;
}
.hero h1,.page-hero h1,.hd-blog-hero h1{
  font-family:var(--hd-font)!important;
  font-size:clamp(52px,6.1vw,96px)!important;
  line-height:.98!important;
  letter-spacing:-.052em!important;
  margin-top:28px!important;
  margin-bottom:28px!important;
}
html[lang^="th"] .hero h1,
html[lang^="th"] .page-hero h1,
html[lang^="th"] .hd-blog-hero h1{
  font-size:clamp(48px,5.9vw,88px)!important;
  line-height:1.15!important;
  letter-spacing:-.018em!important;
  margin-top:24px!important;
  margin-bottom:27px!important;
}
.hero h2,.page-hero h2,.section h2,
body.hd-blog-unified .hd-blog-search-card h2,
body.hd-blog-unified .hd-blog-list-heading h2{
  font-family:var(--hd-font)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}
html[lang^="th"] .hero h2,
html[lang^="th"] .page-hero h2,
html[lang^="th"] .section h2,
html[lang^="th"] body.hd-blog-unified .hd-blog-search-card h2,
html[lang^="th"] body.hd-blog-unified .hd-blog-list-heading h2{
  line-height:1.23!important;
  letter-spacing:-.010em!important;
}
h3,body.hd-blog-unified h3{line-height:1.28!important;letter-spacing:-.02em!important}
html[lang^="th"] h3,html[lang^="th"] body.hd-blog-unified h3{
  line-height:1.44!important;letter-spacing:0!important
}
.lead,.section-lead,.hd-blog-hero-copy>p,
body.hd-blog-unified.single-post .single-hero p{
  font-family:var(--hd-font)!important;
  font-size:clamp(18px,1.7vw,23px)!important;
  line-height:1.56!important;
  letter-spacing:0!important;
}
html[lang^="th"] .lead,html[lang^="th"] .section-lead,
html[lang^="th"] .hd-blog-hero-copy>p,
html[lang^="th"] body.hd-blog-unified.single-post .single-hero p{
  line-height:1.70!important;
}
body.hd-blog-unified .hd-blog-feature-body h2{line-height:1.16!important;letter-spacing:-.025em!important}
html[lang^="th"] body.hd-blog-unified .hd-blog-feature-body h2{line-height:1.38!important;letter-spacing:-.004em!important}
body.hd-blog-unified .hd-blog-row h3{line-height:1.25!important;letter-spacing:-.02em!important}
html[lang^="th"] body.hd-blog-unified .hd-blog-row h3{line-height:1.44!important;letter-spacing:0!important}
body.hd-blog-unified.single-post .single-post-title{
  font-family:var(--hd-font)!important;
  font-size:clamp(44px,5.6vw,78px)!important;
  line-height:1.06!important;
  letter-spacing:-.042em!important;
}
html[lang^="th"] body.hd-blog-unified.single-post .single-post-title{
  font-size:clamp(42px,5.2vw,70px)!important;
  line-height:1.22!important;
  letter-spacing:-.010em!important;
}
body.hd-blog-unified.single-post .entry-content{
  font-family:var(--hd-font)!important;
  font-size:17px!important;
  line-height:1.84!important;
  letter-spacing:0!important;
}
html[lang^="th"] body.hd-blog-unified.single-post .entry-content{line-height:1.94!important}
html[lang^="th"] body.hd-blog-unified.single-post .entry-content p{margin-bottom:1.3em!important}
@media(max-width:820px){
  .hero h1,.page-hero h1,.hd-blog-hero h1{
    font-size:clamp(44px,12.4vw,64px)!important;
    line-height:1.03!important;
    letter-spacing:-.040em!important;
  }
  html[lang^="th"] .hero h1,
  html[lang^="th"] .page-hero h1,
  html[lang^="th"] .hd-blog-hero h1{
    font-size:clamp(40px,11vw,58px)!important;
    line-height:1.19!important;
    letter-spacing:-.010em!important;
  }
  .site-header .site-nav a,.site-header .primary-nav a{
    font-size:14px!important;line-height:1.46!important
  }
}