/* Love · Meridian Heart iframe typography refinement.
   Inject via <link rel="stylesheet" href="./typography-refinement.css"> AFTER the inline <style>.
   Root 16px. Roles: meta .75rem, label .875rem, support .9375rem, body 1rem.
   h1, .dek, .q, .reading h2, the canvas and [hidden] states are untouched. */

:root {
  --lm-meta: 0.75rem;
  --lm-label: 0.875rem;
  --lm-support: 0.9375rem;
  --lm-body: 1rem;
  --lm-mute: #c9c1ae; /* slightly brighter than --mute for small text on navy */
}

.tag { font-size: var(--lm-meta); letter-spacing: 0.08em; }
.k { font-size: var(--lm-label); letter-spacing: 0.02em; text-transform: none; }

figcaption { font-size: var(--lm-support); color: var(--lm-mute); }

.mstate { font-size: var(--lm-label); letter-spacing: 0.03em; text-transform: none; }
.mtext { font-size: var(--lm-support); }
.mplaque .btn { white-space: normal; }

.btn, select { font-size: var(--lm-body); }
.row .btn { max-width: 100%; white-space: normal; }

.sign { font-size: var(--lm-label); }
.sign span { overflow-wrap: anywhere; }
.legend { font-size: var(--lm-label); color: var(--lm-mute); }

#status { color: var(--lm-mute); }
.pair { font-size: var(--lm-support); color: var(--lm-mute); }
.note { font-size: var(--lm-support); line-height: 1.55; color: var(--lm-mute); }
.fb { font-size: var(--lm-support); }

@media (max-width: 899px) {
  .tag { font-size: var(--lm-meta); }
}

/* 320px and enlarged text: chips keep a readable minimum width. */
@media (max-width: 360px) {
  .signs { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}