/*
 * UM Hoops home: lead package + secondary row + river (UMH_Home, Oct 14, 2026). Brand tokens (umh-tokens.css) when the
 * brand is on; every token has a fallback so the page is presentable on the old theme too. Rules, not boxes; square images;
 * maize only for the live marker and the one primary action (Live stats).
 */
.umh-home {
	--hp-ink: var(--umh-ink, #111a24);
	--hp-ink-2: var(--umh-ink-2, #38475a);
	--hp-muted: var(--umh-muted, #6a7686);
	--hp-label: var(--umh-label, #8a6a00);
	--hp-rule: var(--umh-rule, #dfe3e8);
	--hp-paper: var(--umh-paper, #fff);
	--hp-tint: var(--umh-tint, #f6f7f9);
	--hp-maize: var(--umh-maize, #ffcb05);
	--hp-navy: var(--umh-navy, #00274c);
	--hp-display: var(--umh-font-display, "Work Sans", "Helvetica Neue", Arial, sans-serif);
	--hp-ui: var(--umh-font-ui, "Work Sans", "Helvetica Neue", Arial, sans-serif);
	--hp-text: var(--umh-font-text, Georgia, "Times New Roman", serif);
	--hp-wdth: var(--umh-wdth-display, 100);
	--hp-heavy: 2px solid var(--hp-ink);
	--hp-thin: 1px solid var(--hp-rule);
	--hp-radius: var(--umh-radius-control, 4px);
	--hp-gut: var(--umh-gut, 16px);
	box-sizing: border-box;
	color: var(--hp-ink);
	font-family: var(--hp-ui);
	padding-bottom: 28px;
}
/* the theme floats and fixes widths on these wrappers; ours is a plain block */
body.umh-home-package #archive-list-wrap.umh-home { float: none; }
body:not(.umh-brand).umh-home-package #archive-list-wrap.umh-home { width: auto; margin: 0 1.87265917603%; }
.umh-home *, .umh-home *::before, .umh-home *::after { box-sizing: border-box; }
.umh-home a { color: inherit; text-decoration: none; }
.umh-home :is(h2, h3, p, ul) { margin: 0; padding: 0; }
.umh-home ul { list-style: none; }
.umh-home a:focus-visible { outline: 2px solid var(--umh-focus, var(--hp-navy)); outline-offset: 2px; }

/* images: square corners, a quiet backing while they load */
.umh-hp-img { display: block; overflow: hidden; background: var(--umh-img-backing, var(--hp-tint)); }
.umh-hp-img img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }

/* labels + meta */
.umh-hp-label {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
	margin-bottom: 6px !important;
	color: var(--hp-label);
	font: 700 var(--umh-fs-label, 12px)/1.2 var(--hp-ui);
	letter-spacing: var(--umh-track-label, .08em);
	text-transform: uppercase;
}
.umh-hp-plus { color: var(--hp-muted); letter-spacing: .04em; }
.umh-hp-meta { margin-top: 8px !important; color: var(--hp-muted); font: 500 var(--umh-fs-small, 13px)/1.3 var(--hp-ui); }

/* ---------- game ribbon (owner, Oct 19, 2026): one row, the game on the left, its links on the right; phones stack
   kicker + meta, the line, then the links ---------- */
.umh-hp-ribbon { border-top: var(--hp-heavy); container: umh-rib / inline-size; }
.umh-hp-rib {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
	padding: 10px 0 12px;
	font: 500 var(--umh-fs-base, 14px)/1.3 var(--hp-ui);
	color: var(--hp-ink-2);
}
.umh-hp-rib__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; }
.umh-hp-rib__k {
	min-width: 3.4em; margin-right: 12px;
	color: var(--hp-ink);
	font-weight: 800; font-size: var(--umh-fs-meta, 12px); letter-spacing: .1em; text-transform: uppercase;
}
.umh-hp-rib__line { color: var(--hp-ink); font: 800 var(--umh-fs-item, 17px)/1.2 var(--hp-display); font-variation-settings: "wdth" var(--hp-wdth); margin-right: 4px; }
.umh-hp-rib__meta::before { content: "·"; margin: 0 8px; color: var(--hp-muted); }
.umh-hp-rib__links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none; }
.umh-hp-rib__links li { margin: 0 !important; padding: 0 !important; list-style: none; }
.umh-hp-rib__links li::before { content: none !important; }
.umh-hp-rib__links a {
	display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px;
	border: 1px solid var(--hp-rule, #dfe3e8); border-radius: var(--hp-radius, 4px);
	color: var(--hp-ink); text-decoration: none;
	font: 700 var(--umh-fs-meta, 13px)/1 var(--hp-ui);
	white-space: nowrap;
}
.umh-hp-rib__links a:hover { border-color: var(--hp-ink); }
/* the filled first link: the brand panel token (navy; lifted navy in dark mode, where page navy would sink into the page) */
.umh-hp-rib__links li:first-child a { background: var(--umh-panel, var(--hp-navy, #00274c)); border-color: var(--umh-panel, var(--hp-navy, #00274c)); color: var(--umh-on-bar, #fff); }
.umh-hp-rib.is-live .umh-hp-rib__links li:first-child a { background: var(--hp-maize); border-color: var(--hp-maize); color: #00274c; }
.umh-hp-rib__links .umh-plus-badge { margin-left: 2px; }
.umh-hp-rib.is-live .umh-hp-rib__k { display: inline-flex; align-items: center; gap: 7px; }
.umh-hp-rib.is-live .umh-hp-rib__k::before {
	content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--hp-maize); box-shadow: 0 0 0 2px var(--hp-navy);
	animation: umh-hp-pulse 1.6s ease-in-out infinite;
}
@keyframes umh-hp-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .umh-hp-rib.is-live .umh-hp-rib__k::before { animation: none; } }
/* the quiet "between" line (design review, Oct 19, 2026): the next game when no game is within 36 hours; one line, no buttons */
.umh-hp-rib.is-between { padding: 8px 0 9px; }
.umh-hp-rib.is-between .umh-hp-rib__info { display: block; color: var(--hp-muted); font: 500 var(--umh-fs-meta, 13px)/1.45 var(--hp-ui); }
.umh-hp-rib.is-between .umh-hp-rib__k { display: inline; min-width: 0; margin: 0; }
.umh-hp-rib.is-between .umh-hp-rib__line { color: var(--hp-ink); font: 700 var(--umh-fs-meta, 13px)/1.45 var(--hp-ui); margin: 0; }
.umh-hp-rib.is-between .umh-hp-rib__k::after,
.umh-hp-rib.is-between .umh-hp-rib__line::after { content: "·"; margin: 0 7px; color: var(--hp-muted); font-weight: 500; }
.umh-hp-rib.is-between .umh-hp-rib__meta::before { content: none; }
.umh-hp-rib.is-between .umh-hp-rib__m { white-space: nowrap; }
.umh-hp-rib.is-between .umh-hp-rib__go a { margin-left: 2px; color: var(--hp-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }   /* ink, not navy: reads in dark mode */
.umh-hp-rib.is-between .umh-hp-rib__go a + a { margin-left: 14px; }
.umh-hp-rib.is-between .umh-hp-rib__meta + .umh-hp-rib__go::before { content: "·"; margin: 0 7px; color: var(--hp-muted); }
.umh-hp-rib.is-between .umh-hp-rib__go a:hover { text-decoration: underline; }
/* ---------- lead package ---------- */
.umh-hp-pkg { margin-top: 4px; }
.umh-hp-pkg:not(:has(.umh-hp-ribbon)) { border-top: var(--hp-heavy); padding-top: 16px; }
.umh-hp-lead {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	padding-bottom: 26px;
}
.umh-hp-pkg.is-noimg .umh-hp-lead { grid-template-columns: minmax(0, 1fr); }
.umh-hp-lead__img { aspect-ratio: 2 / 1; }
.umh-hp-lead__h {
	color: var(--hp-ink);
	font-family: var(--hp-display) !important;
	font-size: clamp(26px, 1.1vw + 17px, 36px) !important;
	font-weight: 800 !important;
	font-variation-settings: "wdth" var(--hp-wdth);
	line-height: 1.04 !important;
	letter-spacing: -.005em;
	text-transform: none;
}
.umh-hp-lead__h a:hover, .umh-hp-card__h a:hover, .umh-hp-item__h a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.umh-hp-lead__dek {
	margin-top: 10px !important;
	color: var(--hp-ink-2);
	font: 400 var(--umh-fs-item, 17px)/1.45 var(--hp-text);
}
/* related links: the game's coverage cluster */
.umh-hp-links { margin-top: 16px; border-top: var(--hp-thin); }
/* two columns of links with rules, like a game package's "more on this game" */
.umh-hp-links ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.umh-hp-links li { border-bottom: var(--hp-thin); }
.umh-hp-links a {
	display: flex; align-items: center; width: 100%; min-height: 40px;
	color: var(--hp-ink);
	font: 700 var(--umh-fs-base, 14px)/1.2 var(--hp-ui);
}
.umh-hp-links a:not(.is-primary)::after { content: "›"; margin-left: auto; padding-left: 8px; color: var(--hp-muted); font-weight: 400; font-size: var(--umh-fs-item, 19px); line-height: 1; }
.umh-hp-links a:not(.is-primary):hover { text-decoration: underline; text-underline-offset: 3px; }
.umh-hp-links li:has(.is-primary) { border-bottom: 0; padding: 6px 0; }
.umh-hp-links a.is-primary {
	justify-content: center; min-height: 40px; background: var(--hp-maize); color: #00274c; border-radius: var(--hp-radius);
}
.umh-hp-links__plus { margin-left: 2px; color: var(--hp-label); font-weight: 800; }

/* ---------- secondary row ---------- */
.umh-hp-second {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
	padding: 20px 0 26px;
	border-top: var(--hp-thin);
}
.umh-hp-card__img { aspect-ratio: 16 / 9; margin-bottom: 10px; }   /* tighter than the 3:2 source (owner, Oct 27, 2026): the crop takes the bottom band with the UM Hoops mark */
.umh-hp-card__h {
	color: var(--hp-ink);
	font-family: var(--hp-display) !important;
	font-size: var(--umh-fs-item, 19px) !important; font-weight: 800 !important; line-height: 1.12 !important;
	font-variation-settings: "wdth" var(--umh-wdth-h2, 100);
	text-transform: none;
}
.umh-hp-card .umh-hp-meta { margin-top: 6px !important; }

/* ---------- river ---------- */
.umh-hp-sec-h {
	padding-top: 10px !important; margin-bottom: 2px !important;
	border-top: var(--hp-heavy);
	color: var(--hp-ink);
	font: 800 var(--umh-fs-meta, 13px)/1.2 var(--hp-ui) !important;
	letter-spacing: .1em; text-transform: uppercase;
}
.umh-hp-river > li {
	/* no dek since Oct 19, 2026 (owner): label + headline + byline, centred on the thumb. Oct 27, 2026 (owner: "a bit more
	   dynamic, maybe a bit bigger, it feels bland"): a 240 px 16:9 thumb cropped from the top like the cards, more air per row */
	display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; align-items: center;
	padding: 20px 0;
	border-top: var(--hp-thin);
}
.umh-hp-river > li:first-child { border-top: 0; }
.umh-hp-river > li.is-noimg { grid-template-columns: minmax(0, 1fr); }
.umh-hp-item__h {
	color: var(--hp-ink);
	font-family: var(--hp-display) !important;
	font-size: var(--umh-fs-section, 21px) !important; font-weight: 800 !important; line-height: 1.12 !important;
	font-variation-settings: "wdth" var(--umh-wdth-h2, 100);
	text-transform: none;
}
.umh-hp-item__dek {
	margin-top: 6px !important;
	color: var(--hp-ink-2);
	font: 400 var(--umh-fs-base, 16px)/1.45 var(--hp-text);
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.umh-hp-item__img { aspect-ratio: 16 / 9; }
.umh-hp-more { display: flex; gap: 12px; padding-top: 8px; border-top: var(--hp-thin); }
.umh-hp-more a {
	flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 12px;
	border: 1.5px solid var(--hp-ink); border-radius: var(--hp-radius);
	font: 700 var(--umh-fs-base, 15px)/1 var(--hp-ui); color: var(--hp-ink);
}
.umh-hp-more a:hover { background: var(--hp-ink); color: var(--hp-paper); }

/* the ribbon in a narrow column (owner, Oct 29, 2026: iPhone landscape, where the theme keeps the sidebar and the ribbon gets
   ~410 px of an 844 px screen): the layout follows the RIBBON's width, not the screen's. The phone stack (KICKER · meta,
   the line, then the links) whenever the ribbon is under 560 px; the quiet line puts its links on their own line. */
@container umh-rib (max-width: 559px) {
	.umh-hp-rib { display: block; padding: 10px 0 12px; font-size: var(--umh-fs-meta, 13px); }
	.umh-hp-rib__info { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; }
	.umh-hp-rib__k { margin: 0; min-width: 0; }
	.umh-hp-rib__meta { grid-column: 2; grid-row: 1; color: var(--hp-muted); }
	.umh-hp-rib__meta::before { content: none; }
	.umh-hp-rib__line { grid-column: 1 / -1; margin: 3px 0 0; font-size: var(--umh-fs-item, 18px); }
	.umh-hp-rib__links { margin-top: 9px !important; }
	.umh-hp-rib__links li { flex: 1 1 0; }
	.umh-hp-rib__links a { justify-content: center; width: 100%; min-height: 40px; padding: 0 8px; }
	.umh-hp-rib.is-between { padding: 8px 0 9px; }
	.umh-hp-rib.is-between .umh-hp-rib__info { display: block; }
	.umh-hp-rib.is-between .umh-hp-rib__line { margin: 0; font-size: var(--umh-fs-meta, 13px); }
	.umh-hp-rib.is-between .umh-hp-rib__line::after { content: none; }
	.umh-hp-rib.is-between .umh-hp-rib__meta { display: block; margin-top: 2px; }
	.umh-hp-rib.is-between .umh-hp-rib__meta + .umh-hp-rib__go::before { content: none; }
	.umh-hp-rib.is-between .umh-hp-rib__go { display: block; margin-top: 2px; }
	.umh-hp-rib.is-between .umh-hp-rib__go a { display: inline-block; margin-left: 0; padding: 6px 0; }
	.umh-hp-rib.is-between .umh-hp-rib__go a + a { margin-left: 18px; }
}

/* ---------- tablets ---------- */
@media (max-width: 1003px) and (min-width: 768px) {
	.umh-hp-lead { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.umh-hp-second { gap: 18px; }
	.umh-hp-card__h { font-size: var(--umh-fs-item, 17px) !important; }
	/* iPad upright / big phones sideways (owner, Oct 29, 2026: "a big gap between sidebar and the main content"): the theme
	   floats the stories in a column that reserves 315 px for the 300 px sidebar, and the list adds 23 px padding on both
	   sides, so ~85 px sat empty between the columns and the right edge had 10 px. Here one grid: equal outer margins, a
	   28 px gap, a 280 px sidebar; the lead headline at its desktop size (it was 38 px in a 390 px column). */
	body.umh-home-package #home-main-wrap .home-wrap-out1 { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 28px; align-items: start; float: none; width: auto; margin: 0; padding: 0 var(--hp-gut, 16px); box-sizing: border-box; }
	body.umh-home-package #home-main-wrap .home-wrap-in1,
	body.umh-home-package #home-main-wrap #home-left-wrap,
	body.umh-home-package #home-main-wrap #home-left-col,
	body.umh-home-package #home-main-wrap #home-mid-wrap { float: none; width: auto; max-width: none; margin: 0; }
	body.umh-home-package #home-main-wrap #archive-list-wrap.umh-home { float: none; width: auto; margin: 0; padding: 0 0 24px; }
	body.umh-home-package #home-main-wrap #arch-right-col { float: none; width: auto; margin: 0; }
	body.umh-home-package #home-main-wrap #arch-right-col #sidebar-wrap { float: none; width: 100%; margin: 0; }
	body.umh-home-package #home-main-wrap #arch-right-col .side-widget { float: none; width: 100%; max-width: none; margin-left: 0; margin-right: 0; box-sizing: border-box; }   /* the theme's tablet widgets were 252 px */
	body.umh-home-package .umh-hp-lead__h { font-size: 29px !important; }
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
	body.umh-home-package #archive-list-wrap.umh-home { width: 100%; margin: 0; padding: 0 var(--hp-gut) 24px; }
	/* phones: KICKER · meta on top, the line, then the links as a row of buttons */
	.umh-hp-rib { display: block; padding: 10px 0 12px; font-size: var(--umh-fs-meta, 13px); }
	.umh-hp-rib__info { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; }
	.umh-hp-rib__k { margin: 0; min-width: 0; }
	.umh-hp-rib__meta { grid-column: 2; grid-row: 1; color: var(--hp-muted); }
	.umh-hp-rib__meta::before { content: none; }
	.umh-hp-rib__line { grid-column: 1 / -1; margin: 3px 0 0; font-size: var(--umh-fs-item, 18px); }
	.umh-hp-rib__links { margin-top: 9px !important; }
	.umh-hp-rib__links li { flex: 1 1 0; }
	.umh-hp-rib__links a { justify-content: center; width: 100%; min-height: 40px; padding: 0 8px; }
	.umh-hp-rib.is-between { padding: 8px 0 9px; }
	.umh-hp-rib.is-between .umh-hp-rib__info { display: block; }
	.umh-hp-rib.is-between .umh-hp-rib__line { margin: 0; font-size: var(--umh-fs-meta, 13px); }
	.umh-hp-rib.is-between .umh-hp-rib__go a { display: inline-block; padding: 6px 0; }
	.umh-hp-lead { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 20px; }
	.umh-hp-lead__img { aspect-ratio: 16 / 9; margin: 0 calc(var(--hp-gut) * -1); }   /* phones: 16:9, anchored to the top (owner, Oct 27, 2026) */
	.umh-hp-pkg:not(:has(.umh-hp-ribbon)) .umh-hp-lead__img { margin-top: -16px; }
	.umh-hp-pkg:not(:has(.umh-hp-ribbon)) { border-top: 0; }
	.umh-hp-lead__h { font-size: var(--umh-fs-title, 29px) !important; }
	.umh-hp-lead__dek { font-size: var(--umh-fs-item, 17px); }
	.umh-hp-links a { min-height: 46px; font-size: var(--umh-fs-base, 15px); }
	.umh-hp-second { grid-template-columns: 1fr 1fr; gap: 20px 16px; padding: 18px 0 22px; }
	.umh-hp-second > :first-child { grid-column: 1 / -1; }
	.umh-hp-second > :first-child .umh-hp-card__h { font-size: var(--umh-fs-section, 22px) !important; }
	.umh-hp-card__h { font-size: var(--umh-fs-item, 17px) !important; }
	.umh-hp-card .umh-hp-label { font-size: var(--umh-fs-meta, 11px); }
	.umh-hp-river > li { grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; padding: 16px 0; }
	.umh-hp-item__h { font-size: var(--umh-fs-item, 19px) !important; }
	.umh-hp-item__dek { font-size: var(--umh-fs-base, 15px); }
	.umh-hp-item__img { aspect-ratio: 1 / 1; margin-top: 2px; }
}
.umh-hp-links li:has(.is-primary) { grid-column: 1 / -1; }

/* "Also from this game": other written stories about the package's game, as full-width rows like the links above */
.umh-hp-also { margin-top: 18px; }
.umh-hp-also__k { margin: 0 0 2px; font: 700 var(--umh-fs-meta, 11.5px)/1.2 var(--umh-font-ui, Arial, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--hp-label, #8a6a00); }
.umh-hp-also ul { list-style: none; margin: 0; padding: 0; border-top: var(--hp-thin, 1px solid #dfe3e8); }
.umh-hp-also li { margin: 0; padding: 0; border-bottom: var(--hp-thin, 1px solid #dfe3e8); }
.umh-hp-also a { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; color: var(--hp-ink, #111a24); text-decoration: none; font: 600 var(--umh-fs-base, 15px)/1.35 var(--umh-font-ui, Arial, sans-serif); }
.umh-hp-also a::after { content: "›"; margin-left: auto; padding-left: 8px; color: var(--hp-muted, #6a7686); font-weight: 400; font-size: var(--umh-fs-item, 19px); line-height: 1; }
.umh-hp-also a:hover { text-decoration: underline; text-underline-offset: 3px; background: none; color: var(--hp-ink, #111a24); }

/* Package links + "Also from this game" run full width under the photo and headline (owner, Oct 14: too much white space
   under the photo when they sat in the text column). Desktop: links in up to four columns. */
.umh-hp-lead__pkg { grid-column: 1 / -1; min-width: 0; }
.umh-hp-lead__pkg .umh-hp-links { margin-top: 2px; }
.umh-hp-lead__pkg .umh-hp-links ul { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.umh-hp-lead { align-items: start; }
@media (max-width: 767px) {
	.umh-hp-lead__pkg .umh-hp-links ul { grid-template-columns: 1fr 1fr; }
}
/* keep the photo and the headline column about the same height: three-line dek, a taller crop on mid-size screens */
.umh-hp-lead__dek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
@media (min-width: 768px) and (max-width: 1399px) { .umh-hp-lead__img { aspect-ratio: 2 / 1; } }
/* UM Hoops photos are 1638×1091 (3:2). Since Oct 27, 2026 (owner: "crop the photo dimensions a bit more … over the UM Hoops
   logo") the lead is a 2:1 crop anchored to the top: the faces sit in the upper two-thirds, the bottom band with the mark goes.
   (Oct 15 had kept 3:2 so the mark stayed whole.) Wide screens get a 4-line dek. */
.umh-hp-lead__img { aspect-ratio: 2 / 1; }
@media (min-width: 1400px) { .umh-hp-lead__dek { -webkit-line-clamp: 4; line-clamp: 4; } }
/* Package links back in the headline column, as one vertical list beside the photo (owner, Oct 14); "Also from this game"
   stays full width below. Phones: two columns under the headline. */
.umh-hp-lead__body .umh-hp-links { margin-top: 14px; }
.umh-hp-lead__body .umh-hp-links ul { grid-template-columns: minmax(0, 1fr); }
.umh-hp-lead__body .umh-hp-links a { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 767px) { .umh-hp-lead__body .umh-hp-links ul { grid-template-columns: 1fr 1fr; } }
/* Desktop: the photo always fills the height of the headline column (at least 3:2), cropping a little at the sides when the
   links list runs long, so there is never a gap under either column. */
@media (min-width: 768px) {
	.umh-hp-lead { align-items: stretch; }
	.umh-hp-lead__img { align-self: stretch; height: auto; display: block; overflow: hidden; }
	/* the 3:2 source cropped to the box from the top (owner, Oct 27, 2026): the faces stay, the bottom band with the mark goes;
	   a column taller than 2:1 trims the sides evenly */
	.umh-hp-lead__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
	.umh-hp-lead__body .umh-hp-links a { padding-top: 7px; padding-bottom: 7px; }
}
@media (min-width: 768px) {
	.umh-hp-lead__img { width: 100%; aspect-ratio: auto; position: relative; }
	.umh-hp-lead__img::before { content: ""; display: block; padding-top: 50%; }   /* at least 2:1 (was 3:2 until Oct 27, 2026) */
	/* the photo is always the top 2:1 slice of the source, scaled to the column's height and centred: a taller column trims
	   the sides, never shows the bottom band (object-fit alone would show the whole height once the box passed 3:2) */
	.umh-hp-lead__img img { position: absolute; top: 0; bottom: 0; left: 50%; right: auto; width: auto; min-width: 100%; max-width: none; height: 100%; aspect-ratio: 2 / 1; transform: translateX(-50%); }   /* max-width: none: the theme's img { max-width: 100% } capped the width at the box */
}
/* four or more links: two columns beside the photo, so the column stays about as tall as a 3:2 photo (less cropping) */
@media (min-width: 768px) {
	.umh-hp-lead__body .umh-hp-links ul:has(> li:nth-child(4)) { grid-template-columns: 1fr 1fr; column-gap: 18px; }
	.umh-hp-lead__dek { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* cards and river thumbs: cropped from the top (owner, Oct 27, 2026: the mark in the bottom-right corner is redundant on
   our own site); the cards are 16:9, the river thumbs keep their 3:2 / 1:1 boxes */
.umh-hp-card__img img, .umh-hp-item__img img { object-position: center top; }

/* forum reply counts on bylines + "From the forum" in the home sidebar (UMH_Forum_Threads, Oct 19, 2026) */
.umh-hp-meta .umh-hp-replies { color: inherit !important; font-weight: inherit !important; text-decoration: none; }
.umh-hp-meta a.umh-hp-replies:hover { text-decoration: underline; text-underline-offset: 3px; background: none; }
.umh-ff { margin-bottom: 28px; color: var(--umh-ink, #111a24); font-family: var(--umh-font-ui, "Work Sans", "Helvetica Neue", Arial, sans-serif); }
.umh-ff__h { margin: 0 !important; padding: 10px 0 4px !important; border-top: 2px solid var(--umh-ink, #111a24); color: var(--umh-ink, #111a24) !important; font: 800 var(--umh-fs-side-h, 18px)/1.2 var(--umh-font-display, "Work Sans", "Helvetica Neue", Arial, sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important; }
.umh-ff__dek { margin: 0 0 8px !important; color: var(--umh-muted, #6a7686); font: 400 var(--umh-fs-small, 13px)/1.4 var(--umh-font-ui, Arial, sans-serif); }
.umh-ff__list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.umh-ff__list li { margin: 0 !important; padding: 10px 0 !important; border-top: 1px solid var(--umh-rule, #dfe3e8); list-style: none !important; }
.umh-ff__t { display: block; color: var(--umh-ink, #111a24) !important; font: 700 var(--umh-fs-base, 15px)/1.3 var(--umh-font-ui, Arial, sans-serif); text-decoration: none !important; }
.umh-ff__t:hover { text-decoration: underline !important; text-underline-offset: 3px; background: none; }
.umh-ff__sum { margin: 4px 0 0 !important; color: var(--umh-ink-2, #38475a); font: 400 var(--umh-fs-small, 13px)/1.45 var(--umh-font-ui, Arial, sans-serif); }
.umh-ff__m { display: flex; align-items: center; gap: 8px; margin: 5px 0 0 !important; color: var(--umh-muted, #6a7686); font: 500 var(--umh-fs-meta, 12px)/1.3 var(--umh-font-ui, Arial, sans-serif); }
.umh-ff__bar { flex: 0 0 56px; height: 4px; border-radius: 2px; background: var(--umh-rule, #dfe3e8); overflow: hidden; }
.umh-ff__bar i { display: block; height: 100%; background: var(--umh-maize, #ffcb05); border-radius: 2px; }
.umh-ff__all { display: inline-block; padding: 8px 0; border-top: 1px solid var(--umh-rule, #dfe3e8); width: 100%; color: var(--umh-ink, #111a24) !important; font: 600 var(--umh-fs-small, 13px)/1.3 var(--umh-font-ui, Arial, sans-serif); text-decoration: none !important; }
.umh-ff__all:hover { text-decoration: underline !important; text-underline-offset: 3px; }

/* ---------- "Inside UM Hoops+" as the one navy module on the page (design review, Oct 19, 2026) ----------
   The band (UMH_Related::home_row, styled by related.css) becomes a navy panel: it re-points the colour tokens it and
   related.css read (--umh-ink / --umh-muted / --umh-label / --umh-rule ...) to the on-panel tokens, so every rule in
   related.css (kickers, quote, Fan Pulse numbers, spark line, "+" gate lines) turns light without restyling each one.
   Kickers maize, dividers translucent white, the visitor's join button solid maize. Dark mode: a lighter navy under a
   maize top rule (umh-tokens.css). Phones: edge to edge, the text on the page's 16 px gutter. */
.umh-home .umh-rel--home {
	--umh-ink: var(--umh-on-panel, #fff);
	--umh-ink-2: var(--umh-on-panel, #fff);
	--umh-muted: var(--umh-on-panel-2, #c9d5e2);
	--umh-label: var(--umh-maize, #ffcb05);
	--umh-rule: var(--umh-on-panel-rule, rgba(255, 255, 255, .22));
	--umh-tint: var(--umh-panel-2, #0d355f);
	--umh-img-backing: var(--umh-panel-2, #0d355f);
	--umh-good: var(--umh-on-panel-good, #7fd3a3);
	--umh-bad: var(--umh-on-panel-bad, #ff9b92);
	--umh-rule-quote: 3px solid var(--umh-maize, #ffcb05);
	margin: 6px 0 28px;
	padding: 18px 24px 22px;
	border-top: 3px solid var(--umh-panel-top, transparent);
	background: var(--umh-panel, #00274c);
	color: var(--umh-on-panel, #fff);
}
.umh-home .umh-rel--home .umh-rel-hrow { border-top: 0; padding: 0 0 12px; margin: 0; border-bottom: 1px solid var(--umh-rule); }
.umh-home .umh-rel--home .umh-rel-h { color: var(--umh-on-panel, #fff) !important; }
.umh-home .umh-rel--home .umh-rel-h-more { color: var(--umh-on-panel, #fff) !important; text-decoration: underline; text-decoration-color: var(--umh-on-panel-rule, rgba(255, 255, 255, .5)); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.umh-home .umh-rel--home .umh-rel-h-more:hover { text-decoration-color: var(--umh-maize, #ffcb05); }
.umh-home .umh-rel--home .umh-rel-m { border-top: 0; padding-top: 14px; padding-bottom: 0; }
.umh-home .umh-rel--home .umh-rel-grid { gap: 0 24px; }
@media (min-width: 768px) {
	/* columns: thin translucent rules between them */
	.umh-home .umh-rel--home .umh-rel-m + .umh-rel-m { border-left: 1px solid var(--umh-rule); padding-left: 24px; margin-left: -24px; }
}
.umh-home .umh-rel--home .umh-rel-q p { color: var(--umh-on-panel, #fff) !important; }
.umh-home .umh-rel--home .umh-rel-cta a { border-bottom-color: var(--umh-maize, #ffcb05); color: var(--umh-on-panel, #fff); }
.umh-home .umh-rel--home .umh-rel-cta a:hover { border-bottom-color: var(--umh-on-panel, #fff); }
.umh-home .umh-rel--home a:hover { text-decoration-color: var(--umh-maize, #ffcb05); }
/* hovers (owner, Oct 21, 2026: "the hovers are messed up"): the theme's grey link hover never reaches the panel; a card
   hover is one maize underline under its white title, and the card's own "→" link takes the hover from the title */
.umh-home .umh-rel--home a, .umh-home .umh-rel--home a:hover { color: var(--umh-on-panel, #fff) !important; }
.umh-home .umh-rel--home .umh-rel-dc__go { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .12s ease; }
.umh-home .umh-rel--home .umh-rel-dc:hover .umh-rel-dc__go { text-decoration-color: var(--umh-maize, #ffcb05); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.umh-home .umh-rel--home .umh-rel-dc:has(.umh-rel-dc__more:hover) .umh-rel-dc__go { text-decoration-color: transparent; }
.umh-home .umh-rel--home .umh-rel-dc__more { color: var(--umh-on-panel, #fff) !important; transition: border-color .12s ease; }
.umh-home .umh-rel--home .umh-rel-dc__more:hover { border-bottom-color: var(--umh-on-panel, #fff); }
.umh-home .umh-rel--home a:focus-visible { outline-color: var(--umh-maize, #ffcb05); }
body.umh-brand .umh-home .umh-rel--home .umh-rel-join { background: var(--umh-maize, #ffcb05); border-color: var(--umh-maize, #ffcb05); color: var(--umh-navy, #00274c) !important; }
@media (max-width: 767px) {
	.umh-home .umh-rel--home { margin: 4px calc(var(--hp-gut) * -1) 24px; padding: 16px var(--hp-gut) 20px; }
	.umh-home .umh-rel--home .umh-rel-m + .umh-rel-m { border-top: 1px solid var(--umh-rule); margin-top: 16px; padding-top: 14px; }
}

/* ---------- today's free puzzle (design review, Oct 20, 2026): one quiet line above Latest ---------- */
.umh-hp-play { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 22px !important; padding: 12px 14px !important; background: var(--hp-tint); border-left: 3px solid var(--hp-maize); font: 500 var(--umh-fs-base, 15px)/1.35 var(--hp-ui); color: var(--hp-ink); }
.umh-hp-play__k { color: var(--hp-ink-2); }
.umh-hp-play__n { font-weight: 800; }
.umh-hp-play__go { margin-left: auto; font-weight: 700; border-bottom: 2px solid var(--hp-maize); white-space: nowrap; }
.umh-hp-play__go:hover { border-bottom-color: currentColor; }
@media (max-width: 479px) { .umh-hp-play__go { margin-left: 0; } }

/* no Trending on the home page (Oct 26, 2026; it repeated the stories on the left): UMH_Home::home_sidebar_widgets drops the
   theme's widget; this covers a copy printed outside the widget list (the dev site's stand-in of the live sidebar) */
body.home .side-widget.mvp_pop_widget, body.home [id^="mvp_pop_widget-"] { display: none !important; }

/* "New in UM Hoops+" on top of the home sidebar (Oct 26, 2026; it replaced the navy "Inside UM Hoops+" panel in the column):
   the From the forum list's look, a series + date line over each title */
.umh-hside { margin: 0 0 28px; }
.umh-hside__list { list-style: none; margin: 0 !important; padding: 0 !important; }
.umh-hside__list li { margin: 0 !important; padding: 10px 0 !important; border-bottom: 1px solid var(--umh-rule, #dfe3e8); }
.umh-hside__list li::before { content: none !important; }
.umh-hside__k { margin: 0 0 3px !important; font: 700 var(--umh-fs-meta, 11.5px)/1.2 var(--umh-font-ui, Arial, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--umh-label, #8a6a00); }
.umh-hside__k span { letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--umh-muted, #6a7686); }
.umh-hside__t { display: block; color: var(--umh-ink, #111a24) !important; text-decoration: none; font: 700 var(--umh-fs-base, 15px)/1.35 var(--umh-font-ui, Arial, sans-serif); }
@media (hover: hover) { .umh-hside__t:hover { text-decoration: underline; text-underline-offset: 3px; } }
.umh-hside .umh-ff__h .umh-plus-badge { margin-left: 1px; }

/* no zoom on hover (owner, Oct 28, 2026: "remove the weird hover style on the images"; it was added Oct 27) */
.umh-hp-img { overflow: hidden; }

/* The layout follows the COLUMN, not the window (owner, Oct 27, 2026: "spacing looks a bit weird" between the tablet
   breakpoints). Flex Mag keeps the sidebar from 768 px, so a 820 px window leaves the home column ~390 px wide while the
   desktop rules (three cards, a 240 px thumb, the lead beside its headline) still applied. The theme's left column is the
   container; under 640 px of column the phone layout applies whatever the window, a mid column gets a smaller thumb. */
body.umh-home-package #home-left-col { container-type: inline-size; container-name: umh-home; }
@container umh-home (max-width: 640px) {
	.umh-hp-lead { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 20px; align-items: start; }
	.umh-hp-lead__img { aspect-ratio: 16 / 9; position: static; height: auto; align-self: auto; display: block; }
	.umh-hp-lead__img::before { content: none; }
	.umh-hp-lead__img img { position: static; inset: auto; width: 100%; height: 100%; min-width: 0; max-width: 100%; aspect-ratio: auto; transform: none; object-position: center top; }
	.umh-hp-lead__h { font-size: var(--umh-fs-title, 29px) !important; }
	.umh-hp-lead__dek { font-size: var(--umh-fs-item, 17px); -webkit-line-clamp: 3; line-clamp: 3; }
	.umh-hp-lead__body .umh-hp-links ul, .umh-hp-lead__body .umh-hp-links ul:has(> li:nth-child(4)) { grid-template-columns: 1fr 1fr; }
	.umh-hp-second { grid-template-columns: 1fr 1fr; gap: 20px 16px; padding: 18px 0 22px; }
	.umh-hp-second > :first-child { grid-column: 1 / -1; }
	.umh-hp-second > :first-child .umh-hp-card__h { font-size: var(--umh-fs-section, 22px) !important; }
	.umh-hp-card__h { font-size: var(--umh-fs-item, 17px) !important; }
	.umh-hp-card .umh-hp-label { font-size: var(--umh-fs-meta, 11px); }
	.umh-hp-river > li { grid-template-columns: minmax(0, 1fr) 128px; gap: 16px; padding: 16px 0; }
	.umh-hp-item__h { font-size: var(--umh-fs-item, 19px) !important; }
	.umh-hp-item__img { aspect-ratio: 1 / 1; margin-top: 2px; }
}
@container umh-home (min-width: 641px) and (max-width: 820px) {
	.umh-hp-river > li { grid-template-columns: minmax(0, 1fr) 180px; gap: 22px; }
	.umh-hp-card__h { font-size: var(--umh-fs-item, 18px) !important; }
}