/*
 * "This day in Michigan hoops" ([umh_this_day], UMH_This_Day, Oct 15, 2026). Sports desk tokens (brand/umh-tokens.css)
 * with fallbacks, so dark mode follows the tokens. Rules, not boxes; square corners; the photos keep their 3:2 shape and
 * sit right / bottom so the UM Hoops photo mark (bottom right) stays whole.
 */
.umh-td {
	--td-ink: var(--umh-ink, #111a24);
	--td-ink-2: var(--umh-ink-2, #38475a);
	--td-muted: var(--umh-muted, #6a7686);
	--td-label: var(--umh-label, #8a6a00);
	--td-rule: var(--umh-rule, #dfe3e8);
	--td-tint: var(--umh-tint, #f6f7f9);
	--td-good: var(--umh-good, #1d6b40);
	--td-bad: var(--umh-bad, #a3261d);
	--td-maize: var(--umh-maize, #ffcb05);
	--td-display: var(--umh-font-display, "Helvetica Neue", Arial, sans-serif);
	--td-ui: var(--umh-font-ui, "Helvetica Neue", Arial, sans-serif);
	box-sizing: border-box;
	color: var(--td-ink);
	font: 400 var(--umh-fs-base, 15px)/1.45 var(--td-ui);
	min-width: 0;
}
.umh-td *, .umh-td *::before, .umh-td *::after { box-sizing: border-box; }
.umh-td :is(h2, h3, p, ol, ul, li) { margin: 0; padding: 0; }
.umh-td :is(h2, h3, p, ol, ul, li):not(.umh-td-x) { margin-bottom: 0 !important; }   /* the theme's paragraph spacing */
.umh-td :is(h2, h3) { color: var(--td-ink) !important; }
.umh-td ol, .umh-td ul, .umh-td li { list-style: none !important; margin-left: 0 !important; }
.umh-td li::marker { content: none; }
.umh-td a { color: inherit; text-decoration: none; font: inherit !important; }   /* widget areas set their own link fonts */
.umh-td a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.umh-td a:focus-visible { outline: 2px solid var(--umh-focus, var(--td-ink)); outline-offset: 2px; }
.umh-td[hidden] { display: none !important; }

.umh-td-k {
	color: var(--td-label) !important;
	font: 700 var(--umh-fs-label, 12px)/1.25 var(--td-ui) !important;
	letter-spacing: var(--umh-track-label, .08em) !important; text-transform: uppercase !important;
}
.umh-td-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: right bottom; margin: 0 !important; border-radius: 0; background: var(--umh-img-backing, var(--td-tint)); }
.umh-td-yr { color: var(--td-ink) !important; font: 800 var(--umh-fs-data, 14px)/1.3 var(--td-ui) !important; font-variant-numeric: tabular-nums; }
.umh-td-wl {
	display: inline-block; min-width: 1.4em; padding: 1px 4px; margin-right: 2px;
	color: #fff; background: var(--td-good); text-align: center;
	font: 800 11px/1.3 var(--td-ui); letter-spacing: .04em; vertical-align: 2px;
}
.umh-td-wl.is-l { background: var(--td-bad); }
.umh-td-meta { margin-top: 3px !important; color: var(--td-muted) !important; font: 500 var(--umh-fs-meta, 13px)/1.35 var(--td-ui) !important; }
.umh-td-notes { margin-top: 3px !important; color: var(--td-ink-2) !important; font: 600 var(--umh-fs-meta, 13px)/1.35 var(--td-ui) !important; }

/* ---------- compact: one photo + one line (sidebar, widgets) ---------- */
.umh-td--compact { padding: 10px 0 14px; border-top: 2px solid var(--td-ink); margin: 0 0 18px; }
.umh-td--compact .umh-td-k { margin-bottom: 8px !important; }
.umh-td-c-img { display: block; margin-bottom: 8px; }
.umh-td-c-line { color: var(--td-ink) !important; font: 700 var(--umh-fs-base, 15px)/1.35 var(--td-ui) !important; }
.umh-td-c-line .umh-td-yr { margin-right: 4px; }
.umh-td-c-ev { color: var(--td-muted); font-weight: 500; font-size: var(--umh-fs-meta, 13px); }
.umh-td-c-more { margin-top: 6px !important; font: 700 var(--umh-fs-meta, 13px)/1.3 var(--td-ui) !important; }
.umh-td-c-more a { border-bottom: 2px solid var(--td-maize); padding-bottom: 1px; }
.umh-td-c-more a:hover { text-decoration: none; border-bottom-color: var(--td-ink); }

/* ---------- full page ---------- */
.umh-td--full { max-width: 860px; margin: 0 auto 32px; }
.umh-td-head { padding-top: 10px; border-top: 2px solid var(--td-ink); margin-bottom: 16px; }
.umh-td-date { margin-top: 4px !important; font: 800 var(--umh-fs-section, 30px)/1.1 var(--td-display) !important; font-variation-settings: "wdth" var(--umh-wdth-h2, 100); letter-spacing: 0 !important; text-transform: none !important; }
.umh-td-sub { margin-top: 2px !important; color: var(--td-muted) !important; font: 500 var(--umh-fs-meta, 13px)/1.35 var(--td-ui) !important; }
.umh-td-empty { padding: 14px 0; color: var(--td-ink-2) !important; }
.umh-td-empty a { font-weight: 700; border-bottom: 2px solid var(--td-maize); }

.umh-td-lead { margin-bottom: 22px; }
.umh-td-pics { display: grid; grid-template-columns: 3fr 1fr; grid-auto-rows: auto; gap: 4px; margin-bottom: 12px !important; }
.umh-td-pics li:first-child { grid-row: span 3; }   /* 3:2 photos: one at 3fr is as tall as three at 1fr */
.umh-td-pics.n-1 { grid-template-columns: 1fr; }
.umh-td-pics.n-2 { grid-template-columns: 1fr 1fr; }
.umh-td-pics.n-2 li:first-child { grid-row: auto; }
.umh-td-pics.n-3 { grid-template-columns: 2fr 1fr; }
.umh-td-pics.n-3 li:first-child { grid-row: span 2; }
.umh-td-pics a { display: block; }
.umh-td-pics.n-4 li:first-child .umh-td-img, .umh-td-pics.n-3 li:first-child .umh-td-img { height: 100%; }
.umh-td-lead-b .umh-td-yr { color: var(--td-label) !important; font-size: var(--umh-fs-meta, 13px) !important; letter-spacing: .04em; }
.umh-td-score { color: var(--td-ink) !important; font: 700 var(--umh-fs-base, 15px)/1.35 var(--td-ui) !important; letter-spacing: 0 !important; text-transform: none !important; }
.umh-td-lead .umh-td-score { margin-top: 2px !important; font: 800 var(--umh-fs-item, 21px)/1.2 var(--td-display) !important; }
.umh-td-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px !important; font: 700 var(--umh-fs-meta, 13px)/1.3 var(--td-ui) !important; }
.umh-td-links a { border-bottom: 2px solid var(--td-maize); padding-bottom: 1px; }
.umh-td-links a:hover { text-decoration: none; border-bottom-color: var(--td-ink); }

.umh-td-h {
	padding-top: 10px !important; margin-bottom: 2px !important; border-top: 2px solid var(--td-ink);
	font: 800 var(--umh-fs-meta, 13px)/1.2 var(--td-ui) !important; letter-spacing: .1em !important; text-transform: uppercase !important;
}
.umh-td-r { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; gap: 2px 14px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--td-rule); }
.umh-td-r .umh-td-yr { padding-top: 1px; }
.umh-td-r-b { min-width: 0; }
.umh-td-r-img { width: 96px; }
.umh-td-r.is-moment .umh-td-score { font-weight: 800; }
.umh-td-foot { margin-top: 16px !important; font: 700 var(--umh-fs-base, 15px)/1.3 var(--td-ui) !important; }
.umh-td-foot a { border-bottom: 2px solid var(--td-maize); padding-bottom: 1px; }
.umh-td-foot a:hover { text-decoration: none; border-bottom-color: var(--td-ink); }
.umh-td-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--td-rule); font: 700 var(--umh-fs-meta, 13px)/1.3 var(--td-ui); }
.umh-td-nav a { color: var(--td-ink-2); }

/* a week: dates ("Feb. 26, 1998") are longer than years */
.umh-td--full.is-week .umh-td-r { grid-template-columns: 7.6em minmax(0, 1fr) auto; }

@media (max-width: 600px) {
	.umh-td-date { font-size: var(--umh-fs-h2, 26px) !important; }
	.umh-td-pics, .umh-td-pics.n-3, .umh-td-pics.n-4 { grid-template-columns: 1fr 1fr; }
	.umh-td-pics li:first-child, .umh-td-pics.n-3 li:first-child { grid-column: 1 / -1; grid-row: auto; }
	.umh-td-pics.n-4 li:first-child .umh-td-img, .umh-td-pics.n-3 li:first-child .umh-td-img { height: auto; }
	.umh-td-pics.n-4 li:nth-child(4) { display: none; }
	.umh-td-r { grid-template-columns: 3.4em minmax(0, 1fr) 72px; gap: 2px 10px; }
	.umh-td-r:not(.has-img) { grid-template-columns: 3.4em minmax(0, 1fr); }
	.umh-td--full.is-week .umh-td-r { grid-template-columns: minmax(0, 1fr) 72px; }
	.umh-td--full.is-week .umh-td-r:not(.has-img) { grid-template-columns: minmax(0, 1fr); }
	.umh-td--full.is-week .umh-td-r .umh-td-yr { grid-column: 1 / -1; }
	.umh-td-r-img { width: 72px; }
}
