/* Text brand lockup for the navbar and footer.
 *
 * Replaces the logo image that used to sit in both places: the project's
 * initial in a gold keyline box, then the project name beside it, both in the
 * heading face (Cormorant Garamond) the rest of the site sets headings in.
 * Nothing here depends on a raster asset, so the brand stays crisp at any
 * density and costs no request.
 *
 * images/favicon.png and images/webclip.png are the same mark, rendered from
 * these colours and this face at a 512px master and downsampled. The favicon
 * drops the keyline box: at 32px the box and its inner padding leave too
 * little room for the letter to read.
 *
 * Loaded after moon-glade.webflow.css so these rules win over the export's
 * own .nav_logo-link / .footer_logo-link sizing, which was measured for the
 * image rather than for text.
 */

/* The export pinned both links to the image's 12.5rem. The lockup sizes itself,
   and it reads as one unit only on a single line, so it must never wrap. */
.nav_logo-link,
.footer_logo-link {
  align-items: center;
  column-gap: .625rem;
  width: auto;
  white-space: nowrap;
  text-decoration: none;
  display: flex;
}

.nav_logo-link {
  flex: none;
}

.brand_mark,
.brand_name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  line-height: 1;
}

/* The initial sits in a gold keyline box. Fixed square so the box stays square
   whatever letter it holds, and flex-centred because Cormorant's glyphs do not
   sit centred in their own line box. */
.brand_mark {
  color: var(--base-color-brand--gold);
  border: 2px solid var(--base-color-brand--gold);
  border-radius: .5rem;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  display: flex;
}

.brand_name {
  color: var(--text-color--text-alternate);
  letter-spacing: .01em;
  font-size: 1.25rem;
}

/* Above 991px the footer grid hands the brand a first column measured for the
   old image; the boxed lockup needs slightly more to stay on one line. The
   width comes out of the disclaimer's 4fr, which barely notices it. At 991px
   and below the export collapses that grid to a single column, where the
   lockup already has the room. */
@media screen and (min-width: 992px) {
  .footer_grid {
    grid-template-columns: 14rem 4fr 1fr;
  }
}

@media screen and (max-width: 479px) {
  .brand_mark {
    border-radius: .4375rem;
    width: 2.125rem;
    height: 2.125rem;
    font-size: 1.25rem;
  }

  .brand_name {
    font-size: 1.0625rem;
  }
}