/*** MP-GENERAL.CSS v1.0
- Site-wide visual primitives that recur across multiple components.
- Loads before every other `mp-*` and `cmp-*` sheet so component CSS can
  scope-add without restating shared properties.
- Components attach the generic class alongside their semantic class:
    <span class="archive-eyebrow eyebrow">
    <h1 class="agent-title title-display">
  The semantic class keeps layout/positioning hooks (grid-area, alignment).
  The generic class keeps typography. Change typography here once and every
  occurrence updates.
##########################
***/

/* #region # EYEBROW ########################## */
/* Sans small-caps used everywhere as a header micro-label: page eyebrows,
   identity meta strips, card meta rows, section titles. */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  font-weight: 400;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-shade);
}

/* Smaller variant — for field labels nested inside meta strips
   (Born / Died / Affiliation / etc.) and for embed captions. */
.eyebrow--small {
  font-size: var(--type-2xs);
}

/* Eyebrow link — currentColor hairline under the link, no underline. */
.eyebrow a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.eyebrow a:hover {
  color: var(--color-black);
}

/* #endregion */

/* #region # TITLE-DISPLAY ########################## */
/* The 4em serif page title used on every detail / archive identity block. */

.title-display {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-3xl);
  line-height: 1em;
  letter-spacing: -0.01em;
  color: var(--color-black);
}

@media (max-width: 800px) {
  .title-display { font-size: 2.5em; }
}

/* #endregion */

/* #region # DESCRIPTION-DISPLAY ########################## */
/* The serif lede paragraph that follows a `.title-display`. Used by every
   archive / label / show / work identity block. */

.description-display {
  margin: 0;
  max-width: 60ch;
  font-family: var(--font-serif);
  font-size: 1.35em;
  line-height: 1.45em;
  color: var(--color-night);
}

/* #endregion */

/* #region # EMPTY-MESSAGE ########################## */
/* Centered fallback copy for empty grids/lists (postcards, workcards,
   ledgercards). */

.empty-message {
  margin: 0;
  padding: var(--space-md) 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-shade);
}

/* #endregion */