/*
 * market-notes.css — styling for authored blocks inside an archived issue.
 *
 * These classes are the contract between what you build in Mailchimp and what
 * the archive renders. Wrap a designed block in one of them and mn-clean.js
 * passes it through untouched; anything else still flattens to prose.
 *
 * Vocabulary:
 *   .mn-kicker   section label above a heading
 *   .mn-stats    row of value/label cells;  .mn-stat > dt (value) + dd (label)
 *   .mn-card     listing card;  .mn-card-title, .mn-card-meta inside it
 *   .mn-cta      a link that should read as a button
 *   .mn-bars     comparison rows;  .mn-bar > .mn-bar-label + .mn-bar-value
 *   .mn-note     small print under a block (source lines, disclaimers)
 *
 * Palette and type follow the issue template: gold #8a6d3b, rule #e6e0d8,
 * tint #faf8f5, body #1c1c1c, secondary #6b6b6b.
 */

/* ------------------------------------------------------------ section label */
.mn-body .mn-kicker {
  display: block;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #a08d6f;
  font-weight: 600;
  margin: 2.6rem 0 .5rem;
}

/* ------------------------------------------------------------------- stats */
.mn-body .mn-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 1.4rem 0 1.6rem;
  border: 1px solid #e6e0d8;
  border-radius: 3px;
  background: #faf8f5;
  overflow: hidden;
}
.mn-body .mn-stat {
  flex: 1 1 0;
  min-width: 7.5rem;
  margin: 0;
  padding: .95rem 1rem;
  border-right: 1px solid #e6e0d8;
}
.mn-body .mn-stat:last-child { border-right: none; }
.mn-body .mn-stat dt {
  font-size: 17px;
  font-weight: 600;
  color: #1c1c1c;
  line-height: 1.25;
  margin: 0 0 .18rem;
  /* Long values wrap rather than truncate. */
  overflow-wrap: anywhere;
}
.mn-body .mn-stat dd {
  margin: 0;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a7f72;
  line-height: 1.35;
}

/* -------------------------------------------------------------------- card */
.mn-body .mn-card {
  margin: 1.8rem 0 2.2rem;
  padding: 0 0 1.3rem;
  border-bottom: 1px solid #e6e0d8;
}
.mn-body .mn-card img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 1rem;
  border-radius: 2px;
}
.mn-body .mn-card-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: #1c1c1c;
  margin: 0 0 .25rem;
}
.mn-body .mn-card-meta {
  font-size: 14px;
  color: #6b6b6b;
  line-height: 1.5;
  margin: 0 0 .9rem;
}

/* --------------------------------------------------------------------- cta */
.mn-body .mn-cta,
.mn-body a.mn-cta {
  display: inline-block;
  margin: .5rem 0 1.4rem;
  padding: .62rem 1.15rem;
  background: #1c1c1c;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 2px;
  line-height: 1.35;
}
.mn-body .mn-cta:hover,
.mn-body a.mn-cta:hover { background: #8a6d3b; color: #fff; }

/* -------------------------------------------------------------------- bars */
.mn-body .mn-bars { margin: 1.3rem 0 1rem; }
.mn-body .mn-bar {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .5rem 0;
  border-bottom: 1px solid #f0ece6;
}
.mn-body .mn-bar:last-child { border-bottom: none; }
.mn-body .mn-bar-label {
  flex: 1 1 auto;
  font-size: 14px;
  color: #4a4a4a;
  line-height: 1.45;
}
.mn-body .mn-bar-value {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 600;
  color: #1c1c1c;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- small print */
.mn-body .mn-note {
  font-size: 13px;
  line-height: 1.55;
  color: #8a7f72;
  margin: -.4rem 0 1.6rem;
}

/* ------------------------------------------------------------------- mobile */
@media (max-width: 640px) {
  .mn-body .mn-stats { flex-direction: column; }
  .mn-body .mn-stat {
    border-right: none;
    border-bottom: 1px solid #e6e0d8;
    padding: .8rem 1rem;
  }
  .mn-body .mn-stat:last-child { border-bottom: none; }
  .mn-body .mn-card-title { font-size: 18px; }
}