/*
 * MEPCO theme — base.css
 * Design tokens, the prototype's global resets (lines 45–65 of the .dc.html), the shared classes listed in
 * docs/BUILD-SPEC.md §5 and the global chrome (skip link, utility bar, sticky header, primary navigation,
 * mobile menu, footer). Every value is copied from the prototype's inline styles. Route stylesheets
 * (assets/css/routes/*.css) build on these classes and never restate them.
 *
 * Class index
 *   layout      .site .site-main .wrap .section .split-2 .two-col (> .main / > .aside)
 *   type        .kicker .kicker--dark .mono-11 .mono-12 .page-title .section-title .h-24 .h-22 .h-20 .h-18 .lede .sr-only
 *   buttons     .btn .btn--primary .btn--primary-sm .btn--outline .btn--outline-light .btn--dark .btn--ghost .text-link
 *   chips/tags  .chip (.is-on) .tag
 *   forms       .input .select .textarea .field .field__label .req
 *   boxes       .card .panel-dark .side-cta .doc-list .stats-strip .faq-details .breadcrumb .placeholder-hatch(--dark)
 *   chrome      .skip-link .utility-bar .site-header .site-nav .site-search .site-header__tools .site-header__narrow
 *               .menu-toggle .mobile-menu .site-footer .wordmark
 */

:root {
	--ink: #16191d;
	--text: #2f353d;
	--text-2: #4a5058;
	--muted: #5d626a;
	--muted-2: #6b7078;
	--line: #d5d2ca;
	--line-2: #e3e0d9;
	--input-line: #c9c5bc;
	--line-dark: #2a3340;
	--line-dark-2: #3a4553;
	--page: #eeece7;
	--panel: #f7f6f2;
	--white: #fff;
	--navy: #2a3340;
	--navy-2: #323c4a;
	--band: #16191d;
	--orange: #c8731f;
	--orange-text: #9e5510;
	--orange-dark: #e08a33;
	--orange-hover: #a95f17;
	--dark-text: #c9ced6;
	--dark-text-2: #b8bcc2;
	--dark-text-3: #a9b1bc;
	--dark-muted: #8f98a5;
	--tag-t: #6b7683;
	--tag-ss: #8a5a2b;
	--green: #2f7d4f;
	--gutter: clamp(16px, 4vw, 32px);
	--font-body: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;
	--font-display: 'Barlow Condensed', sans-serif;
}

/* ---------------------------------------------------------------------------
 * Resets (prototype <style>, lines 45–65)
 * ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
	font: 15px/1.5 var(--font-body);
	-webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--orange); }
input, select, button, textarea { font-family: inherit; }
[role=button]:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
::placeholder { color: var(--muted-2); opacity: 1; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
summary [data-plus] { transition: transform .2s; }
details[open] > summary [data-plus] { transform: rotate(45deg); }
summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
svg { display: block; }
button { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Leaflet (the map route injects leaflet.css lazily; the prototype's tweaks live here so they apply after it) */
.leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.04); }
.leaflet-container { isolation: isolate; background: #e6e4de; font-family: var(--font-body); }
.leaflet-popup-content-wrapper { border-radius: 2px; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); }
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.45; min-width: 220px; }
.leaflet-control-zoom a { border-radius: 0 !important; color: var(--navy); }
.leaflet-control-attribution { font: 10px var(--font-mono); background: rgba(247, 246, 242, .85); }

/* ---------------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------------ */
.site { min-height: 100vh; }
.site-main { display: block; outline: none; }
.wrap { padding-inline: var(--gutter); }
.section { padding: 56px var(--gutter) 72px; }
.split-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.two-col { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: flex-start; }
.two-col > .main { flex: 999 1 440px; min-width: 0; }
.two-col > .aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ---------------------------------------------------------------------------
 * Type
 * ------------------------------------------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.kicker { font: 12px var(--font-mono); color: var(--orange-text); letter-spacing: .16em; }
.kicker--dark { color: var(--orange-dark); }
.mono-11 { font: 11px var(--font-mono); color: var(--muted); letter-spacing: .1em; }
.mono-12 { font: 12px var(--font-mono); color: var(--muted); }
.page-title { margin: 6px 0 24px; font: 700 clamp(34px, 6vw, 60px)/1 var(--font-display); text-transform: uppercase; text-wrap: pretty; }
.section-title { margin: 0; font: 700 clamp(30px, 4vw, 44px)/1 var(--font-display); text-transform: uppercase; text-wrap: pretty; }
.h-24 { margin: 0; font: 600 24px var(--font-display); text-transform: uppercase; }
.h-22 { margin: 0; font: 600 22px var(--font-display); text-transform: uppercase; }
.h-20 { margin: 0; font: 600 20px var(--font-display); text-transform: uppercase; }
.h-18 { margin: 0; font: 600 18px var(--font-display); text-transform: uppercase; }
.lede { margin: 0; color: var(--text-2); text-wrap: pretty; }
.text-link { font-size: 13px; font-weight: 600; color: var(--orange-text); }
.text-link:hover { color: var(--orange-text); text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * Buttons (prototype <div onClick> → <a> / <button>)
 * ------------------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: inherit;
	font-weight: 600;
	line-height: 1.5;
	border: 0;
	border-radius: 2px;
	background: none;
	color: inherit;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}
.btn--primary { background: var(--orange); color: var(--ink); padding: 14px 22px; }
.btn--primary:hover { background: var(--orange-dark); color: var(--ink); }
.btn--primary-sm { background: var(--orange); color: var(--ink); padding: 11px 16px; font-size: 13px; }
.btn--primary-sm:hover { background: var(--orange-dark); color: var(--ink); }
.btn--outline { border: 1.5px solid var(--navy); color: var(--navy); padding: 11px 16px; font-size: 13px; }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--outline-light { border: 1.5px solid var(--tag-t); color: #fff; padding: 14px 22px; }
.btn--outline-light:hover { border-color: #fff; color: #fff; }
.btn--dark { background: var(--navy); color: #fff; padding: 12px 20px; }
.btn--dark:hover { background: var(--orange-hover); color: #fff; }
.btn--ghost { border: 1.5px solid var(--line); color: var(--text-2); padding: 11px 16px; font-size: 13px; }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn:disabled, .btn[aria-disabled=true] { opacity: .55; cursor: default; }

/* ---------------------------------------------------------------------------
 * Chips and tags
 * ------------------------------------------------------------------------ */
.chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1.5px solid var(--navy);
	border-radius: 999px;
	background: transparent;
	color: var(--navy);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	white-space: nowrap;
}
.chip:hover { color: var(--navy); }
.chip.is-on, .chip[aria-pressed=true] { background: var(--navy); color: #fff; }
.chip.is-on:hover, .chip[aria-pressed=true]:hover { color: #fff; }
.tag { display: inline-block; font: 600 11px var(--font-mono); background: var(--navy); color: #fff; padding: 3px 7px; border-radius: 2px; white-space: nowrap; }

/* ---------------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------------ */
/* The prototype's only form reset is `input,select,button,textarea{font-family:inherit}` (design file
   line 41), so a control keeps the user-agent's own line-height (normal) and weight (400) and takes
   only the family and the inline font-size. `font: inherit` would pull in body's 1.5 line-height
   (a 15px box becomes 51px instead of 48px) and, inside a .field label, its 500 weight. */
.input, .select, .textarea {
	padding: 12px 14px;
	border: 1px solid var(--input-line);
	background: #fff;
	color: var(--ink);
	font-family: inherit;
	font-size: 15px;
	line-height: normal;
	border-radius: 2px;
	min-width: 0;
	margin: 0;
}
.textarea { resize: vertical; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.field__label { font-size: 13px; font-weight: 500; }
.req { color: inherit; }

/* ---------------------------------------------------------------------------
 * Boxes
 * ------------------------------------------------------------------------ */
.card { background: var(--panel); border: 1px solid var(--line); }
.panel-dark { background: var(--navy); color: #fff; padding: 24px; }

/* Dark sidebar CTA (family / product singles, prototype 397–403) */
.side-cta { background: var(--navy); color: #fff; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.side-cta__title { font: 600 22px var(--font-display); text-transform: uppercase; }
.side-cta__text { font-size: 13px; color: var(--dark-text); text-wrap: pretty; }
.side-cta__primary { display: block; padding: 12px; background: var(--orange); color: #fff; text-align: center; font: inherit; font-weight: 600; border: 0; border-radius: 2px; cursor: pointer; }
.side-cta__primary:hover { background: var(--orange-dark); color: #fff; }
.side-cta__secondary { display: block; padding: 12px; border: 1.5px solid var(--tag-t); background: transparent; color: #fff; text-align: center; font: inherit; font-weight: 600; border-radius: 2px; cursor: pointer; }
.side-cta__secondary:hover { border-color: #fff; color: #fff; }
.side-cta__link { font-size: 13px; color: var(--dark-text); text-align: center; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.side-cta__link:hover { color: #fff; }

/* Sidebar documentation list (prototype 404–413) */
.doc-list { background: var(--panel); border: 1px solid var(--line); }
.doc-list__head { padding: 14px 18px; border-bottom: 1px solid var(--line); font: 600 18px var(--font-display); text-transform: uppercase; }
.doc-list__row { padding: 12px 18px; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink); }
a.doc-list__row { cursor: pointer; }
a.doc-list__row:hover { background: #fff; color: var(--ink); }
.doc-list__text { display: flex; flex-direction: column; min-width: 0; }
.doc-list__title { font-size: 14px; font-weight: 500; }
.doc-list__meta { font: 11px var(--font-mono); color: var(--muted); }
.doc-list__fmt { font-weight: 400; }
.doc-list__empty { padding: 12px 18px; font-size: 13px; color: var(--muted); }
.doc-list__more { display: block; padding: 12px 18px; font-size: 13px; font-weight: 600; color: var(--orange-text); }
/* The prototype's row (lines 340 / 403) carries no style-hover, so only the global a:hover orange has
   to be cancelled — no underline, no background change. */
.doc-list__more:hover { color: var(--orange-text); }

/* Stats strip (prototype 384–388) */
.stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--panel); border: 1px solid var(--line); border-right: 0; }
.stats-strip__cell { padding: 16px 18px; border-right: 1px solid var(--line); }
.stats-strip__label { display: block; font: 11px var(--font-mono); color: var(--muted); letter-spacing: .1em; }
.stats-strip__value { font: 700 24px var(--font-display); }

/* FAQ <details> (prototype 248–253) */
.faq-details { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; }
.faq-details > summary { padding: 14px 18px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq-details__q { text-wrap: pretty; }
.faq-details__plus { font: 400 24px/1 var(--font-display); color: var(--orange-text); flex: none; display: inline-block; }
.faq-details__a, .faq-details > p { margin: 0; padding: 0 18px 16px; font-size: 14px; line-height: 1.6; color: var(--text); text-wrap: pretty; }

/* Breadcrumb (prototype 354) */
.breadcrumb { font: 12px var(--font-mono); color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.breadcrumb__link { color: var(--muted); }
.breadcrumb__link:hover { color: var(--muted); }
.breadcrumb__current { color: var(--ink); }

/* Hatched placeholders (missing photo) */
.placeholder-hatch { background: repeating-linear-gradient(135deg, #e3e0d9 0 12px, #dcd9d1 12px 24px); }
.placeholder-hatch--dark { background: repeating-linear-gradient(135deg, #1e2228 0 14px, #1a1e23 14px 28px); }
.placeholder-hatch__note { font: 12px var(--font-mono); color: var(--muted); border: 1px dashed #a9a59c; padding: 6px 10px; text-align: center; }
.placeholder-hatch--dark .placeholder-hatch__note { color: var(--dark-muted); border-color: #4a5563; }

/* ---------------------------------------------------------------------------
 * Skip link (prototype line 68)
 * ------------------------------------------------------------------------ */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: var(--orange); color: var(--ink); padding: 10px 14px; font-weight: 600; border-radius: 2px; }
.skip-link:focus { left: 8px; color: var(--ink); }

/* ---------------------------------------------------------------------------
 * Utility bar (prototype 70–75)
 * ------------------------------------------------------------------------ */
.utility-bar { background: var(--navy); color: #fff; font: 12px/1 var(--font-mono); padding: 9px var(--gutter); display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.utility-bar__left { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.utility-bar__right { display: flex; gap: 24px; }
.utility-bar__link { color: #fff; cursor: pointer; }
.utility-bar__link:hover { color: var(--orange-dark); }
/* "Made in America" mark (Site settings → Header): brass pill in the utility bar, brass text in the footer. */
.utility-bar__made-in { display: inline-flex; align-items: center; align-self: center; gap: 6px; padding: 3px 9px; margin: -4px 0; border: 1px solid var(--orange); border-radius: 2px; color: var(--orange-dark); font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.utility-bar__made-in::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.site-footer__made-in { color: var(--orange-dark); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ---------------------------------------------------------------------------
 * Sticky header (prototype 77–122)
 * ------------------------------------------------------------------------ */
.site-header {
	background: var(--panel);
	border-bottom: 1px solid var(--line);
	padding: 8px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	min-height: 72px;
	flex-wrap: wrap;
	position: sticky;
	top: 0;
	z-index: 5;
}
.site-header__brand { display: flex; align-items: center; gap: 12px; flex: none; color: var(--ink); }
.site-header__brand:hover { color: var(--ink); }
.site-header__logo { height: 48px; width: auto; display: block; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex: 1; min-width: 0; }
.site-nav__link { padding: 8px 10px; font-weight: 500; font-size: 13.5px; white-space: nowrap; border-bottom: 2px solid transparent; color: var(--text-2); }
.site-nav__link:hover { color: var(--orange-text); }
.site-nav__link.is-active, .site-nav__link[aria-current=page] { color: var(--ink); border-bottom-color: var(--orange); }
.site-header__tools { display: flex; gap: 10px; align-items: center; flex: none; }
.site-search { display: flex; margin: 0; min-width: 0; }
.site-search__input { padding: 9px 12px; border: 1px solid var(--input-line); background: #fff; color: var(--ink); font-family: inherit; font-size: 13px; line-height: normal; border-radius: 2px; width: 190px; min-width: 0; margin: 0; -webkit-appearance: none; appearance: none; }
.site-search__input::-webkit-search-decoration, .site-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.site-header__quote { padding: 9px 14px; font-size: 13px; font-weight: 600; background: var(--orange); color: var(--ink); border-radius: 2px; white-space: nowrap; display: inline-block; }
.site-header__quote:hover { background: var(--orange-dark); color: var(--ink); }

/* Narrow (< 900px): Quote + Menu pair (prototype 97–102). The prototype switched at 760px; below 900px the
   seven-link nav wraps to three rows (132px of sticky header at 768–820px), so tablets use the menu too. */
.site-header__narrow { display: none; gap: 8px; align-items: center; flex: none; }
.site-header__quote-sm { padding: 10px 14px; font-size: 13px; font-weight: 600; background: var(--orange); color: var(--ink); border-radius: 2px; white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
.site-header__quote-sm:hover { background: var(--orange-dark); color: var(--ink); }
.menu-toggle { padding: 10px 14px; font: inherit; font-size: 13px; font-weight: 600; border: 1.5px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; border-radius: 2px; white-space: nowrap; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.menu-toggle__glyph { font-size: 16px; line-height: 1; }

/* The collapsible panel (prototype 104–120) */
.mobile-menu { flex-basis: 100%; display: none; flex-direction: column; border-top: 1px solid var(--line); padding: 6px 0 10px; }
.mobile-menu__search { display: flex; gap: 8px; padding: 10px 4px 8px; margin: 0; }
.mobile-menu__input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--input-line); background: #fff; color: var(--ink); font-family: inherit; font-size: 15px; line-height: normal; border-radius: 2px; margin: 0; -webkit-appearance: none; appearance: none; }
.mobile-menu__input::-webkit-search-decoration, .mobile-menu__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mobile-menu__go { padding: 11px 14px; background: var(--navy); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 0; border-radius: 2px; min-height: 44px; display: flex; align-items: center; }
.mobile-menu__go:hover { background: var(--orange-hover); }
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__link { padding: 13px 4px; font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--line-2); color: var(--text-2); display: flex; justify-content: space-between; }
.mobile-menu__link:hover { color: var(--text-2); }
.mobile-menu__link.is-active, .mobile-menu__link[aria-current=page], .mobile-menu__link.is-active:hover { color: var(--ink); }
.mobile-menu__dot { color: transparent; }
.mobile-menu__link.is-active .mobile-menu__dot, .mobile-menu__link[aria-current=page] .mobile-menu__dot { color: var(--orange); }
.mobile-menu__extra { display: flex; gap: 8px 20px; flex-wrap: wrap; padding: 14px 4px 0; font-size: 14px; font-weight: 500; color: var(--text-2); }
.mobile-menu__extra-link { padding: 6px 0; color: var(--text-2); }
.mobile-menu__extra-link:hover { color: var(--text-2); }

@media (max-width: 899.98px) {
	.site-nav, .site-header__tools { display: none; }
	.site-header__narrow { display: flex; }
	.mobile-menu:not([hidden]) { display: flex; }
}
@media (min-width: 900px) {
	.mobile-menu { display: none !important; }
}

/* Wordmark fallback (no logo image at all; prototype "wordmark" brand option) */
.wordmark { display: flex; align-items: center; gap: 12px; }
.wordmark__mark { width: 38px; height: 38px; background: var(--navy); display: grid; place-items: center; border-radius: 2px; }
.wordmark__ring { width: 18px; height: 18px; border: 3px solid var(--orange); border-radius: 50%; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.wordmark__name { font: 700 26px var(--font-display); letter-spacing: .06em; color: var(--ink); }
.wordmark__est { font: 10px/1 var(--font-mono); color: var(--muted); letter-spacing: .14em; margin-top: 3px; white-space: nowrap; }
.site-footer .wordmark__mark, .site-footer .wordmark__est { display: none; }
.site-footer .wordmark__name { font: 700 30px var(--font-display); color: #fff; }

/* ---------------------------------------------------------------------------
 * Footer (prototype 1327–1350)
 * ------------------------------------------------------------------------ */
.site-footer {
	background: var(--band);
	color: var(--dark-text-2);
	padding: 56px var(--gutter) 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 36px 40px;
	font-size: 14px;
}
/* #22: the auto-fit grid fits only three 200px columns between 900px and 983px, dropping Company under the
   address. Four columns there: the brand column keeps its widest line (phone · fax, 241px) and the link
   columns their widest link (171px) — measured, no wrapping at 909px. Tablets get a 2 × 2 grid. */
@media (min-width: 900px) and (max-width: 983.98px) {
	.site-footer { grid-template-columns: minmax(241px, 1.3fr) repeat(3, minmax(0, 1fr)); column-gap: 28px; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
	.site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.site-footer__logo-pad { background: var(--panel); padding: 8px 14px; border-radius: 2px; display: inline-flex; }
.site-footer__logo { height: 40px; width: auto; display: block; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__heading { font: 11px var(--font-mono); color: var(--orange-dark); letter-spacing: .14em; }
.site-footer__link { color: var(--dark-text-2); cursor: pointer; }
.site-footer__link:hover { color: #fff; }
.site-footer__fine { grid-column: 1 / -1; border-top: 1px solid var(--navy); padding-top: 20px; font: 12px var(--font-mono); color: var(--dark-text-3); display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; }
.site-footer__legal { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.site-footer__legal-link { color: var(--dark-text-3); cursor: pointer; }
.site-footer__legal-link:hover { color: #fff; }

/* ---------------------------------------------------------------------------
 * Block-editor bodies (page.php, page-legal.php, news posts) and the generic index
 * ------------------------------------------------------------------------ */
.entry-content { max-width: 760px; color: var(--text); }
.entry-content > :first-child { margin-top: 0; }
.entry-content p { margin: 0 0 16px; text-wrap: pretty; }
.entry-content h2 { margin: 32px 0 12px; font: 600 24px var(--font-display); text-transform: uppercase; color: var(--ink); }
.entry-content h3 { margin: 24px 0 10px; font: 600 20px var(--font-display); text-transform: uppercase; color: var(--ink); }
.entry-content ul, .entry-content ol { margin: 0 0 16px; padding-left: 22px; }
.entry-content li { margin-bottom: 6px; }
.entry-content a { color: var(--orange-text); font-weight: 600; }
.entry-content a:hover { text-decoration: underline; }
.entry-content blockquote { margin: 0 0 16px; padding: 0 0 0 16px; border-left: 2px solid var(--orange); color: var(--text-2); }
.entry-content img { display: block; }
.entry-content figure { margin: 0 0 16px; }
.entry-content figcaption { font: 11px var(--font-mono); color: var(--muted); margin-top: 6px; }
.entry-content table { border-collapse: collapse; width: 100%; font-size: 14px; }
.entry-content th, .entry-content td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.entry-content th { font: 11px var(--font-mono); color: var(--muted); letter-spacing: .1em; }
.entry-content pre, .entry-content code { font-family: var(--font-mono); font-size: 13px; }
.index-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.index-item { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.index-item .h-22 a { color: var(--ink); }
.index-item .h-22 a:hover { color: var(--orange-text); }
.entry-summary p { margin: 0; font-size: 14px; color: var(--text-2); }
.index-empty { margin: 0 0 16px; color: var(--text-2); }
.index-search { display: flex; gap: 8px; max-width: 480px; }
.index-search .input { flex: 1; }
.pagination { margin-top: 28px; font: 12px var(--font-mono); }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers { padding: 6px 10px; border: 1px solid var(--line); border-radius: 2px; color: var(--text-2); }
.pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------------------
 * Mobile chrome (≤ 899px) — designed from the desktop language, no mobile reference.
 * Everything here is scoped below 900px so the verified desktop output is untouched by construction.
 * ------------------------------------------------------------------------ */
@media (max-width: 899.98px) {
	/* iOS Safari zooms the page when a focused control is under 16px. */
	.input, .select, .textarea, .mobile-menu__input { font-size: 16px; }
	.field, .field__label { font-size: 14px; }
	/* Filter / territory chips (products, videos, find-a-rep) were 36–38px tall. */
	.chip { min-height: 44px; display: inline-flex; align-items: center; }
	/* Breadcrumb and side-CTA text links: 44px tap boxes without moving the layout. */
	.breadcrumb__link { display: inline-block; min-width: 44px; padding: 15px 0; margin: -15px 0; }
	.side-cta__link, .legal__contact { display: inline-block; padding: 13px 0; margin: -13px 0; }
	/* Route sheets own their own controls (.docs__search-input, .news-subscribe__input, .nf__input): they load after
	   this file, so their 16px rule lives next to the component. */
	/* Utility bar: the three links become 44px-tall tap targets; the plain-text items (address, phone,
	   email — spans, not links) keep the 12px mono line. */
	.utility-bar { padding: 8px var(--gutter) 0; gap: 4px 16px; }
	.utility-bar__right { gap: 0 20px; flex-wrap: wrap; }
	.utility-bar__link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
	.utility-bar__made-in { margin: 0; align-self: center; }
	/* Mobile menu: the "More" row (Find a rep · Videos · News · Contact) was 33px tall. */
	.mobile-menu__extra { padding-top: 6px; gap: 0 20px; }
	.mobile-menu__extra-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; }
	/* Footer links: 21px text rows at a 31px pitch become 44px rows. */
	.site-footer__col { gap: 0; }
	.site-footer__heading { padding-bottom: 6px; }
	.site-footer__link, .site-footer__legal-link { display: inline-flex; align-items: center; min-height: 44px; }
	.site-footer__legal { gap: 0 20px; }
	.site-footer__fine { gap: 4px 24px; }
}