/* ==========================================================================
   Brand lockup

   Stands in for the logo image in the navbar and footer: the project's
   initial in a bordered tile, followed by the project name, both set in the
   heading face so the mark reads as part of the same type system as the
   headings rather than as dropped-in artwork.

   Colours come from the existing brand tokens, so a project recolour still
   only means changing the variables in moon-glade.webflow.css.
   ========================================================================== */

/* The logo image sat in a fixed 12.5rem box. The lockup is text, so it has
   to size to its own content or the name gets clipped. */
.nav_logo-link,
.footer_logo-link {
  width: auto;
}

/* The footer's first grid column was a fixed 12.5rem, cut to the old logo
   image. The lockup is wider than that and would be clipped, so the column
   follows its content instead. Only the multi-column desktop layout needs
   this: below 992px the grid is already a single full-width column, and an
   unguarded override here would win over that and break it. */
@media screen and (min-width: 992px) {
  .footer_grid {
    grid-template-columns: auto 4fr 1fr;
  }
}

.brand {
  align-items: center;
  display: inline-flex;
  gap: 0.625rem;
}

.brand_mark {
  border: 0.125rem solid var(--base-color-brand--gold);
  border-radius: 0.5rem;
  color: var(--base-color-brand--gold);
  flex: none;
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  font-weight: 700;

  /* Fixed square, glyph centred inside it. line-height:1 trims the line box
     to the glyph so flex centring lands the M on the tile's midline; leave
     it at the font's default and the reserved descender space drops the
     letter visibly low. */
  align-items: center;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  line-height: 1;
  width: 2.5rem;
}

.brand_name {
  color: var(--text-color--text-alternate);
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* On the narrowest screens the name competes with the menu button, so the
   whole lockup steps down rather than wrapping or overflowing. */
@media screen and (max-width: 479px) {
  .brand {
    gap: 0.5rem;
  }

  .brand_mark {
    font-size: 1.25rem;
    height: 2.125rem;
    width: 2.125rem;
  }

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