/* ==========================================================================
   Marissa's Home — blog (loaded after styles.css and home.css on /blog pages)
   Reuses the homepage tokens: navy text, coral and gold as fills and accents.
   ========================================================================== */

/* Blog landing page ------------------------------------------------------ */
.mh-blog-hero { padding: 72px 0 64px; background: var(--brand-blush); text-align: center; }
.mh-blog-hero h1 { font-size: clamp(46px, 6vw, 80px); line-height: 1; }
.mh-blog-hero h1 .mh-script { color: var(--brand-coral); font-size: 1.1em; }
.mh-blog-hero .mh-lede { max-width: 560px; margin: 20px auto 0; }

.mh-posts { display: grid; gap: 32px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.mh-posts li { display: flex; }
.mh-post-card {
  flex: 1; display: flex; flex-direction: column; text-decoration: none; color: var(--brand-navy);
  border: 2px solid var(--brand-navy); border-radius: 12px; overflow: hidden; background: #ffffff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mh-post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(22,48,90,.12); }
.mh-post-card img { width: 100%; height: 240px; object-fit: cover; border-bottom: 8px solid var(--brand-gold); }
.mh-post-card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.mh-post-card h2 { font-size: 32px; line-height: 1.08; }
.mh-post-card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-soft); }
.mh-post-card .mh-shop__cta { margin-top: auto; }

.mh-post-meta { font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-navy); }

/* Single post ------------------------------------------------------------ */
.mh-article { padding: 56px 0 96px; }
.mh-article__head { max-width: 820px; margin: 0 auto; text-align: center; }
.mh-crumbs { margin-bottom: 22px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mh-crumbs a { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 3px; }
.mh-article h1 { font-size: clamp(40px, 5.4vw, 66px); line-height: 1.04; margin-top: 14px; }
.mh-article__cover { max-width: 1000px; margin: 44px auto 0; }
.mh-article__cover img { height: auto; aspect-ratio: 4 / 3; max-height: 600px; }

.mh-prose { max-width: 720px; margin: 56px auto 0; font-size: 18px; line-height: 1.75; color: var(--text-soft); }
.mh-prose > * + * { margin-top: 1.2em; }
.mh-prose h2 {
  margin-top: 2.2em; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.1; color: var(--brand-navy);
}
.mh-prose h2::before { content: ""; display: block; width: 36px; height: 3px; margin-bottom: 18px; background: var(--brand-coral); }
.mh-prose a { color: var(--brand-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mh-prose a:hover { text-decoration-color: var(--brand-coral); }
.mh-prose strong { color: var(--brand-navy); font-weight: 900; }
.mh-prose ul { padding-left: 0; list-style: none; }
.mh-prose ul li { position: relative; padding-left: 28px; }
.mh-prose ul li + li { margin-top: .6em; }
.mh-prose ul li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--brand-coral); }
.mh-prose .mh-intro { font-size: 21px; line-height: 1.65; color: var(--brand-navy); }

.mh-prose figure { margin: 2em 0; }
.mh-prose figure img { width: 100%; height: auto; }
.mh-prose .mh-frame { box-shadow: 0 16px 40px rgba(22,48,90,.12); }
.mh-prose figure.mh-figure--narrow { max-width: 520px; margin-left: auto; margin-right: auto; }

.mh-table-wrap { overflow-x: auto; }
.mh-table { width: 100%; border-collapse: collapse; font-size: 17px; color: var(--brand-navy); }
.mh-table caption { caption-side: bottom; padding-top: 10px; font-size: 14px; text-align: left; color: var(--text-soft); }
.mh-table th, .mh-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #e6e9ef; }
.mh-table thead th { background: var(--brand-navy); color: #ffffff; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.mh-table td:not(:first-child), .mh-table thead th:not(:first-child) { text-align: right; }
.mh-table tbody th { font-weight: 700; }
.mh-table tr.mh-row--hot { background: var(--brand-blush); }

.mh-sources { max-width: 720px; margin: 64px auto 0; padding-top: 28px; border-top: 2px dashed var(--brand-coral); font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.mh-sources h2 { font-family: inherit; font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.mh-sources ol { margin-top: 10px; padding-left: 20px; display: grid; gap: 8px; }
.mh-sources a { color: var(--brand-navy); text-decoration: underline; word-break: break-word; }

.mh-article__back { max-width: 720px; margin: 48px auto 0; }

@media (max-width: 720px) {
  .mh-blog-hero { padding: 48px 0 44px; }
  .mh-posts { grid-template-columns: 1fr; }
  .mh-post-card img { height: 200px; }
  .mh-article { padding: 36px 0 64px; }
  .mh-article__cover { margin-top: 32px; }
  .mh-prose { margin-top: 40px; font-size: 17px; }
  .mh-prose .mh-intro { font-size: 19px; }
  .mh-table th, .mh-table td { padding: 12px 10px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-post-card:hover { transform: none; }
}