/*
 * MarineCraft Journal — article house style (.mcj-post)
 *
 * Canonical stylesheet for all Marine Journal posts. Enqueued once on singular
 * views instead of being inlined per-post. Scoped to .mcj-post so it is inert
 * on pages that don't use the journal wrapper.
 *
 * Source of truth: this file. Do NOT paste this back inline into post content.
 *
 * COLOUR TOKENS. Ink, muted and ash come from the site-wide custom properties
 * defined in mcg-site.css (--mcg-ink / --mcg-muted / --mcg-ash), with hex
 * fallbacks so articles still render correctly if that sheet ever fails to
 * load. The journal previously carried its own warm greys (#1a1614, #4a4440,
 * #726960) against the site's cooler set, which made articles read as a
 * slightly different site. Do not reintroduce local colour values here.
 *
 * The serif body face IS deliberate and is not an inconsistency: long-form
 * articles use Georgia while pages and the homepage use the system sans. That
 * editorial/marketing split is intentional. Only the colour tokens are shared.
 */
.mcj-post { font-family: Georgia, 'Times New Roman', serif; line-height: 1.75; color: var(--mcg-ink, #1a1f2e); }
.mcj-post *, .mcj-post *::before, .mcj-post *::after { box-sizing: border-box; }

.mcj-pub-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(26,31,46,.12); }
.mcj-pub-logo { font-family: Georgia, serif; font-size: 1rem; font-weight: 700; color: #0b3d6e; letter-spacing: -.01em; }
.mcj-pub-logo span { color: #b8290e; }
.mcj-pub-divider { color: rgba(26,31,46,.25); }
.mcj-section-label { font-family: sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #b8290e; background: #f5ece9; padding: 2px 8px; border-radius: 2px; }

.mcj-deck { font-style: italic; font-size: 16px; color: var(--mcg-muted, #3f4a5c); line-height: 1.65; border-left: 3px solid #b8290e; padding-left: 1.2rem; margin: 0 0 1.25rem; }
.mcj-meta { font-family: sans-serif; font-size: 13px; color: var(--mcg-ash, #525d6e); margin: 0 0 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(26,31,46,.1); }
.mcj-meta strong { color: #0b3d6e; font-weight: 600; }
.mcj-meta a { color: #0b3d6e; text-decoration: none; }
.mcj-meta time { color: var(--mcg-muted, #3f4a5c); }

.mcj-stats { display: flex; flex-wrap: wrap; background: #0b3d6e; border-radius: 4px; margin: 0 0 2.5rem; overflow: hidden; }
.mcj-stat { flex: 1 1 120px; padding: .85rem 1rem; text-align: center; border-right: 1px solid rgba(255,255,255,.1); }
.mcj-stat:last-child { border-right: none; }
.mcj-stat-num { display: block; font-family: Georgia, serif; font-size: 1.8rem; font-weight: 700; color: #7ec8e3; line-height: 1; }
.mcj-stat-label { display: block; font-family: sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,1); margin-top: 4px; }

.mcj-post h2 { font-family: Georgia, serif; font-size: 1.45rem; font-weight: 700; color: var(--mcg-ink, #1a1f2e); margin: 2.5rem 0 .75rem; padding-bottom: .4rem; border-bottom: 2px solid #0b3d6e; }
.mcj-post h3 { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 700; color: #0b3d6e; margin: 1.75rem 0 .5rem; }

.mcj-post p { font-size: 16px; color: var(--mcg-ink, #1a1f2e); margin: 0 0 1.3rem; }
.mcj-dropcap::first-letter { font-family: Georgia, serif; font-size: 4rem; font-weight: 700; float: left; line-height: .82; margin: .08em .1em 0 0; color: #0b3d6e; }

.mcj-pullquote { margin: 2rem 0; padding: 1.4rem 1.5rem 1.4rem 2rem; background: #f0f5fa; border-left: 4px solid #0b3d6e; }
.mcj-pullquote p { font-family: Georgia, serif; font-size: 16px; font-style: italic; color: var(--mcg-ink, #1a1f2e); line-height: 1.5; margin: 0; font-weight: 400; }

.mcj-infobox { border: 1px solid rgba(11,61,110,.2); border-radius: 4px; overflow: hidden; margin: 2rem 0; }
.mcj-infobox-head { background: #0b3d6e; color: rgba(255,255,255,.9); font-family: sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .55rem 1rem; }
.mcj-infobox-body { padding: 1rem 1.1rem; background: #fff; }
.mcj-infobox-body p { font-family: sans-serif; font-size: 16px; color: var(--mcg-muted, #3f4a5c); line-height: 1.55; margin: 0 0 .6rem; }
.mcj-infobox-body p:last-child { margin: 0; }
.mcj-infobox-body strong { color: var(--mcg-ink, #1a1f2e); font-weight: 600; }

.mcj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 1.25rem 0 1.75rem; }
.mcj-griditem { background: #f0f5fa; border-left: 3px solid #0b3d6e; border-radius: 2px; padding: .85rem .9rem; }
.mcj-griditem-name { font-family: sans-serif; font-weight: 700; font-size: 16px; color: var(--mcg-ink, #1a1f2e); margin-bottom: 4px; text-transform: capitalize; }
.mcj-griditem-detail { font-family: sans-serif; font-size: 16px; color: var(--mcg-ash, #525d6e); line-height: 1.45; }

.mcj-warning { background: #fff8f0; border-left: 4px solid #b8290e; border-radius: 0 4px 4px 0; padding: 1rem 1.1rem; margin: 1.5rem 0; }
.mcj-warning p { font-family: sans-serif; font-size: 16px; color: var(--mcg-muted, #3f4a5c); margin: 0; line-height: 1.55; }
.mcj-warning strong { color: #b8290e; }

.mcj-checklist { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.mcj-checklist li { font-family: sans-serif; font-size: 16px; color: var(--mcg-ink, #1a1f2e); padding: .45rem 0 .45rem 2rem; border-bottom: 0.5px solid rgba(26,31,46,.08); position: relative; line-height: 1.5; }
.mcj-checklist li:last-child { border-bottom: none; }
.mcj-checklist li::before { content: '✓'; position: absolute; left: 0; color: #0b3d6e; font-weight: 700; font-size: 14px; }

.mcj-faq { margin: 2rem 0; }
.mcj-faq-item { border-bottom: 0.5px solid rgba(26,31,46,.1); padding: 1rem 0; }
.mcj-faq-item:last-child { border-bottom: none; }
.mcj-faq-q { font-family: sans-serif; font-size: 16px; font-weight: 700; color: #0b3d6e; margin: 0 0 .4rem; }
.mcj-faq-a { font-family: sans-serif; font-size: 16px; color: var(--mcg-muted, #3f4a5c); line-height: 1.6; margin: 0; }

.mcj-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(26,31,46,.1); }
.mcj-tag { font-family: sans-serif; font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 2px; background: #eaf1f8; color: #0b3d6e; letter-spacing: .06em; text-transform: uppercase; }

.mcj-sources { font-family: sans-serif; font-size: 13px; color: var(--mcg-ash, #525d6e); margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(26,31,46,.08); line-height: 1.7; }
.mcj-sources strong { color: var(--mcg-muted, #3f4a5c); }

@media (max-width: 600px) {
  .mcj-stats { flex-direction: column; }
  .mcj-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .mcj-stat:last-child { border-bottom: none; }
}