:root{
  --brush-font:"BiauKai","DFKai-SB","標楷體","STKaiti","KaiTi",serif;
}

body{
  letter-spacing:.025em;
  text-rendering:optimizeLegibility;
}

.brand b,
.hero h1,
.hero h2,
.quick h2,
.quick b,
.title h2,
.cards h3,
.forms h2,
.contact h2,
.contact h3{
  font-family:var(--brush-font);
}

.brand b{
  font-size:1.5rem;
  letter-spacing:.14em;
  line-height:1.25;
}

.brand small{
  letter-spacing:.1em;
  line-height:1.45;
}

nav a{
  letter-spacing:.075em;
  line-height:1.55;
}

.hero p{
  letter-spacing:.32em;
  line-height:1.8;
}

.hero h1{
  font-weight:700;
  line-height:1.08;
  letter-spacing:.1em;
  margin-block:22px;
  text-shadow:0 3px 12px #170505cc;
}

.hero h1 span{
  letter-spacing:.14em;
}

.hero h2{
  font-weight:700;
  line-height:1.65;
  letter-spacing:.18em;
}

.actions a,
.primary,
button{
  letter-spacing:.09em;
  line-height:1.45;
}

.quick h2,
.title h2,
.contact h2{
  font-weight:700;
  letter-spacing:.13em;
  line-height:1.35;
}

.quick b,
.cards h3,
.forms h2,
.contact h3{
  letter-spacing:.09em;
  line-height:1.5;
}

.quick span,
.cards p,
.contact p,
form label{
  letter-spacing:.035em;
  line-height:1.75;
}

@media(max-width:520px){
  .brand b{font-size:1.35rem;letter-spacing:.1em}
  .hero h1{font-size:4rem;letter-spacing:.07em;line-height:1.08}
  .hero h1 span{letter-spacing:.1em}
  .hero h2{letter-spacing:.12em}
  .actions a{letter-spacing:.07em}
}