/* Optional promotional banner — independent of the main site and font viewer. */
@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@700&family=Atma:wght@400&family=Berkshire+Swash&family=Boogaloo&display=swap');
.font-promo {
  display:block;
  margin:0 clamp(18px,4vw,48px) 30px;
  padding:20px 22px 18px;
  background:#dfc79f url('/images/birch-background.jpg') center / cover no-repeat;
  border:1px solid #c3a479;
  border-bottom:3px solid #8b6437;
  border-radius:7px;
  color:#4e2b07;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.font-promo:hover,.font-promo:focus-visible { outline:2px solid #8b6437; outline-offset:2px; }
.font-promo-inner { max-width:790px; margin:auto; }
.font-promo-kicker { font:700 12px/1.4 Arial,Helvetica,sans-serif; letter-spacing:.13em; }
.font-promo-examples { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:4px 24px; margin:12px auto 10px; }
.font-promo-examples span { display:inline-block; white-space:nowrap; line-height:1.3; }
.font-promo-atma { font:400 clamp(25px,3.1vw,37px) 'Atma',cursive; }
.font-promo-berkshire { font:400 clamp(24px,2.9vw,36px) 'Berkshire Swash',serif; }
.font-promo-boogaloo { font:400 clamp(27px,3.2vw,40px) 'Boogaloo',sans-serif; }
.font-promo-alegreya { font:700 clamp(25px,3vw,38px) 'Alegreya',serif; }
.font-promo-heading { border-top:1px solid #8b64377d; padding-top:10px; font:bold clamp(16px,2.1vw,20px)/1.35 Arial,Helvetica,sans-serif; }
.font-promo-caption { font:14px/1.5 Arial,Helvetica,sans-serif; margin-top:3px; }
@media(max-width:480px) {
  .font-promo { padding:18px 12px; }
  .font-promo-examples { gap:4px 15px; }
  .font-promo-caption { font-size:13px; }
}