/*
 * UM Hoops "Sports desk": theme-level restyle of Flex Mag (Oct 14, 2026). Style handle 'umh-brand-theme', printed late in
 * <head> by UMH_Brand (after the theme-options CSS and Additional CSS). Every rule is scoped to body.umh-brand, so nothing
 * changes while the switch is off. Colours come only from umh-tokens.css, so dark mode follows the tokens.
 * Covers: base + links, header bar + dropdowns, fly-out menu, single articles, home / archive / tag / search lists,
 * pagination, sidebar widgets, footer, comments, buttons, form inputs; phone (<= 767px) at the end.
 * Rules, not boxes; square corners (4px on controls); maize only for action / current.
 */

/* ======================================================================= base */
/* iOS Safari's text autosizing off (owner, Oct 29, 2026: the home ribbon in iPhone landscape had its matchup and date
   blown up next to normal-size links): Safari enlarged the blocks it judged too small, unevenly. The type scale is set
   for phones already; pinch-zoom is unaffected. Inherited, so the body covers the page. */
body.umh-brand { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.umh-brand {
	--umh-gut: 32px;
	--umh-col: 760px;
	background: var(--umh-paper);
	color: var(--umh-ink);
	font-family: var(--umh-font-ui);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
body.umh-brand #site,
body.umh-brand #site-wrap,
body.umh-brand #body-main-wrap,
body.umh-brand #home-main-wrap,
body.umh-brand #home-mid-wrap,
body.umh-brand #post-main-wrap,
body.umh-brand #post-left-col,
body.umh-brand article#post-area,
body.umh-brand .side-widget,
body.umh-brand .side-list-wrap,
body.umh-brand .feat-widget-wrap,
body.umh-brand .feat-widget-text,
body.umh-brand .gallery-widget-wrap,
body.umh-brand .page-template-page-fullwidth #body-main-wrap {
	background: var(--umh-paper);
}
/* the theme-options list that sets the content face (Lato on production) */
body.umh-brand :where(.blog-widget-text p, .feat-widget-text p, .post-info-right, span.soc-count-text, .archive-list-text p,
	.author-box-bot p, .foot-widget, .feat-top2-left-text p, .feat-wide1-text p, .feat-wide4-text p,
	.foot-copy p, .video-main-text p, span.to-top-text, span.feat-info-text, span.more-posts-text,
	span.social-text, span.social-text-com, .gallery-widget-text p, .tag-cloud a, .pagination span, .pagination a, a.inf-more-but,
	h3.foot-head, h3.home-feat-title, h3.side-list-title, .score-nav-menu select, h2.author-list-head,
	.feat-top2-right-text h2, .side-list-text p, .side-full-text p, .row-widget-text p, .feat-widget-text h2, .blog-widget-text h2,
	.prev-next-text a, .pmpro_level .pmpro_level-price, form.pmpro_form label, .tml label,
	.woocommerce span.onsale, .woocommerce-review-link, .es-nav span a) {
	font-family: var(--umh-font-ui);
}
body.umh-brand #post-404 p,
body.umh-brand #home-feat-text p,
body.umh-brand #searchform input,
body.umh-brand #infscr-loading,
body.umh-brand #pmpro_levels,
body.umh-brand #pmpro_levels h2 {
	font-family: var(--umh-font-ui);
}

/* all at body.umh-brand + a weight (0,1,2): above the theme's "a / a:visited / a:hover" (0,1,1), below any component rule such
   as ".umh-hp-more a:hover" (0,2,1), so a filled button that sets its own hover color keeps it (navy-on-ink hovers, Oct 18) */
body.umh-brand a,
body.umh-brand a:where(:visited),
body.umh-brand :where(.post-info-name) a {
	color: var(--umh-ink);
}
/* no X icon after the author's name (owner, Oct 28, 2026); the Twitter profile field still feeds twitter:creator */
body.umh-brand #post-info-wrap .author-twitter { display: none !important; }
body.umh-brand a:where(:hover) {
	color: var(--umh-navy);
}
:where(html[data-umh-theme="dark"]) body.umh-brand a:where(:hover) { color: var(--umh-maize); }
@media (prefers-color-scheme: dark) { :where(html[data-umh-theme="auto"]) body.umh-brand a:where(:hover) { color: var(--umh-maize); } }

/* keyboard focus: the one ring is in umh-tokens.css (the interaction layer at its end) */
body.umh-brand ::selection { background: var(--umh-maize); color: var(--umh-navy); }

/* ======================================================================= header bar */
body.umh-brand #main-nav-wrap,
body.umh-brand nav.main-menu-wrap,
body.umh-brand .nav-logo,
body.umh-brand .nav-right-wrap,
body.umh-brand .nav-menu-out,
body.umh-brand .nav-logo-out,
body.umh-brand #head-main-top {
	background: var(--umh-bar);
}
body.umh-brand #main-nav-wrap { box-shadow: none; }

body.umh-brand nav.main-menu-wrap ul li a,
body.umh-brand .nav-menu-out:hover ul li a,
body.umh-brand .nav-menu-out:hover ul li:hover a {
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-base);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--umh-on-bar-2);
}
body.umh-brand nav.main-menu-wrap ul.menu > li > a {
	padding-left: 11px;
	padding-right: 11px;
}
body.umh-brand nav.main-menu-wrap ul.menu > li.menu-item-has-children > a { padding-right: 22px; }
body.umh-brand nav.main-menu-wrap ul.menu > li.menu-item-has-children > a:after { right: 9px; }
body.umh-brand nav.main-menu-wrap ul.menu > li > a:hover,
body.umh-brand .nav-menu-out:hover ul.menu > li:hover > a {
	color: var(--umh-on-bar);
}
/* current section: the one maize mark in the bar besides Join */
body.umh-brand nav.main-menu-wrap ul.menu > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent) > a,
body.umh-brand nav.main-menu-wrap ul.menu > li.umh-nav-first > a {
	color: var(--umh-on-bar);
	box-shadow: inset 0 -3px 0 var(--umh-maize);
}
body.umh-brand nav.main-menu-wrap ul.menu > li.umh-nav-first:not(.current-menu-item):not(.current-menu-ancestor):not(.current-menu-parent) > a {
	box-shadow: none;
	color: var(--umh-on-bar-2);   /* not lit when it isn't the current section (Coverage stayed white everywhere, Oct 26, 2026) */
}
body.umh-brand nav.main-menu-wrap ul.menu > li.umh-nav-first:not(.current-menu-item):not(.current-menu-ancestor):not(.current-menu-parent) > a:hover { color: var(--umh-on-bar); }
/* dropdown caret: a small chevron in the text colour */
body.umh-brand nav.main-menu-wrap ul li.menu-item-has-children a:after,
body.umh-brand .nav-menu-out:hover li.menu-item-has-children a:after {
	border-color: currentColor transparent transparent transparent;
	opacity: .7;
}
body.umh-brand nav.main-menu-wrap ul li ul.sub-menu li a:after { display: none; }

/* dropdowns: a sheet with rules, not a floating card */
body.umh-brand nav.main-menu-wrap ul li ul.sub-menu {
	background: var(--umh-paper);
	border: 1px solid var(--umh-rule);
	border-top: 3px solid var(--umh-maize);
	border-radius: 0;
	box-shadow: 0 10px 24px rgba(0, 20, 40, .14);
	min-width: 230px;
	max-width: 280px;
	padding: 4px 0;
}
body.umh-brand nav.main-menu-wrap ul li ul.sub-menu li a,
body.umh-brand nav.main-menu-wrap ul li ul.sub-menu li a:visited,
body.umh-brand .nav-menu-out:hover ul li ul.sub-menu li a,
body.umh-brand .nav-menu-out:hover ul li ul.mega-list li a,
body.umh-brand nav.main-menu-wrap ul li.mega-dropdown .mega-dropdown a {
	background: var(--umh-paper);
	color: var(--umh-ink) !important;   /* Flex Mag sets #333 !important */
	font-size: var(--umh-fs-base);
	font-weight: 500;
	line-height: 1.3;
	padding: 10px 16px;
	border-top: 1px solid var(--umh-rule-2);
	width: 100%;
	box-sizing: border-box;
	white-space: normal;
}
body.umh-brand nav.main-menu-wrap ul li ul.sub-menu li:first-child a { border-top: 0; }
body.umh-brand nav.main-menu-wrap ul li ul.sub-menu li a:is(:hover, :focus-visible),
body.umh-brand .nav-menu-out:hover ul li ul.sub-menu li:hover a {
	background: var(--umh-tint);
	color: var(--umh-ink) !important;
	box-shadow: inset 3px 0 0 var(--umh-maize);
}
body.umh-brand nav.main-menu-wrap ul li ul.sub-menu li:is(.current-menu-item, .current-menu-ancestor) > a { box-shadow: inset 3px 0 0 var(--umh-maize); font-weight: 600; }
/* mega menus (Flex Mag's category drop-downs with post thumbnails) */
body.umh-brand nav.main-menu-wrap ul li.mega-dropdown .mega-dropdown { background: var(--umh-paper); border: 1px solid var(--umh-rule); border-top: 3px solid var(--umh-maize); box-shadow: 0 10px 24px rgba(0, 20, 40, .14); }
body.umh-brand ul.mega-list li a,
body.umh-brand .nav-menu-out:hover ul li ul.mega-list li a { color: var(--umh-ink) !important; font-family: var(--umh-font-ui); font-weight: 700; text-transform: none; }
body.umh-brand ul.mega-list li .mega-img { background: var(--umh-tint); }

/* Log in: plain; Join: the one maize button */
body.umh-brand nav.main-menu-wrap ul.menu > li.umh-nav-right > a { color: var(--umh-on-bar); }
body.umh-brand nav.main-menu-wrap ul.menu > li.umh-join > a,
body.umh-brand .nav-menu-out:hover ul.menu > li.umh-join > a {
	background: var(--umh-maize);
	color: var(--umh-navy) !important;
	border-radius: var(--umh-radius-control);
	font-weight: 700;
	font-size: var(--umh-fs-base);
	min-height: 34px;
	padding: 0 16px;
	box-shadow: none;
}
/* its hover (navy-bar inverse: white fill) is in the interaction layer, umh-tokens.css */

body.umh-brand span.nav-search-but i,
body.umh-brand span.nav-soc-but i,
body.umh-brand .nav-menu-out:hover span.nav-search-but i,
body.umh-brand .nav-menu-out:hover span.nav-soc-but i { color: var(--umh-on-bar); }
body.umh-brand .search-fly-wrap {
	background: var(--umh-paper);
	border: 1px solid var(--umh-rule);
	border-top: 3px solid var(--umh-maize);
	box-shadow: 0 10px 24px rgba(0, 20, 40, .14);
}
body.umh-brand .search-fly-wrap #searchform input,
body.umh-brand #searchform input {
	background: var(--umh-paper);
	color: var(--umh-ink);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-ui);
}
body.umh-brand .fly-but-wrap { background: var(--umh-bar); }
body.umh-brand .fly-but-wrap span { background: var(--umh-on-bar); }

/* the bar's lone X icon goes (the footer carries the social links); the appearance button takes its place */
body.umh-brand .nav-right-wrap > a[target="_blank"] { display: none; }
/* the appearance button in the bar (dark mode) */
body.umh-brand .umh-theme-flip {
	float: left;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 3px 2px 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--umh-radius-control);
	background: transparent;
	color: var(--umh-on-bar);
	cursor: pointer;
}
body.umh-brand .umh-theme-flip:hover { background: rgba(255, 255, 255, .1); }
body.umh-brand .umh-theme-flip:focus-visible { outline: none; box-shadow: var(--umh-focus); }
body.umh-brand .umh-theme-flip .umh-ico-sun { display: none; }
body.umh-brand .umh-theme-flip[aria-pressed="true"] .umh-ico-moon { display: none; }
body.umh-brand .umh-theme-flip[aria-pressed="true"] .umh-ico-sun { display: block; color: var(--umh-maize); }

/* ======================================================================= fly-out menu */
body.umh-brand #fly-wrap,
body.umh-brand .fly-wrap-out,
body.umh-brand .fly-wrap-in,
body.umh-brand #fly-menu-wrap {
	background: var(--umh-paper);
}
body.umh-brand .fly-side-wrap {
	background: var(--umh-tint);
	border-right: 1px solid var(--umh-rule);
}
/* closed = really hidden (owner, Oct 15, 2026): Flex Mag only slides #fly-wrap to -370px and leaves it visible, so a resize
   / repaint / full-page capture could paint its "+" toggles and the Dark | Auto switch into the left edge. Hidden (and so
   out of the tab order) once the slide-out finishes; visible the moment it opens. */
body.umh-brand #fly-wrap:not(.fly-menu) {
	visibility: hidden;
	transition: transform .25s ease, visibility 0s linear .25s;
}
body.umh-brand #fly-wrap.fly-menu {
	visibility: visible;
	transition: transform .25s ease, visibility 0s linear 0s;
}
/* the old social column (an empty 40px strip with stray rules on phones): the footer carries the social links */
body.umh-brand #fly-wrap .fly-side-wrap { display: none; }
body.umh-brand #fly-wrap .fly-wrap-out { margin-left: 0; }
body.umh-brand #fly-wrap .fly-wrap-in { margin-left: 0; }
body.umh-brand ul.fly-bottom-soc li { border-color: var(--umh-rule) !important; }
body.umh-brand ul.fly-bottom-soc li a i,
body.umh-brand ul.fly-bottom-soc li i { color: var(--umh-muted); }
body.umh-brand nav.fly-nav-menu ul li {
	border-color: var(--umh-rule) !important;
}
body.umh-brand nav.fly-nav-menu ul li a,
body.umh-brand nav.fly-nav-menu ul li a:visited {
	color: var(--umh-ink);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-item);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
	text-transform: none;
}
body.umh-brand nav.fly-nav-menu ul li a:hover { color: var(--umh-navy); }
body.umh-brand nav.fly-nav-menu ul li ul.sub-menu li a {
	font-size: var(--umh-fs-base);
	font-weight: 500;
	color: var(--umh-ink-2);
}
body.umh-brand nav.fly-nav-menu ul li.menu-item-has-children:after {
	color: var(--umh-muted);
	font-family: var(--umh-font-ui);
	font-weight: 400;
}
body.umh-brand .fly-nav-menu ul.menu > li.umh-join > a {
	background: var(--umh-maize);
	color: var(--umh-navy) !important;
	border-radius: var(--umh-radius-control);
	font-weight: 700;
	padding: 11px 20px;
}
/* the fly-out appearance switch */
body.umh-brand .umh-theme-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	clear: both;
	margin: 18px 0 24px;
	padding-top: 16px;
	border-top: var(--umh-rule-heavy);
	width: 100%;
	box-sizing: border-box;
}
body.umh-brand .umh-theme-switch__k {
	font-size: var(--umh-fs-label);
	font-weight: 700;
	letter-spacing: var(--umh-track-label);
	text-transform: uppercase;
	color: var(--umh-label);
}
body.umh-brand .umh-theme-switch__set { display: inline-flex; border: 1px solid var(--umh-ink); border-radius: var(--umh-radius-control); overflow: hidden; }
body.umh-brand .umh-theme-switch__set button {
	min-width: 58px;
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	border-left: 1px solid var(--umh-ink);
	background: var(--umh-paper);
	color: var(--umh-ink);
	font: 600 var(--umh-fs-base)/1 var(--umh-font-ui);
	cursor: pointer;
}
body.umh-brand .umh-theme-switch__set button:first-child { border-left: 0; }
body.umh-brand .umh-theme-switch__set button[aria-pressed="true"] { background: var(--umh-ink); color: var(--umh-paper); }
body.umh-brand .umh-theme-switch__set button:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--umh-maize); }

/* ======================================================================= single article */
/*
 * Two scopes:
 *   body.umh-prose-post       a story (UMH_Brand::is_prose(): posts, minus Locker transcripts/interviews; plain pages):
 *                             the reading layout (column + sidebar, header in reading order)
 *   #umh-prose          the wrapper UMH_Brand puts around the_content of that story. Reading rules only reach its
 *                             DIRECT children (> p, > h2, > ul > li, > blockquote, > table …), so markup a plugin or a
 *                             shortcode drops into the content (Locker, games, Pro Blue, paywall boxes) is never restyled.
 * Every single post (prose or not) gets the header type: label, headline, byline.
 */
body.umh-brand #post-header a.post-cat-link:has(> span.post-head-cat:empty) { display: none; }   /* no kind, no real category: no kicker */
body.umh-brand span.post-head-cat {
	float: none;
	display: inline-block;
	margin: 0 0 10px;
	padding: 0;
	background: none;
	color: var(--umh-label);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-label);
	font-weight: 700;
	letter-spacing: var(--umh-track-label);
	line-height: 1.2;
	text-transform: uppercase;
}
body.umh-brand h1.post-title,
body.umh-brand #content-main h1.post-title,
body.umh-brand h1.post-title-wide {
	color: var(--umh-ink);
	font-family: var(--umh-font-display);
	font-size: var(--umh-fs-display);
	font-weight: 800;
	font-variation-settings: "wdth" var(--umh-wdth-display);
	letter-spacing: -.012em;
	line-height: var(--umh-lh-display);
	text-transform: none;
	text-wrap: balance;
}
/* byline row between two thin rules */
body.umh-brand #post-info-wrap {
	display: block;
	margin-top: 18px;
	padding: 11px 0;
	border-top: var(--umh-rule-thin);
	border-bottom: var(--umh-rule-thin);
}
body.umh-brand #post-info-wrap .post-info-out,
body.umh-brand #post-info-wrap .post-info-in,
body.umh-brand #post-info-wrap .post-info-right {
	float: none;
	margin: 0;
	width: auto;
}
body.umh-brand #post-info-wrap .post-info-img { display: none; }
body.umh-brand #post-info-wrap .post-info-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-small);
	line-height: 1.3;
	color: var(--umh-muted);
}
body.umh-brand #post-info-wrap .post-info-name,
body.umh-brand #post-info-wrap .post-info-date {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--umh-fs-small);
	color: var(--umh-muted);
}
body.umh-brand #post-info-wrap .post-info-name a,
body.umh-brand #post-info-wrap .author-name { color: var(--umh-ink); font-weight: 700; text-transform: none; }
body.umh-brand #post-info-wrap .post-info-date .post-info-text { display: none; }
body.umh-brand #post-info-wrap .post-info-text { color: var(--umh-muted); text-transform: none; font-size: var(--umh-fs-small); }
body.umh-brand #post-info-wrap .post-date { color: var(--umh-muted); font-variant-numeric: tabular-nums; }

/* ---------- the reading layout (stories only) ---------- */
body.umh-brand.umh-prose-post {
	--umh-col: 680px;       /* headline, photo, text, tables: one column, edges aligned (~70ch of body serif) */
	--umh-side: 300px;
	--umh-gap: 48px;
}
/* desktop: column + sidebar as one block, centred; spare width goes to the outer margins */
@media screen and (min-width: 1004px) {
	body.umh-brand.umh-prose-post { --umh-gut: 0px; }
	body.umh-brand.umh-prose-post .post-wrap-out1 {
		float: none;
		display: grid;
		grid-template-columns: minmax(0, var(--umh-col)) var(--umh-side);
		column-gap: clamp(32px, 4vw, var(--umh-gap));
		justify-content: center;
		align-items: start;
		width: 100%;
		margin: 0;
	}
	body.umh-brand.umh-prose-post .post-wrap-in1 { margin: 0; min-width: 0; }
	body.umh-brand.umh-prose-post #post-right-col { float: none; width: var(--umh-side); margin: 0; }
	body.umh-brand.umh-prose-post #post-left-col { float: none; }
}

body.umh-brand.umh-prose-post article#post-area {
	display: flex;
	flex-direction: column;
	overflow: visible;
	border-bottom: 0;
}
/* header, featured image and its text become one column, in reading order: label, headline, dek, byline, photo, credit */
body.umh-brand.umh-prose-post #post-area > #post-header,
body.umh-brand.umh-prose-post #post-area > #post-feat-img,
body.umh-brand.umh-prose-post #post-area > #post-feat-img > .post-feat-text {
	display: contents;
}
body.umh-brand.umh-prose-post #post-area > #post-header > *,
body.umh-brand.umh-prose-post #post-area > #post-feat-img > img,
body.umh-brand.umh-prose-post #post-area > #post-feat-img > .post-feat-text > *,
body.umh-brand.umh-prose-post #post-area > #video-embed {
	float: none;
	box-sizing: border-box;
	width: auto;
	max-width: var(--umh-col);
	margin-left: var(--umh-gut);
	margin-right: var(--umh-gut);
}
body.umh-brand.umh-prose-post #post-area .post-cat-link { order: 1; margin-top: 30px; text-decoration: none; }
body.umh-brand.umh-prose-post #post-area h1.post-title { order: 2; }
body.umh-brand.umh-prose-post #post-area span.post-excerpt { order: 3; }
body.umh-brand.umh-prose-post #post-area #post-info-wrap { order: 4; }
body.umh-brand.umh-prose-post #post-area > #video-embed,
body.umh-brand.umh-prose-post #post-area #post-feat-img > img { order: 5; }
body.umh-brand.umh-prose-post #post-area span.feat-caption { order: 6; }
body.umh-brand.umh-prose-post #post-area > #content-area { order: 7; }
body.umh-brand.umh-prose-post #post-area > .mvp-post-img-hide { order: 8; }

/* dek: the excerpt, in serif under the headline */
body.umh-brand.umh-prose-post #post-area span.post-excerpt { display: block; margin-top: 14px; }
body.umh-brand.umh-prose-post span.post-excerpt p,
body.umh-brand.umh-prose-post #content-main span.post-excerpt p {
	width: auto;
	margin: 0;
	color: var(--umh-ink-2);
	font-family: var(--umh-font-text);
	font-size: clamp(18px, .5vw + 15px, 21px);
	font-weight: 400;
	line-height: 1.45;
}
/* featured photo + credit (a fixed 3:2 box, so a missing photo keeps the layout) */
body.umh-brand.umh-prose-post #post-area #post-feat-img > img {
	display: block;
	/* the gutter margins (above) sit outside the width: 100% ran 22px off a 768 tablet (launch review Oct 23) */
	width: calc(100% - 2 * var(--umh-gut));
	height: auto;
	margin-top: 22px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--umh-tint);
}
body.umh-brand.umh-prose-post #post-feat-img { max-height: none; overflow: visible; line-height: 1.4; }
body.umh-brand.umh-prose-post .post-feat-text { background: none; padding: 0; position: static; width: auto; }
body.umh-brand.umh-prose-post span.feat-caption {
	position: static;
	display: block;
	width: auto;
	margin-top: 7px;
	color: var(--umh-muted);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-meta);
	line-height: 1.4;
	text-align: left;
	text-transform: none;
}
/* the body column */
body.umh-brand.umh-prose-post #content-area {
	float: none;
	box-sizing: border-box;
	width: 100%;
	padding: 26px var(--umh-gut) 40px;
}
body.umh-brand.umh-prose-post .post-cont-out:not(:has(#post-sidebar-wrap)) { margin-right: 0; }
body.umh-brand.umh-prose-post .post-cont-out:not(:has(#post-sidebar-wrap)) .post-cont-in { margin-right: 0; }
body.umh-brand.umh-prose-post #content-main { max-width: var(--umh-col); }

/* ---------- reading text: direct children of the_content only ---------- */
body.umh-brand #umh-prose { display: block; }
body.umh-brand #umh-prose > :is(p, ul, ol, dl) ,
body.umh-brand #umh-prose > :is(ul, ol) > li,
body.umh-brand #umh-prose > dl > dd {
	color: var(--umh-ink);
	font-family: var(--umh-font-text);
	font-size: var(--umh-fs-body);
	font-weight: 400;
	line-height: var(--umh-lh-body);
	font-optical-sizing: auto;
	letter-spacing: 0;
	text-transform: none;
}
body.umh-brand #umh-prose > p { margin: 0 0 1.05em; max-width: none; }
body.umh-brand #umh-prose > :is(p, ul, ol, blockquote, dl) a:not(:has(img)),
body.umh-brand #umh-prose > :is(ul, ol) > li a:not(:has(img)) {
	color: var(--umh-ink);
	font-weight: inherit;
	text-decoration: underline;
	text-decoration-color: var(--umh-label);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
body.umh-brand #umh-prose > :is(p, ul, ol, blockquote, dl) a:not(:has(img)):hover { text-decoration-thickness: 2px; }
body.umh-brand #umh-prose > :is(p, ul, ol, blockquote) :is(strong, b) { font-weight: 700; }

body.umh-brand #umh-prose > :is(h2, h3, h4, h5, h6) {
	width: auto;
	color: var(--umh-ink);
	font-family: var(--umh-font-display);
	letter-spacing: -.005em;
	text-transform: none;
	overflow: visible;
}
body.umh-brand #umh-prose > h2 {
	margin: 1.6em 0 .5em;
	font-size: var(--umh-fs-h2);
	font-weight: 800;
	font-variation-settings: "wdth" var(--umh-wdth-h2);
	line-height: 1.1;
}
body.umh-brand #umh-prose > h3 {
	margin: 1.5em 0 .45em;
	font-size: var(--umh-fs-h3);
	font-weight: 700;
	line-height: 1.25;
}
body.umh-brand #umh-prose > :is(h4, h5, h6) {
	margin: 1.4em 0 .4em;
	font-size: var(--umh-fs-item);
	font-weight: 700;
	line-height: 1.3;
}

/* lists */
body.umh-brand #umh-prose > :is(ul, ol) {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
	max-width: none;
}
body.umh-brand #umh-prose > ul { list-style: disc outside; }
body.umh-brand #umh-prose > ol { list-style: decimal outside; }
body.umh-brand #umh-prose > :is(ul, ol) > li { margin: 0 0 .45em; padding-left: .2em; }
body.umh-brand #umh-prose > ul > li::marker { color: var(--umh-muted); }
body.umh-brand #umh-prose > ol > li::marker { color: var(--umh-label); font-family: var(--umh-font-ui); font-weight: 700; font-variant-numeric: tabular-nums; }

/* BLOCK QUOTE (every plain <blockquote>): a quoted excerpt, quieter than the text around it */
body.umh-brand #umh-prose > blockquote {
	position: static;
	float: none;
	width: auto;
	max-width: none;
	margin: 1.2em 0 1.3em;
	padding: 0 0 0 20px;
	border: 0;
	border-left: 2px solid var(--umh-rule);
	background: none;
	color: var(--umh-ink-2);
	font-style: normal;
	quotes: none;
}
body.umh-brand #umh-prose > blockquote::before,
body.umh-brand #umh-prose > blockquote::after { content: none; display: none; }
body.umh-brand #umh-prose > blockquote :is(p, li) {
	margin: 0 0 .9em;
	max-width: none;
	color: var(--umh-ink-2);
	font-family: var(--umh-font-text);
	font-size: var(--umh-fs-read);
	font-style: normal;
	font-weight: 400;
	line-height: var(--umh-lh-body);
	letter-spacing: 0;
	text-indent: 0;
	text-transform: none;
}
body.umh-brand #umh-prose > blockquote :is(p, li):last-child { margin-bottom: 0; }
body.umh-brand #umh-prose > blockquote :is(em, i) { font-style: italic; }
body.umh-brand #umh-prose > blockquote :is(cite, footer),
body.umh-brand #umh-prose > blockquote p cite {
	display: block;
	margin-top: 8px;
	color: var(--umh-muted);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-small);
	font-style: normal;
	font-weight: 500;
	line-height: var(--umh-lh-ui);
}

/* PULL QUOTE (opt-in: the editor's "Pull quote" style, or the block editor's pullquote) */
body.umh-brand #umh-prose > :is(blockquote.pullquote, blockquote.pull-quote, .umh-pullquote, .wp-block-pullquote) {
	margin: 30px 0;
	padding: 2px 0 2px 22px;
	border: 0;
	border-left: 3px solid var(--umh-ink);
	background: none;
	color: var(--umh-ink);
	text-align: left;
	quotes: "\201C" "\201D";
}
body.umh-brand #umh-prose > .wp-block-pullquote > blockquote { margin: 0; padding: 0; border: 0; }
body.umh-brand #umh-prose > :is(blockquote.pullquote, blockquote.pull-quote, .umh-pullquote, .wp-block-pullquote) p {
	margin: 0 0 .5em;
	color: var(--umh-ink);
	font-family: var(--umh-font-text);
	font-size: var(--umh-fs-quote);
	font-style: italic;
	font-weight: 500;
	line-height: 1.35;
}
body.umh-brand #umh-prose > :is(blockquote.pullquote, blockquote.pull-quote, .umh-pullquote, .wp-block-pullquote) p:first-of-type::before {
	content: open-quote;
	display: inline-block;
	width: .42em;
	margin-left: -.42em;
}
body.umh-brand #umh-prose > :is(blockquote.pullquote, blockquote.pull-quote, .umh-pullquote, .wp-block-pullquote) :is(cite, footer) {
	display: block;
	margin-top: 10px;
	color: var(--umh-muted);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-small);
	font-style: normal;
	font-weight: 400;
	text-transform: none;
}
body.umh-brand #umh-prose > :is(blockquote.pullquote, blockquote.pull-quote, .umh-pullquote, .wp-block-pullquote) :is(cite, footer) :is(b, strong) { color: var(--umh-ink); font-weight: 700; }

/* embedded tweets / Instagram / TikTok keep their own look */
body.umh-brand #umh-prose > blockquote:is(.twitter-tweet, .instagram-media, .tiktok-embed, .wp-embedded-content) { border-left: 0; padding: 0; color: inherit; }
body.umh-brand #umh-prose > blockquote:is(.twitter-tweet, .instagram-media, .tiktok-embed) p { font-size: var(--umh-fs-ui); color: inherit; }

/* tables: label-style heads, 2px rule, tabular right-aligned numbers, full column width */
body.umh-brand #umh-prose > :is(table, .wp-block-table > table, figure > table) {
	width: 100%;
	max-width: 100%;
	margin: 26px 0 28px;
	border-collapse: collapse;
	border-top: var(--umh-rule-heavy);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-ui);
	font-variant-numeric: tabular-nums;
	color: var(--umh-ink);
	background: none;
}
body.umh-brand #umh-prose > .wp-block-table { margin: 0; overflow-x: auto; }
body.umh-brand #umh-prose > :is(table, .wp-block-table > table, figure > table) :is(th, thead td) {
	padding: 10px 8px 7px;
	border: 0;
	border-bottom: 1px solid var(--umh-ink);
	background: none;
	color: var(--umh-muted);
	font-size: var(--umh-fs-label);
	font-weight: 700;
	letter-spacing: var(--umh-track-label);
	line-height: 1.2;
	text-align: right;
	text-transform: uppercase;
}
body.umh-brand #umh-prose > :is(table, .wp-block-table > table, figure > table) td {
	padding: 9px 8px;
	border: 0;
	border-bottom: 1px solid var(--umh-rule);
	background: none;
	color: var(--umh-ink);
	font-family: var(--umh-font-ui);
	font-size: inherit;
	line-height: 1.3;
	text-align: right;
	text-transform: none;
	white-space: nowrap;
}
body.umh-brand #umh-prose > :is(table, .wp-block-table > table, figure > table) :is(th, td):first-child { padding-left: 0; text-align: left; font-weight: 600; white-space: normal; }
body.umh-brand #umh-prose > :is(table, .wp-block-table > table, figure > table) th:first-child { font-weight: 700; }
body.umh-brand #umh-prose > :is(table, .wp-block-table > table, figure > table) :is(th, td):last-child { padding-right: 0 !important; }
body.umh-brand #umh-prose > :is(table, .wp-block-table > table, figure > table) tbody tr:hover td { background: var(--umh-tint); }
body.umh-brand #umh-prose > :is(table, .wp-block-table > table, figure > table) caption { caption-side: bottom; padding-top: 8px; color: var(--umh-muted); font-size: var(--umh-fs-small); text-align: left; }

/* images: the full column (same width as the featured photo), never upscaled; captions in small Archivo */
body.umh-brand #umh-prose img { border-radius: 0; height: auto; max-width: 100%; }
body.umh-brand #umh-prose > :is(p, a, .umh-zoomable) img:not(.emoji):not(.wp-smiley):not(.alignleft):not(.alignright),
body.umh-brand #umh-prose > img:not(.alignleft):not(.alignright) {
	display: block;
	width: auto;
	max-width: 100%;
	margin: 6px auto;
}
body.umh-brand #umh-prose > p:has(> img:only-child, > a:only-child > img, > .umh-zoomable:only-child) { margin: 26px 0; }
body.umh-brand #umh-prose > :is(.wp-caption, figure, .wp-block-image):not(.alignleft):not(.alignright) {
	width: auto !important;
	max-width: 100%;
	margin: 28px 0;
	padding: 0;
	border: 0;
	background: none;
}
body.umh-brand #umh-prose > :is(.wp-caption, figure, .wp-block-image) img { display: block; width: auto; max-width: 100%; margin: 0 auto; }
body.umh-brand #umh-prose > :is(.wp-caption, figure, .wp-block-image) :is(.wp-caption-text, figcaption) {
	margin: 7px 0 0;
	padding: 0;
	max-width: none;
	color: var(--umh-muted);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-meta);
	font-style: normal;
	line-height: 1.4;
	text-align: left;
}
/* floated images stay inside the text, at most ~45% wide */
body.umh-brand #umh-prose :is(img, .wp-caption, figure).alignleft { float: left; max-width: 45%; margin: 6px 22px 12px 0; }
body.umh-brand #umh-prose :is(img, .wp-caption, figure).alignright { float: right; max-width: 45%; margin: 6px 0 12px 22px; }
body.umh-brand #umh-prose :is(.wp-caption, figure):is(.alignleft, .alignright) img { width: 100%; }
body.umh-brand #umh-prose img.aligncenter { margin-left: auto; margin-right: auto; }
body.umh-brand #umh-prose img:is([src$=".png"], [src$=".svg"]) { background: var(--umh-img-backing); }
body.umh-brand #umh-prose > hr { border: 0; border-top: var(--umh-rule-thin); margin: 32px 0; opacity: 1; }

/* wide charts / infographics (.alignwide, or marked .umh-wide by umh-brand.js: natural width >= 1200): wider than the
   column on large screens, growing into the left margin, never into the sidebar */
@media screen and (min-width: 1200px) {
	body.umh-brand.umh-prose-post #umh-prose > :is(.alignwide, .umh-wide) {
		--umh-bx: min(220px, max(0px, calc((100vw - 1068px) / 2 - 24px)));
		width: calc(100% + var(--umh-bx)) !important;
		max-width: none;
		margin-left: calc(var(--umh-bx) * -1) !important;
	}
	body.umh-brand.umh-prose-post #umh-prose > :is(.alignwide, .umh-wide) img { width: 100%; max-width: 100%; }
	body.umh-brand.umh-prose-post #umh-prose > :is(.alignwide, .umh-wide) :is(.wp-caption-text, figcaption) { padding-left: var(--umh-bx); }
}
body.umh-brand #umh-prose > .alignfull { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; }

/* video embeds: 16:9 boxes (no letterbox bands from the width/height attributes) */
body.umh-brand #umh-prose :is(iframe[src*="player.vimeo.com"], iframe[src*="youtube.com/embed"], iframe[src*="youtube-nocookie.com"], iframe[src*="youtu.be"]),
body.umh-brand #umh-prose > :is(.wp-block-embed.is-type-video, figure.wp-embed-aspect-16-9) iframe {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
	aspect-ratio: 16 / 9;
	margin: 0;
	border: 0;
}
body.umh-brand #umh-prose .wp-embed-aspect-4-3 iframe { aspect-ratio: 4 / 3; }
body.umh-brand #umh-prose .wp-embed-aspect-1-1 iframe { aspect-ratio: 1 / 1; }
body.umh-brand #umh-prose .wp-embed-aspect-9-16 iframe { aspect-ratio: 9 / 16; max-width: 400px; }
body.umh-brand #umh-prose .wp-embed-aspect-21-9 iframe { aspect-ratio: 21 / 9; }
body.umh-brand #umh-prose .wp-embed-aspect-18-9 iframe { aspect-ratio: 2 / 1; }
body.umh-brand #umh-prose > p:has(> iframe:only-child) { margin: 1.4em 0; line-height: 0; font-size: 0; }
body.umh-brand #umh-prose > :is(.wp-block-embed, .wp-video, iframe) { margin: 1.4em 0; max-width: 100%; }
body.umh-brand #umh-prose .wp-block-embed__wrapper::before { content: none; }
body.umh-brand #umh-prose .wp-block-embed__wrapper { position: static; }

/* click / tap to enlarge (umh-brand.js) */
body.umh-brand .umh-zoomable { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; cursor: zoom-in; }
body.umh-brand #umh-prose img[data-umh-zoom] { cursor: zoom-in; }
body.umh-brand .umh-zoom-hint {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 5px 9px;
	border: 0;
	border-radius: var(--umh-radius-control);
	background: rgba(17, 26, 36, .78);
	color: #fff;
	font: 600 var(--umh-fs-meta)/1 var(--umh-font-ui);
	pointer-events: none;
}
.umh-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: #0b1118;
	color: #fff;
	font-family: var(--umh-font-ui);
}
.umh-lightbox[hidden] { display: none; }
.umh-lightbox__bar { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; flex: none; }
.umh-lightbox__bar button {
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: var(--umh-radius-control);
	background: transparent;
	color: #fff;
	font: 600 var(--umh-fs-base, 14px)/1 var(--umh-font-ui);
	cursor: pointer;
}
.umh-lightbox__bar button:focus-visible { outline: none; box-shadow: var(--umh-focus); }
.umh-lightbox__stage { flex: 1 1 auto; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 0 12px 16px; touch-action: pan-x pan-y pinch-zoom; }
.umh-lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; cursor: zoom-in; }
.umh-lightbox--actual .umh-lightbox__stage { align-items: flex-start; justify-content: flex-start; }
.umh-lightbox--actual .umh-lightbox__stage img { max-width: none; max-height: none; cursor: zoom-out; }

/* tags: "Related items" + underlined links, no caps */
body.umh-brand .post-tags {
	float: none;
	display: block;
	clear: both;
	margin: 30px 0 0;
	padding: 14px 0 0;
	border-top: var(--umh-rule-thin);
	color: var(--umh-ink);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-ui);
	line-height: 1.7;
	text-transform: none;
}
body.umh-brand span.post-tags-header {
	margin-right: 10px;
	color: var(--umh-label);
	font-size: var(--umh-fs-label);
	font-weight: 700;
	letter-spacing: var(--umh-track-label);
	text-transform: uppercase;
}
body.umh-brand .post-tags a {
	color: var(--umh-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--umh-rule);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-transform: none;
}
body.umh-brand .post-tags a:hover { text-decoration-color: currentColor; }

/* share bars + prev/next */
body.umh-brand :is(.social-sharing-top, .social-sharing-bot) span.social-text { font-family: var(--umh-font-ui); font-weight: 600; text-transform: none; }
body.umh-brand :is(.fb-but1, .twitter-but1, .whatsapp-but1, .email-but1, .email-but, .pinterest-but1) { border-radius: var(--umh-radius-control); }
body.umh-brand .prev-next-text a,
body.umh-brand .prev-next-text a:visited,
body.umh-brand .prev-next-text a:hover { background: var(--umh-bar); color: var(--umh-on-bar); font-family: var(--umh-font-ui); font-weight: 600; text-transform: none; }

/* series header (UMH_Series_Header, Oct 19, 2026): the series' standing line at the top of the body, its off-site
   links at the end; quiet, never a second pitch */
body.umh-brand #umh-prose > p:is(.umh-series-line, .umh-series-more) {
	color: var(--umh-muted);
	font-family: var(--umh-font-ui);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
}
body.umh-brand #umh-prose > p.umh-series-line { margin: 0 0 22px; font-style: italic; }
body.umh-brand #umh-prose > p.umh-series-more { margin: 28px 0 0; padding-top: 12px; border-top: 1px solid var(--umh-rule); font-size: 14px; }
body.umh-brand #umh-prose > p.umh-series-more a { color: var(--umh-ink-2); text-decoration-color: var(--umh-rule); }
body.umh-brand #umh-prose > p.umh-series-more a:hover { color: var(--umh-ink); text-decoration-color: currentColor; }

/* ======================================================================= pages (page.php) */
body.umh-brand.umh-prose-post.page #post-header { margin-top: 26px; }

/* ======================================================================= lists: home, archives, tags, search */
/* archive / tag / category / search / author titles: the page-title face and scale (h1.post-title above), not the old 22px
   section head under a heavy rule (launch review Oct 23, design D-v / prior U8) */
body.umh-brand h1.arch-head,
body.umh-brand h1.cat-head {
	margin: 26px 0 22px;
	padding-top: 0;
	border-top: 0;
	color: var(--umh-ink);
	font-family: var(--umh-font-display);
	font-size: var(--umh-fs-display);
	font-weight: 800;
	font-variation-settings: "wdth" var(--umh-wdth-display);
	letter-spacing: -.012em;
	line-height: var(--umh-lh-display);
	text-align: left;
	text-transform: none;
	text-wrap: balance;
}
body.umh-brand #home-mid-wrap h1.arch-head { box-sizing: border-box; width: auto; margin-left: 1.87265917603%; margin-right: 1.87265917603%; }
/* the search title sits inside the padded list column: no second inset, so it lines up with the results */
body.umh-brand #home-mid-wrap #archive-list-wrap h1.arch-head:is(*, #umh-z) { margin-left: 0; margin-right: 0; }

body.umh-brand ul.archive-list li {
	border-top: 1px solid var(--umh-rule);
	padding: 20px 0;
}
body.umh-brand ul.archive-list li:first-child { border-top: 0; padding-top: 4px; }
body.umh-brand ul.archive-list li > a { display: block; text-decoration: none; color: inherit; }
/* text first, photo on the right */
body.umh-brand ul.archive-list .archive-list-out {
	float: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: 24px;
	align-items: start;
	margin: 0;
}
body.umh-brand ul.archive-list .archive-list-out > .archive-list-img { grid-column: 2; grid-row: 1; }
body.umh-brand ul.archive-list .archive-list-out > .archive-list-in { grid-column: 1; grid-row: 1; margin: 0; }
body.umh-brand ul.archive-list .archive-list-img {
	float: none;
	width: 100%;
	max-height: none;
	margin: 0;
	aspect-ratio: 3 / 2;
	background: var(--umh-tint);
}
body.umh-brand ul.archive-list .archive-list-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
}
body.umh-brand ul.archive-list .archive-list-img .mob-img { display: none; }
body.umh-brand ul.archive-list .archive-list-img .reg-img { display: block; }
body.umh-brand .feat-info-wrap { display: none; }

body.umh-brand span.side-list-cat {
	display: block;
	float: none;
	margin: 0 0 6px;
	padding: 0;
	background: none;
	color: var(--umh-label);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-label);
	font-weight: 700;
	letter-spacing: var(--umh-track-label);
	line-height: 1.2;
	text-transform: uppercase;
}
body.umh-brand span.side-list-cat:empty { display: none; }
body.umh-brand .archive-list-text { float: none; }
body.umh-brand .archive-list-text h2,
body.umh-brand ul.archive-list li:hover .archive-list-text h2 {
	float: none;
	color: var(--umh-ink) !important;
	font-family: var(--umh-font-display);
	font-size: var(--umh-fs-section);
	font-weight: 800;
	font-variation-settings: "wdth" var(--umh-wdth-display);
	letter-spacing: -.01em;
	line-height: 1.08;
	text-transform: none;
	text-wrap: balance;
}
body.umh-brand ul.archive-list li:hover .archive-list-text h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.umh-brand .archive-list-text p {
	float: none;
	margin-top: 7px;
	color: var(--umh-ink-2);
	font-family: var(--umh-font-text);
	font-size: var(--umh-fs-read);
	line-height: 1.5;
}

/* home, page 1: the first story with a photo leads */
body.umh-brand.home:not(.paged) ul.archive-list > li:first-child .archive-list-out {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}
body.umh-brand.home:not(.paged) ul.archive-list > li:first-child .archive-list-out > .archive-list-img { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; }
body.umh-brand.home:not(.paged) ul.archive-list > li:first-child .archive-list-out > .archive-list-in { grid-column: 1; grid-row: 2; }
body.umh-brand.home:not(.paged) ul.archive-list > li:first-child .archive-list-text h2 {
	font-size: var(--umh-fs-display);
	line-height: var(--umh-lh-display);
	letter-spacing: -.012em;
}
body.umh-brand.home:not(.paged) ul.archive-list > li:first-child .archive-list-text p {
	font-size: var(--umh-fs-item);
	line-height: 1.45;
	max-width: 60ch;
	margin-top: 10px;
}
body.umh-brand.home:not(.paged) ul.archive-list > li:first-child { padding-bottom: 26px; border-bottom: var(--umh-rule-heavy); }
body.umh-brand.home:not(.paged) ul.archive-list > li:nth-child(2) { border-top: 0; }

/* column layout option */
body.umh-brand ul.archive-col-list li .archive-list-text h2 { font-size: var(--umh-fs-section); }
/* the column grid sized by its cards (owner, Oct 19, 2026: rows with big gaps once the teasers went): the theme fixed
   every card at 320 px tall (floats, a -1.9% margin trick); now a grid, 3 across on desktop, 2 on tablets, 1 on phones */
body.umh-brand ul.archive-col-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 28px 24px;
	float: none;
	width: 100%;
	margin: 0 0 28px;
}
body.umh-brand ul.archive-col-list::before, body.umh-brand ul.archive-col-list::after { content: none; }
body.umh-brand ul.archive-col-list > li { float: none; width: auto; height: auto; margin: 0; overflow: visible; }
body.umh-brand ul.archive-col-list li .archive-list-img { max-height: none; aspect-ratio: 16 / 10; overflow: hidden; }
body.umh-brand ul.archive-col-list li .archive-list-img img { width: 100%; height: 100%; object-fit: cover; }

/* the author page: one rule over the author box, one over "Posts By" (owner, Oct 19, 2026: "why are there double bars?").
   The "Posts By" heading slid under the floated author box, so its rule drew at the top of the page; the name's own
   rule (h1.cat-head) made the second bar */
body.umh-brand.author .author-page-box { display: flow-root; float: none; padding: 14px 0 16px; border-top: var(--umh-rule-heavy); }
body.umh-brand.author .author-page-text h1.cat-head { margin: 4px 0 6px; padding-top: 0; border-top: 0; }
body.umh-brand.author :is(.author-box-bot, h4.post-header) { clear: both; float: none; }
body.umh-brand.author h4.post-header { margin-top: 28px; }

/* pagination + "more posts" */
body.umh-brand .pagination span,
body.umh-brand .pagination a,
body.umh-brand .pagination a:visited {
	min-width: 40px;
	min-height: 40px;
	box-sizing: border-box;
	border: 1px solid var(--umh-rule);
	border-radius: var(--umh-radius-control);
	background: var(--umh-paper);
	color: var(--umh-ink);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-ui);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 38px;
	padding: 0 12px;
	box-shadow: none;
	text-transform: none;
}
body.umh-brand .pagination .current,
body.umh-brand .pagination a:hover { background: var(--umh-ink); border-color: var(--umh-ink); color: var(--umh-paper); }
body.umh-brand span.more-posts-text,
body.umh-brand a.inf-more-but,
body.umh-brand #comments-button a,
body.umh-brand #comments-button span.comment-but-text {
	border: 1px solid var(--umh-ink);
	border-radius: var(--umh-radius-control);
	background: transparent;
	color: var(--umh-ink) !important;
	font-family: var(--umh-font-ui);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}
body.umh-brand span.more-posts-text:hover,
body.umh-brand a.inf-more-but:hover,
body.umh-brand #comments-button a:hover,
body.umh-brand #comments-button span.comment-but-text:hover { background: var(--umh-tint); color: var(--umh-ink) !important; }

/* ======================================================================= sidebar widgets */
body.umh-brand h4.post-header {
	float: none;
	display: block;
	margin: 0 0 12px;
	padding: 9px 0 0;
	border-top: var(--umh-rule-heavy);
	text-align: left;
	background: none;
}
body.umh-brand span.post-header,
body.umh-brand span.post-header a {
	float: none;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--umh-ink);
	font-family: var(--umh-font-display);
	font-size: var(--umh-fs-h3);
	font-weight: 800;
	font-variation-settings: "wdth" var(--umh-wdth-h2);
	letter-spacing: -.005em;
	line-height: 1.1;
	text-transform: none;
}
body.umh-brand .side-widget { margin: 0 0 34px; padding: 0; }
/* block widgets (Search, Latest Posts, Latest Comments) */
body.umh-brand .side-widget :is(h2, h3).wp-block-heading,
body.umh-brand .side-widget .wp-block-search__label,
body.umh-brand .side-widget .wp-block-group > h2 {
	display: block;
	margin: 0 0 12px;
	padding-top: 9px;
	border-top: var(--umh-rule-heavy);
	color: var(--umh-ink);
	font-family: var(--umh-font-display);
	font-size: var(--umh-fs-h3);
	font-weight: 800;
	font-variation-settings: "wdth" var(--umh-wdth-h2);
	line-height: 1.1;
	text-transform: none;
}
body.umh-brand .side-widget .wp-block-search__inside-wrapper { display: flex; gap: 8px; border: 0; padding: 0; }
body.umh-brand .side-widget .wp-block-search__input { flex: 1 1 auto; min-width: 0; }
body.umh-brand .side-widget :is(.wp-block-latest-posts, .wp-block-latest-comments) { margin: 0; padding: 0; list-style: none; }
body.umh-brand .side-widget :is(.wp-block-latest-posts, .wp-block-latest-comments) > li {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--umh-rule-2);
	color: var(--umh-ink-2);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-base);
	font-weight: 500;
	line-height: 1.35;
}
body.umh-brand .side-widget :is(.wp-block-latest-posts, .wp-block-latest-comments) a { color: var(--umh-ink); font-weight: 700; text-decoration: none; }
body.umh-brand .side-widget :is(.wp-block-latest-posts, .wp-block-latest-comments) a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.umh-brand .side-widget .wp-block-latest-comments__comment-excerpt p { margin: 4px 0 0; font-size: var(--umh-fs-small); color: var(--umh-muted); }
body.umh-brand #home-mid-wrap > .home-widget { border-color: var(--umh-rule); }
body.umh-brand .side-widget .textwidget p,
body.umh-brand .side-widget .textwidget p a,
body.umh-brand .side-widget .textwidget span a {
	color: var(--umh-ink-2);
	font-family: var(--umh-font-text);
	font-size: var(--umh-fs-read);
	font-weight: 400;
	line-height: 1.45;
}
body.umh-brand .side-widget .textwidget center { text-align: left; }
/* the Join button (production's Additional CSS styles .content-btn with !important on every property) */
body.umh-brand .side-widget a.pmpro_btn,
body.umh-brand .side-widget .pmpro_btn,
body.umh-brand .side-widget a.content-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 44px;
	margin: 14px 0 0 !important;
	padding: 0 18px !important;
	border: 2px solid var(--umh-ink) !important;
	border-radius: var(--umh-radius-control) !important;
	background: transparent !important;   /* secondary: the page's one maize is the header Join or the in-body join (Oct 15) */
	background-image: none !important;
	box-shadow: none;
	color: var(--umh-ink) !important;
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-ui) !important;
	font-weight: 700 !important;
	letter-spacing: 0;
	line-height: 1.1;
	text-shadow: none !important;
	text-transform: none !important;
}
body.umh-brand .side-widget .textwidget p:empty,
body.umh-brand .side-widget .textwidget br { display: none; }
body.umh-brand .side-widget .textwidget p { margin: 0; }
body.umh-brand .side-widget :is(.pmpro_btn, a.content-btn):hover { background: var(--umh-tint) !important; }

/* form inputs (sidebar newsletter, search, comments) */
body.umh-brand :is(.side-widget, #comments, #respond, .search-fly-wrap, #post-404, .foot-widget) :is(input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], textarea, select) {
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--umh-muted);
	border-radius: var(--umh-radius-control);
	background: var(--umh-paper);
	box-shadow: none;
	color: var(--umh-ink);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-base);
	letter-spacing: 0;
	text-transform: none;
}
body.umh-brand :is(.side-widget, #comments, #respond) :is(input, textarea, select):focus { outline: none; border-color: var(--umh-ink); box-shadow: var(--umh-focus); }
body.umh-brand :is(.side-widget, #comments, #respond) ::placeholder { color: var(--umh-muted); text-transform: none; opacity: 1; }
body.umh-brand .side-widget .yikes-easy-mc-form { display: flex; gap: 8px; align-items: stretch; }
body.umh-brand .side-widget .yikes-easy-mc-form label { flex: 1 1 auto; margin: 0; padding: 0 !important; width: auto !important; min-width: 0 !important; }
body.umh-brand .side-widget .yikes-easy-mc-form label.submit-button-inline-label { flex: 0 0 auto; }
body.umh-brand .side-widget .yikes-easy-mc-form input[type="email"] { height: 44px; display: block; }
body.umh-brand .side-widget .yikes-easy-mc-form .empty-label { display: none; }
body.umh-brand .side-widget .yikes-easy-mc-form input[type="email"] { width: 100%; margin: 0; }
body.umh-brand :is(.side-widget, #comments, #respond) :is(button, input[type="submit"]):not(.umh-cap-b) {
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--umh-ink);
	border-radius: var(--umh-radius-control);
	background: var(--umh-paper);
	box-shadow: none;
	color: var(--umh-ink) !important;
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-ui);
	font-weight: 700;
	letter-spacing: 0;
	text-shadow: none;
	text-transform: none;
	cursor: pointer;
	width: auto;
	height: auto;
}
body.umh-brand :is(.side-widget, #comments, #respond) :is(button, input[type="submit"]):not(.umh-cap-b):hover { background: var(--umh-tint); }

/* Trending / Popular: a numbered list of headlines with rules */
body.umh-brand .mvp_pop_widget ul.blog-widget-list { counter-reset: umh-pop; }
body.umh-brand ul.blog-widget-list li {
	counter-increment: umh-pop;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 4px;
	float: none;
	width: 100%;
	margin: 0;
	padding: 11px 0;
	border-top: 0;
	border-bottom: 1px solid var(--umh-rule-2);
}
body.umh-brand ul.blog-widget-list li:first-child { padding-top: 4px; }
body.umh-brand ul.blog-widget-list li::before {
	content: counter(umh-pop);
	color: var(--umh-label);
	font-family: var(--umh-font-display);
	font-size: var(--umh-fs-section);
	font-weight: 800;
	font-variation-settings: "wdth" 75;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
body.umh-brand ul.blog-widget-list li > a { display: block; min-width: 0; color: inherit; text-decoration: none; }
body.umh-brand ul.blog-widget-list .blog-widget-img { display: none; }
body.umh-brand ul.blog-widget-list .blog-widget-text { float: none; width: auto !important; }
body.umh-brand ul.blog-widget-list .blog-widget-text span.side-list-cat { display: none; }
body.umh-brand .blog-widget-text h2,
body.umh-brand #sidebar-wrap .blog-widget-text h2,
body.umh-brand ul.blog-widget-list li:hover .blog-widget-text h2 {
	float: none;
	margin: 0;
	color: var(--umh-ink) !important;
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-base);
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}
body.umh-brand ul.blog-widget-list li:hover .blog-widget-text h2 { text-decoration: underline; text-underline-offset: 3px; }
body.umh-brand ul.blog-widget-list .blog-widget-text p { display: none; }
/* the theme's side lists (Latest / Popular templates) */
body.umh-brand .side-list-text p,
body.umh-brand ul.side-list li:hover .side-list-text p { color: var(--umh-ink) !important; font-family: var(--umh-font-ui); font-weight: 700; font-size: var(--umh-fs-base); line-height: 1.3; text-transform: none; }
body.umh-brand ul.side-list li { border-color: var(--umh-rule-2); }
body.umh-brand #post-right-col ul.side-list li:hover { background: var(--umh-tint); }

/* ======================================================================= footer */
body.umh-brand footer#foot-wrap {
	margin-top: 48px;
	background: var(--umh-bar);
	color: var(--umh-on-bar-2);
	font-family: var(--umh-font-ui);
}
body.umh-brand #foot-top-wrap { background: var(--umh-bar); border-bottom: 1px solid rgba(255, 255, 255, .12); }
body.umh-brand #foot-bot-wrap { background: var(--umh-bar); }
body.umh-brand #foot-widget-wrap { margin-top: 0; margin-bottom: 0; padding: 30px 0 24px; }
body.umh-brand .foot-widget,
body.umh-brand .foot-info-text p {
	color: var(--umh-on-bar-2);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-meta);
	line-height: 1.5;
}
/* widgets in the Footer Widget Area (live has a Trending list there; dev has none): light links and heads on the bar,
   or the site-wide ink link color puts dark text on navy (staging, Oct 18) */
body.umh-brand #foot-widget-wrap .foot-widget :is(h1, h2, h3, h4, .widget-title, .foot-head) { color: var(--umh-on-bar); }
body.umh-brand #foot-widget-wrap .foot-widget a,
body.umh-brand #foot-widget-wrap .foot-widget a:visited { color: var(--umh-on-bar-2); }
body.umh-brand #foot-widget-wrap .foot-widget a:hover { color: var(--umh-on-bar); text-decoration: underline; text-underline-offset: 3px; }
body.umh-brand #foot-widget-wrap .foot-widget :is(li, .umh-tr-item) { border-color: rgba(255, 255, 255, .16); }
/* the link columns (Navigation Menu widgets, wordpress/dev-menus.php; owner, Oct 18): the about block, then one column
   per menu in a grid instead of Flex Mag's three floated thirds; two columns on phones */
body.umh-brand #foot-widget-wrap:has(.widget_nav_menu) {
	display: grid;
	grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, 1fr));
	gap: 28px 32px;
	margin-left: 0;
	/* box-sizing: the phone padding (below) sat outside width:100%, and the theme's 16px right margin on top: the widget area
	   was 422px wide on a 390 phone (launch review Oct 23) */
	margin-right: 0;
	box-sizing: border-box;
	width: 100%;
}
body.umh-brand #foot-widget-wrap:has(.widget_nav_menu) > .foot-widget { float: none; width: auto; margin: 0; }
body.umh-brand #foot-widget-wrap .widget_nav_menu h3.foot-head {
	float: none;
	margin-bottom: 12px;
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-meta);
	letter-spacing: .06em;
}
body.umh-brand #foot-widget-wrap .widget_nav_menu ul.menu { margin: 0; padding: 0; list-style: none; }
body.umh-brand #foot-widget-wrap .widget_nav_menu ul.menu li { float: none; margin: 0 0 8px; padding: 0; border: 0; background: none; }
body.umh-brand #foot-widget-wrap .widget_nav_menu ul.menu li a { display: inline; padding: 0; background: none; white-space: normal; overflow-wrap: anywhere; font-size: var(--umh-fs-meta); line-height: 1.4; }
body.umh-brand #foot-widget-wrap .widget_nav_menu ul.menu li a:hover { background: none; }
body.umh-brand .foot-menu { max-width: none; }
body.umh-brand .foot-menu .menu { white-space: nowrap; }
@media (max-width: 1003px) {
	body.umh-brand #foot-widget-wrap:has(.widget_nav_menu) { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 16px; padding-right: 16px; }
	body.umh-brand #foot-widget-wrap:has(.widget_nav_menu) > .foot-widget:not(.widget_nav_menu) { grid-column: 1 / -1; }
	body.umh-brand .foot-menu, body.umh-brand .foot-menu .menu { float: none; white-space: normal; }
}
/* iPad upright / big phones sideways (owner, Oct 29, 2026: "iPad vertical is off"): the four menus side by side (~190 px
   each) instead of two ~400 px columns half empty; the gray wordmark a size down */
@media (min-width: 768px) and (max-width: 1003px) {
	body.umh-brand #foot-widget-wrap:has(.widget_nav_menu) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; padding-left: 24px; padding-right: 24px; }
	body.umh-brand .foot-logo img[src*="Gray"] { max-width: 220px; }
}
body.umh-brand .foot-logo img { max-height: 44px; width: auto; }
/* the footer's own big gray logo (owner, Oct 19, 2026), not the 44 px cap meant for the header logo */
body.umh-brand .foot-logo img[src*="Gray"] { max-height: none; width: auto; max-width: min(100%, 300px); height: auto; }
body.umh-brand .foot-soc-list li a,
body.umh-brand .foot-soc-list li a i,
body.umh-brand .foot-soc-list li.umh-foot-soc a { color: var(--umh-on-bar-2) !important; }
body.umh-brand .foot-soc-list li a:hover,
body.umh-brand .foot-soc-list li a:hover i { color: var(--umh-on-bar) !important; }
body.umh-brand .foot-menu .menu li a,
body.umh-brand .foot-menu .menu li a:visited {
	color: var(--umh-on-bar-2);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-meta);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.6;
	text-transform: none;
}
body.umh-brand .foot-menu .menu li a:hover { color: var(--umh-on-bar); text-decoration: underline; text-underline-offset: 3px; }
body.umh-brand .foot-menu .menu li.umh-hide-plus a,
body.umh-brand .foot-menu .menu li.umh-join a { color: var(--umh-on-bar); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body.umh-brand .foot-copy p {
	color: var(--umh-on-bar-2);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-small);
	opacity: .85;
}
/* "To Top" (an 8px label on a tile over the gutter on every page): gone; the sticky header bar does the job (Oct 15, 2026) */
body.umh-brand .fly-to-top { display: none !important; }
body.umh-brand .fly-to-top i,
body.umh-brand span.to-top-text { color: var(--umh-on-bar); font-family: var(--umh-font-ui); text-transform: none; }

/* ======================================================================= comments */
body.umh-brand #comments,
body.umh-brand .comments-area,
body.umh-brand #discourse-comments {
	font-family: var(--umh-font-ui);
	color: var(--umh-ink);
}
body.umh-brand :is(#comments, .comments-area) :is(h3, h2.comments-title, .comment-reply-title, h3#reply-title) {
	margin: 32px 0 12px;
	padding-top: 10px;
	border-top: var(--umh-rule-heavy);
	color: var(--umh-ink);
	font-family: var(--umh-font-display);
	font-size: var(--umh-fs-h3);
	font-weight: 800;
	font-variation-settings: "wdth" var(--umh-wdth-h2);
	text-transform: none;
	background: none;
}
body.umh-brand h3.comment-header { background: none; color: var(--umh-ink); }
body.umh-brand :is(#comments, .comments-area) :is(ol.commentlist, ol.comment-list) > li,
body.umh-brand :is(#comments, .comments-area) .comment {
	border: 0;
	border-bottom: 1px solid var(--umh-rule);
	background: none;
	padding: 14px 0;
}
body.umh-brand :is(#comments, .comments-area) :is(.comment-author, .comment-author a, .fn, .comment-meta, .comment-metadata, .comment-meta a, .comment-metadata a) {
	color: var(--umh-muted);
	font-family: var(--umh-font-ui);
	font-size: var(--umh-fs-small);
	font-style: normal;
	text-transform: none;
}
body.umh-brand :is(#comments, .comments-area) :is(.comment-author .fn, .comment-author b) { color: var(--umh-ink); font-weight: 700; }
body.umh-brand :is(#comments, .comments-area) :is(.comment-content, .comment-body, .comment-text) p {
	color: var(--umh-ink);
	font-family: var(--umh-font-text);
	font-size: var(--umh-fs-read);
	line-height: 1.55;
}
body.umh-brand #comments .avatar { border-radius: 0; background: var(--umh-tint); }
body.umh-brand #respond :is(p, span, label, small, .comment-notes, .logged-in-as, #email-notes, .required-field-message) { color: var(--umh-muted); font-family: var(--umh-font-ui); font-size: var(--umh-fs-small); }
body.umh-brand #respond .required { color: var(--umh-bad); }
body.umh-brand #respond textarea { background: var(--umh-paper); border-color: var(--umh-muted); box-shadow: none; }
body.umh-brand #respond #submit,
body.umh-brand #respond input[type="submit"] { background: var(--umh-paper); color: var(--umh-ink) !important; border: 1px solid var(--umh-ink); }
/* ad slots: untouched, framed on a light backing so a white ad doesn't float on the dark page */
body.umh-brand :is(#article-ad, #foot-ad-wrap, .home-widget.widget_text):has(iframe, img, ins) { background: var(--umh-img-backing); }

/* ======================================================================= dark-mode details the tokens can't reach */
/* the theme hard-codes #222 / #fff / #ddd on many elements; under the brand those all read tokens above. What's left: */
html[data-umh-theme="dark"] body.umh-brand :is(#content-main, .side-widget) :is(iframe, embed, object) { color-scheme: light; }
html[data-umh-theme="dark"] body.umh-brand .foot-logo img { background: none; }
@media (prefers-color-scheme: dark) {
	html[data-umh-theme="auto"] body.umh-brand :is(#content-main, .side-widget) :is(iframe, embed, object) { color-scheme: light; }
}

/* ======================================================================= phone */
@media screen and (max-width: 767px) {
	body.umh-brand { --umh-gut: 16px; }
	body.umh-brand.umh-prose-post #post-area .post-cat-link { margin-top: 20px; }
	body.umh-brand #post-info-wrap { margin-top: 14px; }
	body.umh-brand.umh-prose-post #post-area #post-feat-img > img { width: 100%; margin-top: 16px; margin-left: 0; margin-right: 0; max-width: none; }
	body.umh-brand.umh-prose-post #post-area span.feat-caption { margin-top: 6px; }
	body.umh-brand.umh-prose-post #content-area { padding: 20px var(--umh-gut) 30px; }
	body.umh-brand #umh-prose > :is(p, ul, ol) ,
	body.umh-brand #umh-prose > :is(ul, ol) > li { font-size: var(--umh-fs-item); }
	body.umh-brand #umh-prose > blockquote { padding-left: 14px; }
	body.umh-brand #umh-prose > blockquote :is(p, li) { font-size: var(--umh-fs-item); }
	body.umh-brand #umh-prose > :is(table, .wp-block-table > table, figure > table) { font-size: var(--umh-fs-data); }
	body.umh-brand #umh-prose > :is(table, .wp-block-table > table, figure > table) :is(th, td) { padding-left: 6px; padding-right: 6px; }
	/* wide images and charts: edge to edge */
	body.umh-brand #umh-prose > :is(.alignwide, .alignfull, .umh-wide) { width: auto !important; max-width: none; margin-left: calc(var(--umh-gut) * -1) !important; margin-right: calc(var(--umh-gut) * -1) !important; }
	body.umh-brand #umh-prose > :is(.alignwide, .alignfull, .umh-wide) img { width: 100%; }
	body.umh-brand #umh-prose > :is(.alignwide, .alignfull, .umh-wide) :is(.wp-caption-text, figcaption) { padding: 0 var(--umh-gut); }
	body.umh-brand #umh-prose :is(img, .wp-caption, figure):is(.alignleft, .alignright) { float: none; max-width: 100%; margin: 20px 0; }
	body.umh-brand #archive-list-wrap { box-sizing: border-box; width: 100%; padding: 0 var(--umh-gut) 20px; }
	body.umh-brand #home-mid-wrap h1.arch-head { margin-left: var(--umh-gut); margin-right: var(--umh-gut); }
	body.umh-brand ul.archive-list li { padding: 16px 0; }
	body.umh-brand ul.archive-list .archive-list-out { grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; }
	body.umh-brand ul.archive-list .archive-list-img { aspect-ratio: 1 / 1; }
	body.umh-brand .archive-list-text h2,
	body.umh-brand ul.archive-list li:hover .archive-list-text h2 { font-size: var(--umh-fs-section); }
	body.umh-brand .archive-list-text p { display: none; }
	body.umh-brand.home:not(.paged) ul.archive-list > li:first-child .archive-list-out { grid-template-columns: minmax(0, 1fr); }
	body.umh-brand.home:not(.paged) ul.archive-list > li:first-child .archive-list-img { aspect-ratio: 3 / 2; margin: 0 calc(var(--umh-gut) * -1); width: auto; }
	body.umh-brand.home:not(.paged) ul.archive-list > li:first-child .archive-list-text p { display: block; font-size: var(--umh-fs-item); }

	body.umh-brand #post-right-col,
	body.umh-brand #arch-right-col { box-sizing: border-box; padding: 0 var(--umh-gut); }
	body.umh-brand nav.fly-nav-menu ul li a { font-size: var(--umh-fs-item); }
	body.umh-brand .umh-theme-flip { margin-top: 3px; }
	body.umh-brand .nav-right-wrap:has(.umh-theme-flip) { width: 96px; }
}

/* ======================================================================= Lato / Work Sans leftovers (Oct 15, 2026)
   The theme-options CSS sets "#content-main p" (and the body) in Lato; component paragraphs that don't name a face kept
   it (pricing notes, plan notes, /plus/ footer, forum-replies empty state, presser jump links, shop prices). :where()
   keeps this at 1-1-0, so any component rule that names a face still wins. */
body.umh-brand #content-main :where(p) { font-family: var(--umh-font-ui); color: var(--umh-ink); }   /* #222 from the theme options read 1.2:1 in dark */
body.umh-brand :is(.price, .woocommerce-Price-amount, .umh-lk-trk-m, .umh-lk-trk-go, .umh-dc__empty, .umh-pr-billing, .umh-pr-save, .umh-pr-plan__note, .umh-promo__box, .umh-hb-sr):is(*, #umh-z) { font-family: var(--umh-font-ui); }
body.umh-brand #umh-hb.umh-hb :is(th, td) { font-family: var(--umh-font-ui); }
/* headings (Oct 26, 2026 consistency review): the theme options set "#content-main h1…h6" in Work Sans, which beat the
   podcast, newsletter and WBB heads (class-only rules). Every heading in the content is the display face; no heading on
   the site is set in the reading serif, so nothing loses a face it meant to have. */
body.umh-brand #content-main :where(h1, h2, h3, h4, h5, h6) { font-family: var(--umh-font-display); }
/* tables too (the theme options' Lato reached Shot Charts' tables, the roster and the draft-pick lists) */
body.umh-brand #content-main :where(table, th, td, caption) { font-family: var(--umh-font-ui); }
/* the podcast pages' and the "Latest from UM Hoops" heads: the scale (section 22 / item 17), not the theme's 22.4 / 19.2 caps */
body.umh-brand :is(.umh-podhub-h2, .umh-pod-h2, .umh-podq-h2, .umh-latest__h):is(*, #umh-z):is(*, #umh-z) { font-size: var(--umh-fs-section); line-height: 1.2; font-weight: 800; text-transform: none; letter-spacing: 0; }
body.umh-brand :is(.umh-podhub-h3, .umh-podq-h3):is(*, #umh-z):is(*, #umh-z) { font-size: var(--umh-fs-item); line-height: 1.25; font-weight: 800; text-transform: none; letter-spacing: 0; }
/* WooCommerce blocks (cart / checkout / empty cart): the section head, not Work Sans caps */
body.umh-brand :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-empty-cart-block, .wp-block-woocommerce-checkout, .wc-block-grid, .wp-block-woocommerce-product-new) :is(h1, h2, h3).wp-block-heading:is(*, #umh-z) {
	font-family: var(--umh-font-display); font-size: var(--umh-fs-section); font-weight: 800; font-variation-settings: "wdth" var(--umh-wdth-h2);
	line-height: 1.15; letter-spacing: 0; text-transform: none; text-align: left; color: var(--umh-ink);
}
/* WooCommerce block buttons (Add to cart / Select options): the brand secondary button (was ink text on #32373c, 1.46:1) */
body.umh-brand :is(.wp-block-button__link, .wc-block-components-product-button__button, .wc-block-grid__product-add-to-cart .wp-block-button__link, .add_to_cart_button):is(*, #umh-z):is(*, #umh-z) {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
	border: 2px solid var(--umh-ink); border-radius: var(--umh-radius-control); background: transparent; color: var(--umh-ink);
	font: 700 var(--umh-fs-ui)/1.1 var(--umh-font-ui); letter-spacing: 0; text-transform: none; text-decoration: none; box-shadow: none;
}
body.umh-brand :is(.wp-block-button__link, .wc-block-components-product-button__button, .add_to_cart_button):is(*, #umh-z):is(*, #umh-z):hover { background: var(--umh-tint); color: var(--umh-ink); }
/* text coloured by hand in the editor (style="color:#222") stays readable in dark mode */
html[data-umh-theme="dark"] body.umh-brand #content-main :is(p, li, em, i, strong, b, span)[style*="color"] { color: inherit !important; }
@media (prefers-color-scheme: dark) { html[data-umh-theme="auto"] body.umh-brand #content-main :is(p, li, em, i, strong, b, span)[style*="color"] { color: inherit !important; } }
/* old post / page content in dark mode (launch review Oct 26 D3: the theme's "h1…h6 { color: #222 }", hand-coloured
   links and the store's block heading read 1.13:1 on /official-visits/, /history/draft-picks/, /shop/, /privacy-policy/):
   headings, bold text and links written in the editor take the page's colours. Only the content's own markup (direct
   children and the text inside them), never a component a plugin prints into it. */
html[data-umh-theme="dark"] body.umh-brand :is(#content-main, #umh-prose, .wp-site-blocks, .wp-site-blocks .wp-block-group) > :is(h1, h2, h3, h4, h5, h6),
html[data-umh-theme="dark"] body.umh-brand :is(#content-main, #umh-prose) > :is(p, ul, ol, blockquote, dl) :is(strong, b, em, h1, h2, h3, h4, h5, h6):not([class*="umh"]),
html[data-umh-theme="dark"] body.umh-brand .wp-site-blocks :is(h1, h2, h3, h4, h5, h6, p):is(.wp-block-heading, [class*="has-text-align"]) { color: var(--umh-ink) !important; }
html[data-umh-theme="dark"] body.umh-brand :is(#content-main, #umh-prose) > :is(p, ul, ol, blockquote, dl, h1, h2, h3, h4, h5, h6) a:not([class*="umh"], :hover) { color: var(--umh-ink) !important; }
@media (prefers-color-scheme: dark) {
	html[data-umh-theme="auto"] body.umh-brand :is(#content-main, #umh-prose, .wp-site-blocks, .wp-site-blocks .wp-block-group) > :is(h1, h2, h3, h4, h5, h6),
	html[data-umh-theme="auto"] body.umh-brand :is(#content-main, #umh-prose) > :is(p, ul, ol, blockquote, dl) :is(strong, b, em, h1, h2, h3, h4, h5, h6):not([class*="umh"]),
	html[data-umh-theme="auto"] body.umh-brand .wp-site-blocks :is(h1, h2, h3, h4, h5, h6, p):is(.wp-block-heading, [class*="has-text-align"]) { color: var(--umh-ink) !important; }
	html[data-umh-theme="auto"] body.umh-brand :is(#content-main, #umh-prose) > :is(p, ul, ol, blockquote, dl, h1, h2, h3, h4, h5, h6) a:not([class*="umh"], :hover) { color: var(--umh-ink) !important; }
}
html[data-umh-theme="dark"] body.umh-brand .pmpro_form_field-password-toggle-state { color: var(--umh-ink-2); }

/* ======================================================================= layout: one frame, three layouts
 * (owner, Oct 18, 2026: "different content loads at different widths all over the site"; the review measured 8 widths
 * and 16 left edges). Every page's headline and content now start on the frame's left edge, the logo's line:
 *   reading   main column + the 300 px sidebar (articles, plain pages, the Locker, Pro Blue, Fan Pulse, schedule, …):
 *             text capped at --umh-read (~70 characters), left-aligned; components fill the column
 *   wide      no sidebar (template page-fullwidth.php: Lineup Explorer, shot charts, photos, testimonials, the hot
 *             boards, WBB): components fill the frame
 *   focus     centred and narrow on purpose (pricing, checkout, account, the forum join page, /links): untouched here
 * Components never centre themselves at their own width any more (the Locker and games were 760, testimonials 1100,
 * this-day 860); the theme's side paddings on the page header (10%) and the content (3.5%) are gone. */
body.umh-brand { --umh-read: 680px; }
/* desktop only: on phones the theme's side padding IS the 16 px gutter, and stays */
@media screen and (min-width: 1004px) {
/* the theme's paddings that moved headlines and text off the frame's edge (not on the focus pages) */
body.umh-brand:not(.umh-pr-page):not(.pmpro-checkout):not([class*="umh-pm--"]):not(.pmpro-account):not(.pmpro-levels) #content-area { padding-left: 0; padding-right: 0; }
/* …and the theme's 93% content width (full-width pages stopped at 1,154 of 1,240; the reading column at 861 of 925) */
body.umh-brand:not(.umh-prose-post):not(.umh-pr-page):not(.pmpro-checkout):not([class*="umh-pm--"]):not(.pmpro-account):not(.pmpro-levels) :is(#content-area, #content-main) { width: 100%; max-width: none; }
body.umh-brand:not(.umh-prose-post):not(.umh-pr-page):not(.pmpro-checkout):not([class*="umh-pm--"]) #post-main-wrap #post-header { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; text-align: left; }
body.umh-brand:not(.umh-prose-post):not(.umh-pr-page):not(.pmpro-checkout):not([class*="umh-pm--"]) #post-main-wrap #post-header h1.post-title { text-align: left; }
}
/* plain-page text: a reading measure, left-aligned (components in the content are not touched: direct text only) */
body.umh-brand.page-template-default #content-main > :is(p, ul, ol, h2, h3, h4, blockquote, table) { max-width: var(--umh-read); }
/* articles: the column + sidebar block filled the frame from its left edge (it was centred, 106 px off the logo line);
   the sidebar now sits where every other page has it */
@media screen and (min-width: 1004px) {
	body.umh-brand.umh-prose-post .post-wrap-out1 { grid-template-columns: minmax(0, 1fr) var(--umh-side); justify-content: stretch; }
}
/* components fill their layout instead of centring at their own width */
body.umh-brand #content-main > #umh-locker-root#umh-locker-root,
body.umh-brand #content-main > #umh-free.umh-free,
body.umh-brand #content-main > #umh-lb.umh-lb,
body.umh-brand #content-main > #umh-hb.umh-hb,
body.umh-brand #content-main > .umh-td--full,
body.umh-brand #content-main #umh-tm.umh-tm { max-width: none; margin-left: 0; margin-right: 0; }
body.umh-brand #umh-locker-root#umh-locker-root .umh-lk-tp,
body.umh-brand #umh-locker-root#umh-locker-root .umh-lu,
body.umh-brand .umh-lk-side-root#umh-lk-related { margin-left: 0; margin-right: 0; }
/* inside an article the in-post pieces line up with the text instead of centring in the column */
body.umh-brand.umh-prose-post :is(.umh-pod, #comments.umh-dc) { margin-left: 0; margin-right: 0; max-width: var(--umh-read); }
/* the gap between the content and the sidebar (owner, Oct 19, 2026: the content "comes too close to the sidebar"): the
   theme's 15 px everywhere but articles, which have clamp(32px, 4vw, 48px) since Oct 15; now every page with the 300 px
   sidebar (the Locker, hot boards with a sidebar, Fan Pulse, schedule, plain pages, home, archives) has the articles' gap */
@media screen and (min-width: 1004px) {
	body.umh-brand { --umh-side-gap: clamp(32px, 4vw, 48px); }
	body.umh-brand:not(.umh-prose-post) :is(.post-wrap-out1, .home-wrap-out1) { margin-right: calc(-300px - var(--umh-side-gap)); }
	body.umh-brand:not(.umh-prose-post) :is(.post-wrap-in1, .home-wrap-in1) { margin-right: calc(300px + var(--umh-side-gap)); }
	body.umh-brand:not(.umh-prose-post) :is(#post-right-col, #arch-right-col) { margin-left: var(--umh-side-gap); }
}
/* category / tag / author feeds: picture, label, headline, no teaser (owner, Oct 19, 2026: the cut-off excerpts) */
body.umh-brand.archive :is(.archive-list-text, .blog-widget-text) > p { display: none; }
@media screen and (min-width: 768px) {
	body.umh-brand.archive ul.archive-list .archive-list-out { grid-template-columns: minmax(0, 1fr) 180px; align-items: center; }
}
/* Locker Room interview pages (transcript posts + external interview pages; the Locker plugin's body class): one width for
   the header and the content (the header stopped at 80%), no empty category label on interview pages (no category), the
   byline's rule as the only line above the share bar, a 14 px step instead of 64 (owner, Oct 19, 2026: "weird gaps") */
body.umh-brand.umh-lk-interview #post-header { float: none; width: 100%; max-width: none; margin-bottom: 0; }
body.umh-brand.umh-lk-interview #post-header :is(h1.post-title, #post-info-wrap) { float: none; width: 100%; max-width: none; }
body.umh-brand.umh-lk-interview #post-header a.post-cat-link { float: none; display: inline-block; }
body.umh-brand.umh-lk-interview.single-umh_interview #post-header a.post-cat-link:is(*, #umh-z):is(*, #umh-z) { display: none; }   /* as strong as the tokens' 44 px touch-target rule */
body.umh-brand.umh-lk-interview #content-area { padding-top: 0; }
body.umh-brand.umh-lk-interview #content-main > .social-sharing-top { margin-top: 0; }
body.umh-brand.umh-lk-interview #post-header #post-info-wrap { border-bottom: 0; }   /* the share bar's own top line is the one rule there */
/* the home page (owner, Oct 19, 2026: "should these align more naturally?"): the package fills its column like every
   other page (the theme's 95% wrapper + 20 px side padding left it 21 px in from the logo line and 62 px short of the
   sidebar gap), and its first rule sits on the sidebar's first rule (the theme's 20 px top padding + 4 px pushed it down) */
@media screen and (min-width: 1004px) {
	body.umh-brand.umh-home-package #home-mid-wrap { padding-top: 0; }
	body.umh-brand.umh-home-package #home-mid-wrap > #archive-list-wrap { box-sizing: border-box; width: 100%; padding-left: 0; padding-right: 0; }
	body.umh-brand.umh-home-package #archive-list-wrap > section.umh-hp-pkg:first-child { margin-top: 0; }
}
/* the sidebar's first box starts on the column's top line on every page (the newsletter box's 24 px top margin is for a
   box above it; first in the sidebar it pushed its rule below the page's first rule) */
body.umh-brand #sidebar-wrap > .side-widget:first-child .umh-cap:not(#\9 ):not(#\9 ) { margin-top: 0; }
/* one sidebar (owner, Oct 19, 2026: "still two different sidebars"; the Locker's looks better): every box heading in the
   theme's sidebar ("Trending", "Also on UM Hoops", widget titles) in the Locker sidebar's style: 22 px heavy UI face (not the
   condensed display face), 10 px under the 2 px rule */
body.umh-brand #sidebar-wrap h4.post-header { padding-top: 10px; margin-bottom: 10px; }
body.umh-brand #sidebar-wrap :is(span.post-header, span.post-header a, .umh-rel-side-h):is(*, #umh-z) { font-family: var(--umh-font-ui); font-size: 22px; font-weight: 800; font-variation-settings: normal; line-height: 1.2; letter-spacing: -.01em; text-transform: none; }
/* …and the Locker sidebar starts on the column's top line as the theme's does (it had 40 px + its own rule + 24 px above its first box) */
body.umh-brand #post-right-col .umh-lk-side-root#umh-lk-related:is(*, #umh-z) { margin-top: 0; padding-top: 0; border-top: 0; }
body.umh-brand #post-right-col .umh-lk-side-root#umh-lk-side:is(*, #umh-z) { margin-top: 0; padding-top: 0; }
/* the sticky Locker sidebar sticks on the page's first line (65 px: the nav + 13), not 76: at the top of the page a stick
   line below the column's own start pushed the sidebar 11 px down (the admin bar adds 32) */
body.umh-brand.umh-lk-has-side.umh-lk-side-stick #post-right-col { top: 65px; }
body.umh-brand.admin-bar.umh-lk-has-side.umh-lk-side-stick #post-right-col { top: 97px; }
body.umh-brand #sidebar-wrap .umh-rel-side-h:is(*, #umh-z) { font: 800 22px/1.2 var(--umh-font-ui) !important; letter-spacing: -.01em !important; padding: 10px 0 10px !important; }   /* related.css sets this heading with !important */
/* phones: the category / tag / archive title sat on the screen edge (it is outside the padded content); the 16 px gutter */
@media screen and (max-width: 1003px) {
	body.umh-brand h1.cat-head { box-sizing: border-box; padding-left: 16px; padding-right: 16px; }
}

/* ======================================================================= TablePress tables (owner, Oct 18, 2026: "a lot of
 * these TablePress tables on the site", e.g. the roster). The site's table look everywhere (the same as article tables
 * above): label-style heads, a heavy top rule, thin rules between rows, tabular figures, no fills or boxes; readable in
 * dark mode (tokens); on phones a wide table scrolls sideways in its own box. TablePress 2/3 style
 * through custom properties (set here), older versions through plain rules (overridden here). Sorting, search and paging
 * (DataTables 1 and 2 class names) get the site's controls.
 * Oct 26, 2026 (launch review D7: Roster and Draft Picks still had a navy head with maize caps): the site's TablePress
 * custom CSS says ".tablepress thead th { background-color: #002 !important; color: #ffcb05 !important }" and
 * "th, td { padding: 6px 1% !important }", so the head colours and the cell padding here are !important too: one table head. */
body.umh-brand .tablepress {
	--text-color: var(--umh-ink); --head-text-color: var(--umh-muted); --head-bg-color: transparent; --odd-text-color: var(--umh-ink);
	--odd-bg-color: transparent; --even-text-color: var(--umh-ink); --even-bg-color: transparent; --hover-text-color: var(--umh-ink);
	--hover-bg-color: var(--umh-tint); --border-color: var(--umh-rule); --padding: 9px 10px;
}
body.umh-brand table.tablepress:is(*, #umh-z) {
	width: 100%; max-width: 100%; margin: 22px 0 26px; border: 0; border-collapse: collapse; border-top: var(--umh-rule-heavy);
	background: none; color: var(--umh-ink); font-family: var(--umh-font-ui); font-size: var(--umh-fs-ui); line-height: 1.3; font-variant-numeric: tabular-nums;
}
body.umh-brand table.tablepress:is(*, #umh-z) :is(thead, tfoot) :is(th, td) {
	padding: 10px 10px 7px !important; border: 0; border-bottom: 1px solid var(--umh-ink); background: none !important; color: var(--umh-muted) !important;
	font-family: var(--umh-font-ui); font-size: var(--umh-fs-label); font-weight: 700; letter-spacing: var(--umh-track-label);
	line-height: 1.2; text-align: left; text-transform: uppercase; vertical-align: bottom; white-space: nowrap;
}
body.umh-brand table.tablepress:is(*, #umh-z) tfoot :is(th, td) { border-top: 1px solid var(--umh-ink); border-bottom: 0; }
body.umh-brand table.tablepress:is(*, #umh-z) tbody td {
	padding: 9px 10px !important; border: 0; border-bottom: 1px solid var(--umh-rule); background: none; color: var(--umh-ink);
	font-family: var(--umh-font-ui); font-size: inherit; line-height: 1.35; text-align: left; vertical-align: middle;
}
body.umh-brand table.tablepress:is(*, #umh-z) :is(thead, tbody, tfoot) tr,
body.umh-brand table.tablepress:is(*, #umh-z) tbody tr:is(.odd, .even, :nth-child(n)) td { background: none; }   /* the theme stripes whole rows */
body.umh-brand table.tablepress:is(*, #umh-z) tbody tr:hover td { background: var(--umh-tint); }
body.umh-brand table.tablepress:is(*, #umh-z) :is(th, td):first-child { padding-left: 0 !important; }
body.umh-brand table.tablepress:is(*, #umh-z) :is(th, td):last-child { padding-right: 0 !important; }
body.umh-brand table.tablepress:is(*, #umh-z) tbody td:first-child { font-weight: 600; }
body.umh-brand table.tablepress:is(*, #umh-z) a { color: var(--umh-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.umh-brand table.tablepress:is(*, #umh-z) img { display: inline-block; max-width: 48px; height: auto; margin: 0; vertical-align: middle; }
body.umh-brand table.tablepress:is(*, #umh-z) caption,
body.umh-brand .tablepress-table-description { caption-side: bottom; padding-top: 8px; color: var(--umh-muted); font: 400 var(--umh-fs-small)/1.4 var(--umh-font-ui); text-align: left; }
body.umh-brand :is(h2, h3).tablepress-table-name:is(*, #umh-z) { margin: 26px 0 0; color: var(--umh-ink); font: 800 var(--umh-fs-section)/1.15 var(--umh-font-display); font-variation-settings: "wdth" var(--umh-wdth-display, 100); text-transform: none; letter-spacing: -.01em; }
/* sorting: the head is the control; one quiet arrow */
body.umh-brand table.tablepress:is(*, #umh-z) thead th:is(.sorting, .sorting_asc, .sorting_desc, .dt-orderable-asc, .dt-orderable-desc, .dt-ordering-asc, .dt-ordering-desc) { cursor: pointer; padding-right: 18px; background-image: none; }
body.umh-brand table.tablepress:is(*, #umh-z) thead th:is(.sorting_asc, .dt-ordering-asc) { color: var(--umh-ink) !important; }
body.umh-brand table.tablepress:is(*, #umh-z) thead th:is(.sorting_desc, .dt-ordering-desc) { color: var(--umh-ink) !important; }
/* search, page length, info and paging (DataTables 1: .dataTables_*; DataTables 2: .dt-*) */
body.umh-brand :is(.dataTables_wrapper, .dt-container) { margin: 18px 0 26px; font: 400 var(--umh-fs-small)/1.4 var(--umh-font-ui); color: var(--umh-muted); }
body.umh-brand :is(.dataTables_wrapper, .dt-container) table.tablepress:is(*, #umh-z) { margin: 10px 0 12px; }
body.umh-brand :is(.dataTables_filter, .dt-search, .dataTables_length, .dt-length) { margin: 0 0 6px; color: var(--umh-muted); font-size: var(--umh-fs-small); }
body.umh-brand :is(.dataTables_filter, .dt-search) input,
body.umh-brand :is(.dataTables_length, .dt-length) select {
	min-height: 38px; margin: 0 0 0 6px; padding: 6px 10px; border: 1px solid var(--umh-rule-strong, var(--umh-rule)); border-radius: var(--umh-radius-control, 6px);
	background: var(--umh-paper); color: var(--umh-ink); font: 400 var(--umh-fs-ui)/1.2 var(--umh-font-ui);
}
body.umh-brand :is(.dataTables_paginate, .dt-paging) :is(.paginate_button, .dt-paging-button) {
	display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; margin: 0 2px; padding: 0 8px;
	border: 1px solid transparent !important; border-radius: var(--umh-radius-control, 6px); background: none !important; color: var(--umh-ink) !important; font-weight: 600; cursor: pointer;
}
body.umh-brand :is(.dataTables_paginate, .dt-paging) :is(.paginate_button, .dt-paging-button):hover { border-color: var(--umh-rule) !important; background: var(--umh-tint) !important; }
body.umh-brand :is(.dataTables_paginate, .dt-paging) :is(.paginate_button.current, .dt-paging-button.current) { border-color: var(--umh-ink) !important; }
body.umh-brand :is(.dataTables_paginate, .dt-paging) :is(.paginate_button.disabled, .dt-paging-button.disabled) { opacity: .4; cursor: default; }
/* phones: a wide table scrolls sideways inside its own box (the page itself never scrolls sideways) */
@media screen and (max-width: 767px) {
	body.umh-brand table.tablepress:is(*, #umh-z) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: var(--umh-fs-data, 14px); }
	body.umh-brand table.tablepress:is(*, #umh-z) :is(th, td) { white-space: nowrap; }
}

/* the SVG logo (legacy-theme.php): no margin around its box, so smaller than the PNG to look the same size */
img[src*="umhoops-logo.svg"] { box-sizing: content-box; width: auto !important; max-width: 100%; height: 36px !important; padding: 7px 0; }   /* the PNG's 50 px slot: centred in the bar */
.foot-logo img[src*="umhoops-logo.svg"] { height: 30px !important; padding: 0; }
.umh-lb-logo[src*="umhoops-logo.svg"] { padding: 0; }
.umh-lb-logo[src*="umhoops-logo.svg"] { height: 34px !important; }
@media (min-width: 600px) { .umh-lb-logo[src*="umhoops-logo.svg"] { height: 40px !important; } }

/* ---------- articles: text at a reading width, pictures wider (owner, Oct 18, 2026: "too much white space") ----------
   The column next to the sidebar runs ~900-1,050 px on a laptop or desktop; with everything held at 680 a wide band
   stayed empty. Now the headline area, the lead photo, the share bar and the pictures, charts, tables and embeds in
   the story fill the column up to --umh-media; paragraphs, headings, lists and quotes stay at --umh-read (~70
   characters). All of it starts on the same left edge. */
body.umh-brand.umh-prose-post { --umh-col: var(--umh-media); --umh-media: 920px; --umh-read: 680px; }
body.umh-brand.umh-prose-post #post-area h1.post-title { max-width: min(100%, 840px); }
body.umh-brand.umh-prose-post #post-area span.post-excerpt { max-width: var(--umh-read); }
body.umh-brand.umh-prose-post #umh-prose > :is(p, ul, ol, dl, h2, h3, h4, h5, h6, blockquote:not(.twitter-tweet, .instagram-media, .tiktok-embed), hr, pre, .umh-pod, .umh-jb, details) { max-width: var(--umh-read); }
/* a paragraph that is only a picture (charts, the four-factors graphic, photos dropped in without a block) is a picture */
body.umh-brand.umh-prose-post #umh-prose > p:has(> img:only-child, > a:only-child > img:only-child) { max-width: none; }
body.umh-brand.umh-prose-post #umh-prose > :is(figure, .wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-table, table, iframe, .umh-gal, .tablepress, .dataTables_wrapper, .dt-container) { max-width: 100%; }

/* ---------- articles: the words on one centred column, pictures wider on both sides (owner, Oct 19, 2026) ----------
   With text at 680 on the left of a 920 frame the white space moved under the photo, and right edges zig-zagged
   (share bar / Go Deeper at the frame's edge, paragraphs / comments 240 px short). Now everything that is words
   (label, headline, dek, byline, share bars, paragraphs, Go Deeper, related items, the conversation) sits on one
   centred --umh-read column; the lead photo, in-story photos, videos, charts, tables and ads run the full frame, the
   same overhang left and right. Body text 19 px (was 18) at ~70 characters. Desktop only: on phones it is all one
   column with the 16 px gutter. */
body.umh-brand.umh-prose-post { --umh-read: 720px; --umh-fs-read: 19px; --umh-lh-body: 1.65; }
/* subheads (owner, Oct 19, 2026: "are h3s too small?"): an h3 was 17 px sans under 19 px serif text, smaller than the
   paragraphs it heads; now the display face at 23 px (h2 27 px), more air above than below so it belongs to what follows */
body.umh-brand.umh-prose-post #umh-prose > h2 { margin: 1.7em auto .45em; font-size: 27px; line-height: 1.1; }
body.umh-brand.umh-prose-post #umh-prose > h3 { margin: 1.6em auto .4em; font-size: 23px; font-weight: 800; font-variation-settings: "wdth" var(--umh-wdth-h2); line-height: 1.15; }
/* the text column's width where it sits: --umh-read, or the whole frame when the pictures would overhang it by less
   than 40 px a side (a 6 px step at 1280 reads as a misalignment, not a design) */
body.umh-brand.umh-prose-post { --umh-read-fit: min(100%, max(var(--umh-read), min(100%, (var(--umh-read) + 80px - 100%) * 1000))); }
@media screen and (min-width: 1004px) {
	body.umh-brand.umh-prose-post #post-area > #post-header > *,
	body.umh-brand.umh-prose-post #post-area > #post-feat-img > .post-feat-text > *,
	body.umh-brand.umh-prose-post #content-main > :is(.social-sharing-top, .umh-pod, .umh-rel, .post-tags, .social-sharing-bot, #comments),
	body.umh-brand.umh-prose-post #umh-prose > :is(p, ul, ol, dl, h2, h3, h4, h5, h6, blockquote:not(.twitter-tweet, .instagram-media, .tiktok-embed), hr, pre, .umh-pod, .umh-jb, .umh-rel, details, div:not([class]):not(:has(img, iframe, video, table, script))):is(*, #umh-z) {
		box-sizing: border-box;
		width: 100%;
		max-width: var(--umh-read-fit);
		margin-left: auto !important;
		margin-right: auto !important;
	}
	body.umh-brand.umh-prose-post #post-area h1.post-title { max-width: var(--umh-read-fit); }
	/* the photo credit sits under the photo, on the photo's edge */
	body.umh-brand.umh-prose-post #post-area span.feat-caption { max-width: var(--umh-col); margin-left: 0 !important; }
	/* pictures and videos that sit in a paragraph are pictures: full frame */
	body.umh-brand.umh-prose-post #umh-prose > p:is(:has(> img:only-child, > a:only-child > img:only-child, > .umh-zoomable:only-child), :has(> iframe:only-child), .umh-fill):is(*, #umh-z) { max-width: none; }
	/* floated photos line up with the text's edge, not the frame's */
	body.umh-brand.umh-prose-post #umh-prose > :is(img, .wp-caption, figure).alignleft { margin-left: calc((100% - var(--umh-read-fit)) / 2); }
	body.umh-brand.umh-prose-post #umh-prose > :is(img, .wp-caption, figure).alignright { margin-right: calc((100% - var(--umh-read-fit)) / 2); }
}
/* in articles a wide chart (.umh-wide, file >= 1200 px, or .alignwide) fills the frame like a video, the same overhang on
   both sides (owner, Oct 19, 2026); the older bleed into the left margin made it lopsided, or pushed it into the sidebar */
@media screen and (min-width: 1004px) {
	body.umh-brand.umh-prose-post #umh-prose > :is(.alignwide, .umh-wide):is(*, #umh-z) { width: auto !important; max-width: none; margin-left: 0 !important; margin-right: 0 !important; }
	body.umh-brand.umh-prose-post #umh-prose > :is(.alignwide, .umh-wide) :is(.wp-caption-text, figcaption) { padding-left: 0; }
	body.umh-brand.umh-prose-post #umh-prose > :is(.alignwide, .umh-wide) :is(.umh-zoomable, img:not(.emoji)) { width: 100%; max-width: 100%; }
}
/* photos big enough to fill the frame fill it (umh-brand.js marks them .umh-fill) */
body.umh-brand.umh-prose-post #umh-prose > .umh-fill :is(.umh-zoomable, img:not(.emoji)),
body.umh-brand.umh-prose-post #umh-prose > img.umh-fill { width: 100%; max-width: 100%; }

/* ---------- photo gallery posts (owner, Oct 19, 2026: "a little wider ... closer to 3 photos per row") ----------
   A post with a gallery uses the whole column for its pictures (~1,050 px next to the sidebar, was 920); the words stay
   on their centred reading column. The grid's row sizing is in gallery.css. */
body.umh-brand.umh-prose-post:has(#umh-prose .umh-gal) { --umh-media: 1060px; }

/* ---------- the phone / tablet header's Join pill (owner, Oct 19, 2026; UMH_Nav::phone_join) ----------
   Below 1004 px the top bar's maize Join is hidden with the rest of the menu; this pill sits first in the right group
   (Join · moon · search). The logo steps down on narrow phones so all of it fits on one line at 360 px. */
.umh-hjoin { display: none; }
@media (max-width: 1003px) {
	body.umh-brand .nav-right-wrap:has(.umh-hjoin) { display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: auto !important; }
	body.umh-brand .umh-hjoin:is(*, #umh-z) {
		display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
		height: 32px; padding: 0 12px; border-radius: var(--umh-radius-control, 3px);
		background: var(--umh-maize, #ffcb05); color: #00274c !important; text-decoration: none !important;
		font: 700 14px/1 var(--umh-font-ui, system-ui, sans-serif); letter-spacing: 0; white-space: nowrap;
	}
	body.umh-brand .nav-right-wrap:has(.umh-hjoin) > :not(.umh-hjoin) { flex: 0 0 auto; }
}
@media (max-width: 429px) {
	body.umh-brand:has(.umh-hjoin) img[src*="umhoops-logo.svg"]:not(.foot-logo img) { height: 30px !important; padding: 10px 0; }
}
@media (max-width: 374px) {
	body.umh-brand:has(.umh-hjoin) img[src*="umhoops-logo.svg"]:not(.foot-logo img) { height: 26px !important; padding: 12px 0; }
	body.umh-brand .umh-hjoin:is(*, #umh-z) { padding: 0 10px; font-size: 13px; }
}
@media (max-width: 599px) {
	/* phones (owner, Oct 28, 2026: the base member's "Upgrade" pill sat over the logo, which read "UM HOOP"): the header
	   moon goes and the menu's Light / Dark / Auto switch stands in for it (was 320 px phones only) */
	body.umh-brand .nav-right-wrap:has(.umh-hjoin) .umh-theme-flip { display: none; }
}
@media (max-width: 339px) {
	/* 320 px: a smaller logo and pill so "Upgrade" clears the logo */
	body.umh-brand:has(.umh-hjoin) img[src*="umhoops-logo.svg"]:not(.foot-logo img) { height: 22px !important; padding: 14px 0; }
	body.umh-brand .umh-hjoin:is(*, #umh-z) { padding: 0 8px; font-size: 12.5px; height: 30px; }
}

/* ---------- the top bar at 1004-1279 px (go-live review, Oct 29, 2026: iPad landscape, iPad Pro portrait, small laptops) ----------
   The sections + Join / Upgrade ran under the right group (moon · search, a fixed 123 px): the pill sat under the moon and
   the moon covered "Games". While a Join / Upgrade pill shows, the moon steps out (the menu's Light / Dark / Auto switch
   stands in, as on phones) and the right group closes to 79 px; the items step their padding down (and to 14 px type
   below 1100) so the row fits. UM Hoops+ (no pill) keeps the moon. */
@media screen and (min-width: 1004px) and (max-width: 1279px) {
	body.umh-brand:has(nav.main-menu-wrap li.umh-join) .nav-right-wrap .umh-theme-flip { display: none; }
	body.umh-brand:has(nav.main-menu-wrap li.umh-join) .nav-right-wrap:is(*, #umh-z) { width: 79px; }
	body.umh-brand:has(nav.main-menu-wrap li.umh-join) .nav-menu-out { margin-right: -79px; }
	body.umh-brand:has(nav.main-menu-wrap li.umh-join) .nav-menu-in { margin-right: 79px; }
	body.umh-brand nav.main-menu-wrap ul.menu > li > a:is(*, #umh-z) { padding-left: 8px; padding-right: 21px; }
	body.umh-brand nav.main-menu-wrap ul.menu > li:not(.menu-item-has-children) > a:is(*, #umh-z) { padding-right: 8px; }
	body.umh-brand nav.main-menu-wrap ul.menu > li.menu-item-has-children > a:is(*, #umh-z)::after { right: 8px; }
	body.umh-brand nav.main-menu-wrap ul.menu > li.umh-join > a:is(*, #umh-z) { padding: 0 12px; }
}
@media screen and (min-width: 1004px) and (max-width: 1099px) {
	body.umh-brand nav.main-menu-wrap ul.menu > li > a:is(*, #umh-z) { font-size: 14px; padding-left: 7px; padding-right: 19px; }
	body.umh-brand nav.main-menu-wrap ul.menu > li:not(.menu-item-has-children) > a:is(*, #umh-z) { padding-right: 7px; }
	body.umh-brand nav.main-menu-wrap ul.menu > li.menu-item-has-children > a:is(*, #umh-z)::after { right: 7px; }
	body.umh-brand nav.main-menu-wrap ul.menu > li.umh-join { margin-left: 4px; }
}

/* ---------- TablePress tables on phones (staging review, Oct 19, 2026: the roster read "POS.YEARHEIGHTWEIGHT") ----------
   TablePress's custom CSS has "th,td{padding:6px 1%!important}" (1% of a phone screen is under 5 px), which beat ours. Cells
   get real room again, and a table wider than the screen shows a soft edge shadow on the side that scrolls (pure CSS: the
   white covers scroll with the content, the shadows stay put), so the hidden columns read as "swipe for more". */
@media screen and (max-width: 767px) {
	body.umh-brand table.tablepress:is(*, #umh-z):is(*, #umh-z) :is(th, td) { padding: 10px 14px 10px 0 !important; line-height: 1.3; }
	body.umh-brand table.tablepress:is(*, #umh-z):is(*, #umh-z) :is(th, td):first-child { padding-left: 8px !important; }
	body.umh-brand table.tablepress:is(*, #umh-z):is(*, #umh-z) :is(th, td):last-child { padding-right: 8px !important; }
	body.umh-brand table.tablepress:is(*, #umh-z):is(*, #umh-z) {
		background:
			linear-gradient(to right, var(--umh-paper, #fff) 30%, transparent) left / 24px 100% no-repeat local,
			linear-gradient(to left, var(--umh-paper, #fff) 30%, transparent) right / 24px 100% no-repeat local,
			radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), transparent) left / 12px 100% no-repeat scroll,
			radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), transparent) right / 12px 100% no-repeat scroll;
	}
}

/* ---------- phones (launch review Oct 23, 2026: mobile lens) ----------
   Form fields under 16px make iOS Safari zoom the page on tap (header + 404 search 15px, season selects 14px, the email
   capture 15px): one floor for every text field, select and textarea; !important because the field rules carry id weight
   of their own (the capture box, the Locker) and this is a floor, not a style.
   Tap targets: the footer's link columns, legal row and social icons were 14px tall; each becomes a 44px row / square. The
   header Join pill and the byline author keep their look and get a 44px hit area (an inset ::after / padding offset by a
   negative margin), so the header and the byline row don't move. */
@media screen and (max-width: 767px) {
	body.umh-brand :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="color"]), select, textarea) { font-size: max(16px, 1em) !important; }

	body.umh-brand #foot-widget-wrap .widget_nav_menu ul.menu li:is(*, #umh-z) { margin: 0; }
	body.umh-brand #foot-widget-wrap .widget_nav_menu ul.menu li a:is(*, #umh-z) { display: flex; align-items: center; min-height: 44px; }
	body.umh-brand .foot-menu .menu li a:is(*, #umh-z) { display: inline-flex; align-items: center; min-height: 44px; }
	body.umh-brand ul.foot-soc-list li:is(*, #umh-z) { width: auto; }
	body.umh-brand ul.foot-soc-list li a:is(*, #umh-z) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

	body.umh-brand .umh-hjoin:is(*, #umh-z) { position: relative; }
	body.umh-brand .umh-hjoin:is(*, #umh-z)::after { content: ""; position: absolute; inset: -6px -3px; }
	body.umh-brand #post-info-wrap :is(.post-info-name a, a.author-name):is(*, #umh-z) { display: inline-block; padding: 15px 0; margin: -15px 0; }
}

/* the phone footer, tidied (owner, Oct 29, 2026: "mobile footer looks messy"): the gray wordmark at 160 px (was up to
   300), the icons in one tight row under it (the "Follow us on social media:" line dropped on phones), the link columns
   in 36 px rows at 15 px (from 44 px rows: four menus ran ~900 px), smaller gaps, and the legal row + copyright as one
   centred block at 13 / 12 px. 36 px rows stay well above the 24 px target-size floor. */
@media screen and (max-width: 767px) {
	body.umh-brand #foot-widget-wrap:has(.widget_nav_menu):is(*, #umh-z) { gap: 22px 20px; padding: 24px 16px 18px; }
	body.umh-brand .foot-logo img[src*="Gray"]:is(*, #umh-z) { max-width: 160px; }
	body.umh-brand .foot-info-text:is(*, #umh-z) { display: none; }
	body.umh-brand .foot-soc:is(*, #umh-z) { margin: 10px 0 0; }
	body.umh-brand ul.foot-soc-list:is(*, #umh-z) { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 0 -10px; padding: 0; }
	body.umh-brand ul.foot-soc-list li a:is(*, #umh-z) { min-width: 40px; min-height: 40px; }
	body.umh-brand #foot-widget-wrap .widget_nav_menu h3.foot-head:is(*, #umh-z) { margin: 0 0 4px; font-size: 12px; }
	body.umh-brand #foot-widget-wrap .widget_nav_menu ul.menu li a:is(*, #umh-z) { min-height: 36px; font-size: 15px; line-height: 1.25; }
	body.umh-brand #foot-bot-wrap .foot-menu .menu:is(*, #umh-z) { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin: 0; padding: 6px 0 0; }
	body.umh-brand #foot-bot-wrap .foot-menu .menu li:is(*, #umh-z) { float: none; display: block; margin: 0; padding: 0; }
	body.umh-brand #foot-bot-wrap .foot-menu .menu li a:is(*, #umh-z) { min-height: 40px; font-size: 13px; }
	body.umh-brand .foot-copy:is(*, #umh-z) { float: none; width: 100%; text-align: center; }
	body.umh-brand .foot-copy p:is(*, #umh-z) { margin: 4px 0 18px; padding: 0 16px; text-align: center; font-size: 12px; }
}

/* The fixed-bar padding only while the bar is fixed (Oct 26, 2026: the theme's sticky script and ours could disagree and
   leave #body-main-wrap padded 65px under a bar still in the flow: ~50px of white above the crumbs and the sidebar). */
body:has(#main-nav-wrap:not(.fixed)) #body-main-wrap.body-top-pad { padding-top: 15px !important; }   /* the theme's resting values */
@media screen and (max-width: 599px) { body:has(#main-nav-wrap:not(.fixed)) #body-main-wrap.body-top-pad { padding-top: 10px !important; } }
@media screen and (max-width: 479px) { body:has(#main-nav-wrap:not(.fixed)) #body-main-wrap.body-top-pad { padding-top: 0 !important; } }
body:has(#main-nav-wrap:not(.fixed)) #body-main-wrap.tabs-top-marg { margin-top: 0 !important; }

/* ======================================================================= section pages on the theme's page template
 * (UMH_Sections: Roster, Game Day Live, Visit tracker, Scholarships + the footer's reference pages Past classes, Draft
 * picks, This day, Newsletter, About, Staff, Contact; body.umh-sec-page). Launch review Oct 26 D1 / D7: no featured photo
 * above the header (UMH_Sections::no_feat_img; this covers a cached template), the old editor markup on the type scale
 * in the brand fonts (Past Classes had a Lucida Sans span and the serif reading column), Staff's own titles. */
body.umh-brand.umh-sec-page #post-feat-img { display: none !important; }
body.umh-brand.umh-sec-page #content-main > :is(p, ul, ol, dl),
body.umh-brand.umh-sec-page #content-main > :is(ul, ol) > li {
	font-family: var(--umh-font-ui); font-size: var(--umh-fs-ui); line-height: 1.6; letter-spacing: 0;
}
body.umh-brand.umh-sec-page #content-main :is(span, font)[style*="font-family"],
body.umh-brand.umh-sec-page #content-main font[face] { font-family: inherit !important; }
body.umh-brand.umh-sec-page #content-main :is(span, font)[style*="font-size"],
body.umh-brand.umh-sec-page #content-main font[size] { font-size: inherit !important; }
body.umh-brand.umh-sec-page #content-main > :is(h2, h3, h4, h5, h6) {
	margin: 26px 0 8px; color: var(--umh-ink); font: 800 var(--umh-fs-section)/1.2 var(--umh-font-display);
	font-variation-settings: "wdth" var(--umh-wdth-display, 100); letter-spacing: -.01em; text-transform: none;
}
body.umh-brand.umh-sec-page #content-main > :is(h4, h5, h6) { font: 700 var(--umh-fs-label)/1.3 var(--umh-font-ui); letter-spacing: var(--umh-track-label); text-transform: uppercase; }
/* the Authors List template (/authors/, "Staff"): the header replaces its "Authors" title; "Previous Authors" is a section head */
body.umh-brand.umh-sec-page #archive-list-wrap > h1.arch-head:first-of-type { display: none; }
body.umh-brand.umh-sec-page #archive-list-wrap > h1.arch-head {
	margin: 30px 0 10px; padding: 0; border: 0; color: var(--umh-ink); font: 800 var(--umh-fs-section)/1.2 var(--umh-font-display);
	font-variation-settings: "wdth" var(--umh-wdth-display, 100); letter-spacing: -.01em; text-transform: none;
}

/* search results (themes/flex-mag/search.php, brand on; launch review Oct 26 D10): the search box under the header */
body.umh-brand .umh-search-form { display: flex; gap: 8px; max-width: 560px; margin: 0 0 22px; }
body.umh-brand .umh-search-form input[type="search"] {
	flex: 1 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--umh-rule-strong, var(--umh-rule));
	border-radius: var(--umh-radius-control, 6px); background: var(--umh-paper); color: var(--umh-ink); font: 400 var(--umh-fs-ui)/1.2 var(--umh-font-ui);
}
body.umh-brand .umh-search-form .umh-btn { flex: 0 0 auto; min-height: 44px; }
body.umh-brand .umh-search-page .umh-sl__none { margin: 6px 0 30px; color: var(--umh-ink-2); font: 400 var(--umh-fs-read)/1.5 var(--umh-font-text); }

/* ---------- articles on wide screens (owner, Oct 28, 2026: the headline sat right of the body text) ----------
   Past ~1,480 px the column beside the sidebar (#post-area) grows wider than the 920 px frame the photo, share bar and
   text live in, and the header lines centred themselves in that wider box (66 px right of the text at 1,680). The
   column now stops at the frame, so the header centres on the same frame as everything under it. */
@media screen and (min-width: 1004px) {
	body.umh-brand.umh-prose-post #post-area { max-width: var(--umh-col); }
}

/* ---------- one top gap under the header, every page (owner, Oct 28, 2026: "different pages seem to have different
   padding at the top of the screen") ----------
   Each template added its own space: section pages #content-area (15 / 30 px) on the wrapper's 5 + 5 (phone) or 15
   (desktop), articles the kicker's −12 px tap-target margin (12 / 17 px), interviews #post-header's 30 px margin
   (40 / 45 px), the home page #home-mid-wrap's 15 px plus its first section's 4. Now the wrapper holds the one gap
   (--umh-top-gap: 24 px on phones, 32 on desktop) and the first block under it starts flush. The kicker keeps its
   44 px tap target (padding 12 / margin −12), so its words sit on the same line as every other page's first line. */
body.umh-brand { --umh-top-gap: 24px; }
@media screen and (min-width: 1004px) { body.umh-brand { --umh-top-gap: 32px; } }
body.umh-brand #body-main-wrap:is(*, #umh-z) { padding-top: var(--umh-top-gap); }
body.umh-brand :is(.body-main-out, .body-main-in):is(*, #umh-z) { margin-top: 0; }
body.umh-brand :is(#content-area, #home-mid-wrap):is(*, #umh-z) { padding-top: 0; }
body.umh-brand #post-header:is(*, #umh-z) { margin-top: 0; }
body.umh-brand.umh-prose-post #post-area .post-cat-link:is(*, #umh-z) { margin-top: -12px; }
body.umh-brand #home-mid-wrap > section:first-child:is(*, #umh-z) { margin-top: 0; }
/* the same gap on three more: the home page's first section, the pricing page's own top padding, and an article with no
   kicker (its empty label kept a 40 px tap-target box: the hide rule above lost to the 44 px touch-target rule) */
body.umh-brand .umh-hp-pkg:first-of-type:is(*, #umh-z) { margin-top: 0; }
body.umh-brand #umh-pricing.umh-pr:is(*, #umh-z) { padding-top: 0; }
body.umh-brand #post-header a.post-cat-link:has(> span.post-head-cat:empty):is(*, #umh-z):is(*, #umh-z):is(*, #umh-z) { display: none; }
/* the Locker breadcrumb above a title: a 44 px tap row with its words in the middle, so the words sat ~13 px below every
   other page's first line; pulled up by the row's own slack */
body.umh-brand .umh-lk-navwrap.is-crumbs.is-above-title:is(*, #umh-z) { margin-top: -12px; }