/**
 * Midwest Armor — Field Journal (blog index).
 * Mist (day) palette, Inter + JetBrains Mono (loaded once by the chrome).
 * Namespaced .mwj-* so nothing collides with the legacy .ma-* blog CSS.
 * Single breakpoint at 820px, matching the rest of the site.
 */

.mwj-body,
.mwj-masthead,
.mwj-filterbar,
.mwj-dispatch {
	--ink: #141416;
	--dark: #15171a;
	--paper: #fff;
	--muted: #43464b;
	--muted-2: #3a3d42;
	--line: rgba(20, 20, 22, 0.1);
	--line-soft: rgba(20, 20, 22, 0.07);
	--mist: #f7f8f9;
	--sans: 'Inter', system-ui, -apple-system, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--wrap: 1180px;
}

/* Masthead - the one dark band */
.mwj-masthead {
	background:
		linear-gradient(rgba(21, 23, 26, 0) 55%, rgba(21, 23, 26, 0.55)),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.028) 0 12px, transparent 12px 26px),
		var(--dark);
	color: #eeeff1;
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
}
.mwj-masthead__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 64px 40px 56px;
}
.mwj-crumbs { font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(238, 239, 241, 0.5); margin-bottom: 28px; }
.mwj-crumbs a { color: rgba(238, 239, 241, 0.5); text-decoration: none; }
.mwj-crumbs a:hover { color: #eeeff1; }
.mwj-crumbs span { margin: 0 8px; }
.mwj-crumbs .is-current { color: #eeeff1; margin: 0; }
.mwj-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 2.4px; font-weight: 600; text-transform: uppercase; color: rgba(238, 239, 241, 0.62); margin-bottom: 18px; }
.mwj-masthead__title { font-family: var(--sans); font-weight: 600; font-size: clamp(52px, 8vw, 92px); letter-spacing: -3.6px; line-height: 0.92; margin: 0; color: #fff; }
.mwj-masthead__dek { font-size: 17.5px; line-height: 1.6; max-width: 620px; margin: 22px 0 0; color: rgba(238, 239, 241, 0.78); }
.mwj-statrail { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 34px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(238, 239, 241, 0.55); }
.mwj-statrail b { color: #eeeff1; font-weight: 700; }

/* Sticky filter + search bar */
.mwj-filterbar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--paper);
	border-bottom: 1px solid var(--ink);
	font-family: var(--mono);
}
.mwj-filterbar__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.mwj-tabs { display: flex; flex-wrap: wrap; }
.mwj-tab {
	appearance: none; background: none; border: 0; cursor: pointer;
	font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; font-weight: 700;
	text-transform: uppercase; color: var(--muted); padding: 20px 22px;
	border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mwj-tab sup { font-size: 8px; color: var(--ink); margin-left: 3px; vertical-align: super; }
.mwj-tab:hover { color: var(--ink); }
.mwj-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.mwj-search { display: flex; align-items: center; gap: 8px; width: 268px; border: 1px solid var(--line); padding: 0 12px; height: 38px; transition: border-color 0.15s; }
.mwj-search:focus-within { border-color: var(--ink); }
.mwj-search svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.mwj-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.6px; color: var(--ink); }
.mwj-search input::placeholder { color: var(--muted); letter-spacing: 1px; }

/* Body container */
.mwj-body { max-width: var(--wrap); margin: 0 auto; padding: 40px 40px 80px; font-family: var(--sans); color: var(--ink); }
.mwj-resultcount { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 4px 0 24px; }
.mwj-resultcount b { color: var(--ink); font-weight: 700; }

/* Featured field-manual pillar */
.mwj-featured { display: grid; grid-template-columns: 1.15fr 1fr; border: 1px solid var(--line); margin-bottom: 40px; transition: border-color 0.18s; }
.mwj-featured:hover { border-color: var(--ink); }
.mwj-featured__media { position: relative; display: block; background: var(--mist); overflow: hidden; min-height: 340px; }
.mwj-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mwj-featured__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--muted); }
.mwj-featured__body { padding: 40px; display: flex; flex-direction: column; align-items: flex-start; }
.mwj-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; font-weight: 700; color: #fff; background: var(--ink); padding: 5px 10px; text-transform: uppercase; }
.mwj-featured__cat { font-family: var(--mono); font-size: 10px; letter-spacing: 1.8px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin: 18px 0 12px; }
.mwj-featured__title { font-family: var(--sans); font-weight: 600; font-size: 38px; letter-spacing: -1.6px; line-height: 1.06; margin: 0; text-wrap: balance; }
.mwj-featured__dek { font-size: 15.5px; line-height: 1.6; color: var(--muted-2); margin: 16px 0 24px; }
.mwj-featured__meta { font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 16px 0 0; }
.mwj-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; font-weight: 700; text-transform: uppercase; text-decoration: none; padding: 13px 22px; }
.mwj-btn em { font-style: normal; transition: transform 0.18s; }
.mwj-btn:hover em { transform: translateX(3px); }

/* Post grid + card */
.mwj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.mwj-card { border: 1px solid var(--line-soft); background: var(--paper); display: flex; flex-direction: column; transition: border-color 0.18s, transform 0.18s; }
.mwj-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.mwj-card.is-hidden { display: none; }
.mwj-card__media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--mist); overflow: hidden; }
.mwj-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mwj-card__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; color: var(--muted); }
.mwj-card__body { padding: 18px 18px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.mwj-card__meta { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.mwj-card__cat { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; }
.mwj-card__cat i { width: 7px; height: 7px; background: var(--ink); display: inline-block; }
.mwj-card__title { font-family: var(--sans); font-weight: 600; font-size: 19.5px; letter-spacing: -0.45px; line-height: 1.22; margin: 0 0 10px; }
.mwj-card__title a { color: var(--ink); text-decoration: none; }
.mwj-card__title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.mwj-card__excerpt { font-size: 13.5px; line-height: 1.62; color: var(--muted-2); margin: 0 0 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mwj-card__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; }
.mwj-card__date { color: var(--muted); }
.mwj-card__read { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; text-decoration: none; }
.mwj-card__read em { font-style: normal; transition: transform 0.18s; }
.mwj-card:hover .mwj-card__read em { transform: translateX(3px); }

/* Empty state + pagination */
.mwj-empty { padding: 60px 0; text-align: center; font-family: var(--mono); }
.mwj-empty p { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.mwj-empty button, .mwj-pager button { appearance: none; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; font-weight: 700; text-transform: uppercase; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); padding: 11px 18px; }
.mwj-empty button:hover { background: var(--ink); color: #fff; }
.mwj-pager { display: flex; gap: 0; justify-content: center; margin-top: 44px; }
.mwj-pager button { min-width: 46px; height: 46px; border: 1px solid var(--line); border-left-width: 0; padding: 0 14px; color: var(--ink); }
.mwj-pager button:first-child { border-left-width: 1px; }
.mwj-pager button:hover:not(:disabled) { background: var(--mist); }
.mwj-pager button.is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.mwj-pager button:disabled { color: var(--muted); cursor: default; }
.mwj-pager button.is-gap { border: 0; min-width: 32px; cursor: default; color: var(--muted); }
.mwj-noposts { padding: 80px 0; text-align: center; color: var(--muted); font-family: var(--sans); }

/* Dispatch band */
.mwj-dispatch { background: var(--ink); color: #fff; }
.mwj-dispatch__inner { max-width: var(--wrap); margin: 0 auto; padding: 64px 40px; font-family: var(--sans); }
.mwj-dispatch .mwj-eyebrow { color: rgba(255, 255, 255, 0.55); }
.mwj-dispatch__title { font-family: var(--sans); font-weight: 600; font-size: clamp(30px, 5vw, 44px); letter-spacing: -1.8px; line-height: 1.05; margin: 0; color: #fff; }
.mwj-dispatch__dek { font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin: 14px 0 26px; max-width: 540px; }

/* Mobile (single breakpoint, 820px) */
@media (max-width: 820px) {
	.mwj-masthead__inner { padding: 40px 22px 38px; }
	.mwj-masthead__title { letter-spacing: -2px; }
	.mwj-statrail { gap: 16px; }
	.mwj-filterbar__inner { flex-direction: column; align-items: stretch; gap: 0; padding: 0 16px; }
	.mwj-tabs { display: flex; width: 100%; }
	.mwj-tab { flex: 1 1 0; padding: 15px 4px; white-space: nowrap; text-align: center; font-size: 10px; letter-spacing: 0.8px; }
	.mwj-search { width: 100%; height: 44px; margin: 10px 0 12px; }
	.mwj-search input { font-size: 16px; }
	/* iOS does not zoom-on-focus when the field is >= 16px. */
	.mwj-body { padding: 28px 22px 60px; }
	.mwj-featured { grid-template-columns: 1fr; }
	.mwj-featured__media { min-height: 220px; aspect-ratio: 3 / 2; }
	.mwj-featured__body { padding: 28px 22px; }
	.mwj-featured__title { font-size: 28px; letter-spacing: -1px; }
	.mwj-grid { grid-template-columns: 1fr; gap: 18px; }
	.mwj-dispatch__inner { padding: 48px 22px; }
}

/* ===================== ARTICLE (single post) ===================== */
.mwj-article {
	--ink: #141416; --dark: #15171a; --paper: #fff; --muted: #43464b; --muted-2: #3a3d42;
	--line: rgba(20, 20, 22, 0.1); --line-soft: rgba(20, 20, 22, 0.07); --mist: #f7f8f9;
	--sans: 'Inter', system-ui, -apple-system, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--wrap: 1180px;
	background: #fff; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased;
}

/* Header */
.mwj-art__head { max-width: var(--wrap); margin: 0 auto; padding: 48px 40px 0; }
.mwj-crumbs--ink { color: var(--muted); }
.mwj-crumbs--ink a { color: var(--muted); }
.mwj-crumbs--ink a:hover, .mwj-crumbs--ink .is-current { color: var(--ink); }
.mwj-art__cat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.8px; font-weight: 700; text-transform: uppercase; color: var(--ink); margin: 24px 0 14px; }
.mwj-art__cat i { width: 8px; height: 8px; background: var(--ink); }
.mwj-art__title { font-family: var(--sans); font-weight: 600; font-size: clamp(34px, 5vw, 56px); letter-spacing: -2.4px; line-height: 1.02; margin: 0; text-wrap: balance; }
.mwj-art__dek { font-size: 19px; line-height: 1.55; color: var(--muted-2); max-width: 720px; margin: 18px 0 0; }
.mwj-art__metarow { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 28px 0 0; padding: 0 0 28px; border-bottom: 1px solid var(--ink); }
.mwj-art__meta { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.mwj-art__share { display: flex; gap: 8px; flex: none; }
.mwj-art__sharebtn { width: 34px; height: 34px; border: 1px solid var(--line); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); padding: 0; }
.mwj-art__sharebtn svg { width: 15px; height: 15px; }
.mwj-art__sharebtn:hover { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }

/* Two-column layout */
.mwj-art__grid { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 236px 1fr; gap: 64px; align-items: start; }
.mwj-art__rail { position: sticky; top: 28px; }
.mwj-toc { border-top: 1px solid var(--ink); padding-top: 14px; }
.mwj-toc__head { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.mwj-toc ol { list-style: none; margin: 0; padding: 0; }
.mwj-toc a { display: flex; gap: 10px; padding: 7px 0 7px 12px; border-left: 2px solid transparent; font-size: 13px; line-height: 1.35; color: var(--muted); text-decoration: none; }
.mwj-toc a:hover { color: var(--ink); }
.mwj-toc a.is-active { color: var(--ink); border-left-color: var(--ink); font-weight: 600; }
.mwj-toc__n { font-family: var(--mono); font-size: 10px; color: var(--ink); flex: none; padding-top: 2px; }
.mwj-toc__signup { margin-top: 24px; border: 1px solid var(--line); padding: 18px; }

/* Prose body */
.mwj-art__body { min-width: 0; padding-top: 40px; counter-reset: mwj-sec; }
.mwj-art__hero { margin: 0 0 32px; }
.mwj-art__hero img { width: 100%; height: auto; display: block; }
.mwj-art__body > p { font-size: 16.5px; line-height: 1.75; color: #26282c; max-width: 680px; margin: 0 0 22px; }
.mwj-art__body h2, .mwj-art__h2 { counter-increment: mwj-sec; font-family: var(--sans); font-weight: 600; font-size: 31px; letter-spacing: -0.8px; line-height: 1.15; margin: 48px 0 18px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.mwj-art__body h2::before, .mwj-art__h2::before { content: counter(mwj-sec, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; }
.mwj-art__body h3 { font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -0.4px; margin: 30px 0 10px; }
.mwj-art__body ul { max-width: 680px; margin: 0 0 22px; padding: 0; list-style: none; }
.mwj-art__body ul li { position: relative; padding-left: 22px; margin: 0 0 13px; font-size: 16px; line-height: 1.62; color: #26282c; }
.mwj-art__body ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--ink); }
.mwj-art__body ol { max-width: 680px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: mwj-ol; }
.mwj-art__body ol li { position: relative; padding-left: 30px; margin: 0 0 13px; font-size: 16px; line-height: 1.62; color: #26282c; counter-increment: mwj-ol; }
.mwj-art__body ol li::before { content: counter(mwj-ol, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.mwj-art__body a { color: #b5701c; text-decoration: underline; text-underline-offset: 2px; }
.mwj-art__body a:hover { color: var(--ink); }
.mwj-art__body strong { font-weight: 700; }
.mwj-art__body img { max-width: 100%; height: auto; }
.mwj-art__body blockquote { margin: 28px 0; padding: 22px 24px; background: var(--mist); border-left: 2px solid var(--ink); font-size: 16px; line-height: 1.62; color: var(--ink); max-width: 680px; }
.mwj-art__body blockquote p { margin: 0; }

/* FAQ accordion */
.mwj-faq { margin: 48px 0 0; }
.mwj-faq__list { border: 1px solid var(--line); }
.mwj-faq__item { border-bottom: 1px solid var(--line); }
.mwj-faq__item:last-child { border-bottom: 0; }
.mwj-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; background: none; border: 0; cursor: pointer; padding: 20px 22px; font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: -0.2px; color: var(--ink); }
.mwj-faq__icon { position: relative; width: 14px; height: 14px; flex: none; }
.mwj-faq__icon::before, .mwj-faq__icon::after { content: ''; position: absolute; background: var(--ink); transition: opacity 0.2s; }
.mwj-faq__icon::before { left: 0; top: 6px; width: 14px; height: 2px; }
.mwj-faq__icon::after { left: 6px; top: 0; width: 2px; height: 14px; }
.mwj-faq__item.is-open .mwj-faq__icon::after { opacity: 0; }
.mwj-faq__a { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.mwj-faq__item.is-open .mwj-faq__a { max-height: 800px; }
.mwj-faq__a-inner { padding: 0 22px 22px; font-size: 15px; line-height: 1.68; color: var(--muted-2); }
.mwj-faq__a-inner p { margin: 0; }

/* Paired field-manual CTA (dark hatch band) */
.mwj-art__paired { margin: 48px 0 0; padding: 34px 36px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.028) 0 12px, transparent 12px 26px), var(--dark); color: #fff; }
.mwj-art__paired .mwj-kicker { background: #fff; color: var(--dark); }
.mwj-art__paired-title { font-family: var(--sans); font-weight: 600; font-size: 24px; letter-spacing: -0.8px; line-height: 1.15; margin: 16px 0 18px; color: #fff; }
.mwj-art__paired-link { font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; font-weight: 700; text-transform: uppercase; color: #fff; text-decoration: none; display: inline-flex; gap: 8px; }
.mwj-art__paired-link em { font-style: normal; transition: transform 0.18s; }
.mwj-art__paired-link:hover em { transform: translateX(3px); }

/* Keep reading */
.mwj-keepreading { max-width: var(--wrap); margin: 64px auto 0; padding: 48px 40px 80px; border-top: 1px solid var(--ink); font-family: var(--sans); color: var(--ink); }
.mwj-keepreading__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 28px; }
.mwj-keepreading__label { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.mwj-keepreading__all { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; font-weight: 700; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.mwj-keepreading__all:hover { color: var(--ink); }

/* Article mobile: drop the rail, full width, 22px gutter */
@media (max-width: 820px) {
	.mwj-art__head { padding: 32px 22px 0; }
	.mwj-art__title { letter-spacing: -1.4px; }
	.mwj-art__dek { font-size: 17px; }
	.mwj-art__metarow { flex-direction: column; align-items: flex-start; gap: 16px; }
	.mwj-art__grid { grid-template-columns: 1fr; gap: 0; padding: 0 22px; }
	.mwj-art__rail { display: none; }
	.mwj-art__body { padding-top: 28px; }
	.mwj-art__body h2, .mwj-art__h2 { font-size: 25px; letter-spacing: -0.5px; }
	.mwj-art__paired { padding: 28px 22px; }
	.mwj-keepreading { padding: 40px 22px 60px; }
	.mwj-keepreading .mwj-grid { grid-template-columns: 1fr; gap: 18px; }
	/* Hide the inline result count on the index per the mobile spec. */
	.mwj-resultcount { display: none; }
}