/* Approved turquoise/ivory mark; shared editorial wordmark font. */
@font-face {
  font-family: "Espelho Editorial";
  src: url("fonts/espelho-editorial.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  max-width: 100%;
  letter-spacing: 0;
}
.brand-icon {
  display: block;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 14px;
  object-fit: contain;
}
.brand .brand-copy {
  display: block;
  margin: 0;
}
.brand .brand-name,
.kit-brand-footer .brand-name {
  display: block;
  margin: 0;
  color: #172f30;
  font-family: "Espelho Editorial", Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
}
.brand .brand-subtitle {
  display: block;
  margin-top: 9px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .13em;
}
.kit-brand-footer {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 0 1 390px;
}
.kit-brand-footer .brand-icon {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border-radius: 11px;
}
.kit-brand-footer .brand-name {
  font-size: 22px;
  line-height: 1.25;
}
.kit-brand-footer .brand-author {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.5;
}
footer > p { flex: 0 1 650px; }

@media (max-width: 700px) {
  header { flex-wrap: wrap; gap: 16px; }
  header nav { margin-left: auto; }
  .brand { gap: 12px; }
  .brand .brand-icon {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    border-radius: 12px;
  }
  .brand .brand-name { font-size: 25px; }
  .kit-brand-footer { margin-bottom: 18px; }
}
@media (max-width: 350px) {
  .brand .brand-name { font-size: 23px; }
  .brand .brand-subtitle { letter-spacing: .1em; }
  .kit-brand-footer .brand-name { font-size: 21px; }
}