/* ==============================================================================
   THE STUDIO'S MARK (templates/partials/brand.html, doc/07, ADR-041)

   The capital of the old site's logo, "M | C" and "Arquitectos" under
   them, in one composition wherever it appears: the capital on the left,
   the name and the tagline stacked beside it. Three sizes follow the
   capital's height (32 px in the header, 40 px in the footer and the
   title bands, 48 px in the home page's hero), each with its own type.

   Compact ("M | C"), the rest of each surname waits in a one-column grid
   at 0fr and opens to 1fr in 200 ms under the pointer or the keyboard's
   focus, with no script. Expanded, it is open from the start. With
   prefers-reduced-motion it is open for good: a mark that jumps from two
   letters to two words is still movement.
   ============================================================================== */

.brand {
  /* The type of the 32 px mark; the larger ones change these two. */
  --brand-name-size: 1.125rem;
  --brand-tagline-size: 0.625rem;

  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
}

.brand:hover {
  color: inherit;
  text-decoration: none;
}

.brand--40 {
  --brand-name-size: 1.25rem;
  --brand-tagline-size: 0.6875rem;

  gap: 0.75rem;
}

.brand--48 {
  --brand-name-size: 1.5rem;
  --brand-tagline-size: 0.75rem;

  gap: 0.875rem;
}

/* The PNG is a black silhouette drawn at its width and height attributes;
   it never shrinks when the row is tight, the name gives way instead. On
   the paper it follows the paper, not the mode: --mark-filter is none on
   a light paper and invert(1) on a dark one (palettes.css), so a palette
   whose dark mode kept a pale paper would still draw it black. */
.brand__mark {
  flex: none;
  display: block;
  filter: var(--mark-filter);
}

.brand__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.brand__name {
  display: inline-flex;
  align-items: center;
  /* The mark is the logo, not a title: its letter does not follow the
     titles' face (ADR-046). */
  font-family: var(--font-brand);
  font-size: var(--brand-name-size);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand__word {
  display: inline-flex;
}

.brand__rest {
  display: inline-grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.brand__rest > span {
  overflow: hidden;
}

.brand--expanded .brand__rest,
.brand:hover .brand__rest,
.brand:focus-visible .brand__rest {
  grid-template-columns: 1fr;
}

.brand__bar {
  margin-inline: 0.3em;
  font-weight: 400;
  opacity: 0.7;
}

/* The micro label of the theme (13 px is the site's floor for running
   text; this is one word set wide in capitals, as the theme's logo
   tagline is). */
.brand__tagline {
  margin-top: 0.375em;
  font-size: var(--brand-tagline-size);
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
}

/* On a small phone the two open surnames of the larger marks would not
   fit beside their capital (about 300 px at 320 px of screen): the words
   come down to the header's size and the capital keeps its own. */
@media (max-width: 24.9375em) {
  .brand--40,
  .brand--48 {
    --brand-name-size: 1.125rem;
    --brand-tagline-size: 0.625rem;
  }
}

/* Over a photo: white letters and the capital inverted to white, in any
   palette and mode, since the photo is behind it and not the paper. */
.brand--light {
  color: var(--overlay-text);
}

.brand--light .brand__mark {
  filter: invert(1);
}

.brand--dark {
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .brand__rest {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   A mark set on a line of its own over a title (the home page's hero, the
   title bands): the paragraph that holds it, with the space under it.
   The hero's fades in over 600 ms once, and not at all with less motion.
   -------------------------------------------------------------------------- */
.brand-line {
  margin: 0 0 var(--space-5);
  line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .brand-line--fade-in {
    animation: brand-fade-in 600ms ease-out both;
  }
}

@keyframes brand-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   A mark as a heading (the studio's details on Contacto, blocks/text.html;
   the footer's first column): the heading's line height would only add
   air over and under the capital.
   -------------------------------------------------------------------------- */
.block-text__brand {
  line-height: 1;
}