:root { --sage-logo: #93a28f; }

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  font-weight: 400;
  letter-spacing: normal;
  font-size: initial;
}

.brand-word {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: .24em;
}

.corner-mark {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  background: var(--sage-logo);
  flex: none;
}

.corner-mark i {
  position: absolute;
  width: 11px;
  height: 11px;
  border-color: #fff;
  border-style: solid;
}

.corner-mark i:nth-child(1) { left: 10px; top: 9px; border-width: 2px 0 0 2px; }
.corner-mark i:nth-child(2) { right: 10px; top: 9px; border-width: 2px 2px 0 0; }
.corner-mark i:nth-child(3) { left: 10px; bottom: 9px; border-width: 0 0 2px 2px; }
.corner-mark i:nth-child(4) { right: 10px; bottom: 9px; border-width: 0 2px 2px 0; }
.brand-light { color: #fff; }

@media (max-width: 480px) {
  .brand { gap: 10px; }
  .brand-word { font-size: .9rem; letter-spacing: .18em; }
  .corner-mark { width: 36px; height: 36px; }
  .corner-mark i:nth-child(1) { left: 8px; top: 7px; }
  .corner-mark i:nth-child(2) { right: 8px; top: 7px; }
  .corner-mark i:nth-child(3) { left: 8px; bottom: 7px; }
  .corner-mark i:nth-child(4) { right: 8px; bottom: 7px; }
}

.footer-identity { display: flex; flex-direction: column; align-items: flex-start; }
.footer-motto {
  margin: 1rem 0 0;
  color: #aeb9b5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .045em;
  white-space: nowrap;
}