@font-face {
  font-family: "Bad Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bad-script-latin.woff2") format("woff2");
}

/* The compact Oxford image now dissolves into the header, as the large hero does. */
.brand {
  gap: 11px;
}
.brand-photo {
  width: 68px;
  height: 80px;
  flex: none;
  box-shadow: none;
  -webkit-mask-image: radial-gradient(ellipse 77% 75% at 53% 45%, #000 24%, #000d 39%, transparent 92%);
  mask-image: radial-gradient(ellipse 77% 75% at 53% 45%, #000 24%, #000d 39%, transparent 92%);
}
.brand-photo img {
  object-position: 60% center;
}
.brand-wordmark {
  width: 180px;
  min-width: 0;
  align-items: stretch;
}
.brand-main {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font: 500 2.2rem/1 var(--sans);
  letter-spacing: -.055em;
}
.brand-main > span:first-child {
  margin-right: 0;
}
.brand-future-word {
  display: inline-flex;
  align-items: flex-end;
  white-space: nowrap;
}
.brand-f {
  display: block;
  position: relative;
  width: 36px;
  height: 59px;
  flex: none;
  align-self: flex-end;
  margin: 0 -9px -10px 0;
  transform: none;
  letter-spacing: normal;
}
.brand-f svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.brand-letter {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.brand-descriptor {
  position: static;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 6px;
  margin: 5px 0 0;
  font: 600 .62rem/1.2 var(--sans);
  letter-spacing: 0;
}
.brand-descriptor::before,
.brand-descriptor::after {
  content: none;
}
.brand-rule {
  display: block;
  height: 1px;
  min-width: 5px;
  flex: 1;
  background: currentColor;
}
.brand-descriptor > span:nth-child(2) {
  white-space: nowrap;
}
.brand-signature {
  align-self: center;
  margin: 6px 0 0;
  font: 400 1.47rem/1.05 "Bad Script", cursive;
  letter-spacing: -.018em;
  transform: rotate(-2deg);
}

@media (max-width: 1200px) {
  .brand { gap: 9px; }
  .brand-photo { width: 55px; height: 66px; }
  .brand-wordmark { width: 157px; }
  .brand-main { height: 35px; font-size: 1.9rem; }
  .brand-f { width: 31px; height: 50px; margin-right: -8px; margin-bottom: -8px; }
  .brand-descriptor { gap: 4px; margin-top: 4px; font-size: .53rem; }
  .brand-signature { margin-top: 4px; font-size: 1.3rem; }
}
@media (max-width: 670px) {
  .brand { gap: 6px; }
  .brand-photo { width: 45px; height: 55px; }
  .brand-wordmark { width: 138px; }
  .brand-main { height: 30px; font-size: 1.7rem; }
  .brand-f { width: 26px; height: 43px; margin-right: -7px; margin-bottom: -7px; }
  .brand-descriptor { gap: 3px; margin-top: 3px; font-size: .46rem; }
  .brand-signature { margin-top: 3px; font-size: 1.13rem; }
}
@media (max-width: 440px) {
  .brand-photo { width: 37px; height: 49px; }
  .brand-wordmark { width: 124px; }
  .brand-main { height: 26px; font-size: 1.54rem; }
  .brand-f { width: 23px; height: 39px; margin-right: -6px; margin-bottom: -6px; }
  .brand-descriptor { font-size: .42rem; }
  .brand-signature { font-size: 1.02rem; }
}