/* Looking Back: outlined editorial wordmark; calligraphic lb for app icons. */
:root { --brand-red: #5C2633; --brand-white: #F3EEE3; --brand-yellow: #CFC18F; --brand-color: var(--brand-red); }
:root[data-theme='dark'], .brand-dark { --brand-color: var(--brand-white); }
.brand, .login-brand {
  color: var(--brand-color);
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  letter-spacing: -.035em;
  text-transform: lowercase;
  white-space: nowrap;
  gap: 10px;
}
.brand .brand-mark, .brand .brand-symbol, .login-brand .brand-mark {
  width: 26px;
  height: 30px;
  flex-shrink: 0;
  color: inherit;
}
.login-brand { font-size: 32px; gap: 13px; }
.login-brand .brand-mark { width: 32px; height: 37px; }
.brand-wordmark {
  display: block;
  width: 190px;
  height: 49px;
  flex-shrink: 0;
  background-color: var(--brand-color);
  -webkit-mask: url('/icons/looking-back-wordmark-red.svg') center / contain no-repeat;
  mask: url('/icons/looking-back-wordmark-red.svg') center / contain no-repeat;
}
.login-brand .brand-wordmark { width: 230px; height: 59px; }
.brand-dark .nav { flex-wrap: wrap; }
@media (max-width: 480px) {
  .brand { font-size: 21px; gap: 8px; }
  .brand .brand-mark, .brand .brand-symbol { width: 22px; height: 25px; }
  .brand-dark .nav { gap: 12px; }
  .brand-dark .nav-cta { font-size: 12px; padding: 8px 11px; white-space: nowrap; }
  .login-brand { font-size: 29px; }
  .brand-wordmark { width: 148px; height: 38px; }
  .login-brand .brand-wordmark { width: 210px; height: 54px; }
}