/*
Theme Name: Hormone Health Desk
Theme URI: https://hormonehealthdesk.com
Author: Hormone Health Desk
Author URI: https://hormonehealthdesk.com
Description: Magazine editorial FSE theme for Hormone Health Desk — Forbes Health–caliber ranking publisher. Editorial Desk. Educational publisher, not a clinic.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hormone-health-desk
Tags: full-site-editing, block-patterns, block-styles, education, news, custom-colors, custom-logo, editor-style
*/

/* Hormone Health Desk v2 — Editorial Desk — magazine-first Forbes Health bar */


/* ==========================================================================
   Hormone Health Desk v2 — Magazine Editorial
   Bar: Forbes Health ranking publisher · NOT Clinical Wire tick-gutter clone
   Palette: cream paper + forest green + copper
   ========================================================================== */

:root {
	--hhd-bg: #F6F3EE;
	--hhd-surface: #FFFDF8;
	--hhd-text: #1C1917;
	--hhd-muted: #78716C;
	--hhd-border: #D6D3D1;
	--hhd-accent: #9A3412;
	--hhd-accent-2: #1E3A5F;
	--hhd-highlight: #F5E6DC;
	--hhd-cream-deep: #EDE6DC;
	--hhd-font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--hhd-font-body: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
	--hhd-radius: 7px;
	--hhd-shadow: 0 1px 2px rgba(18, 26, 23, 0.04), 0 8px 24px rgba(18, 26, 23, 0.06);
	--hhd-content: 42rem;
	--hhd-wide: 68rem;
}


/* Base */
body {
	background-color: var(--hhd-bg);
	color: var(--hhd-text);
	font-family: var(--hhd-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-site-title {
	font-family: var(--hhd-font-display);
	font-weight: 600;
	color: var(--hhd-text);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

a {
	color: var(--hhd-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--hhd-accent-2);
}

/* --------------------------------------------------------------------------
   Layout shell — wide magazine canvas (no tick gutter)
   -------------------------------------------------------------------------- */
.hhd-shell {
	max-width: var(--hhd-wide);
	margin-inline: auto;
	padding: 2.5rem 1.5rem 4rem;
}

.hhd-shell--narrow {
	max-width: calc(var(--hhd-content) + 3rem);
}

@media (min-width: 782px) {
	.hhd-shell {
		padding-inline: 2.5rem;
	}
}

/* --------------------------------------------------------------------------
   Header — premium masthead
   -------------------------------------------------------------------------- */
.hhd-header {
	background: var(--hhd-surface);
	border-bottom: 1px solid var(--hhd-border);
}

.hhd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	max-width: var(--hhd-wide);
	margin-inline: auto;
	padding: 1.15rem 1.5rem;
}

@media (min-width: 782px) {
	.hhd-header__inner {
		padding-inline: 2.5rem;
	}
}

.hhd-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--hhd-text);
}

.hhd-wordmark:hover {
	color: var(--hhd-text);
}

.hhd-lockup-img {
	display: block;
	height: 2.5rem;
	width: auto;
	max-width: min(280px, 70vw);
}

.hhd-lockup-img--footer {
	height: 2rem;
	margin-bottom: 0.5rem;
}

.hhd-bug-img {
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
}

/* Elegant CSS wordmark fallback (if SVG missing) */
.hhd-wordmark__fallback {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	line-height: 1;
}

.hhd-wordmark__fallback-name {
	font-family: var(--hhd-font-display);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hhd-text);
}

.hhd-wordmark__fallback-tag {
	font-family: var(--hhd-font-body);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hhd-accent-2);
}

.hhd-capsule {
	width: 1.75rem;
	height: 2.5rem;
	border: 1.5px solid var(--hhd-accent);
	border-radius: 999px;
	position: relative;
	flex-shrink: 0;
}

.hhd-capsule::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 22%;
	transform: translateX(-50%);
	width: 55%;
	height: 28%;
	background: var(--hhd-accent);
	border-radius: 2px;
}

.hhd-capsule::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 22%;
	transform: translateX(-50%);
	width: 55%;
	height: 28%;
	background: var(--hhd-accent-2);
	border-radius: 2px;
}

.hhd-header .wp-block-navigation {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hhd-header .wp-block-navigation a {
	color: var(--hhd-muted);
	text-decoration: none;
}

.hhd-header .wp-block-navigation a:hover {
	color: var(--hhd-accent);
}

.hhd-kicker-bar {
	max-width: var(--hhd-wide);
	margin-inline: auto;
	padding: 0.65rem 1.5rem;
	border-bottom: 1px solid var(--hhd-border);
	font-size: 0.75rem;
	color: var(--hhd-muted);
	letter-spacing: 0.01em;
}

@media (min-width: 782px) {
	.hhd-kicker-bar {
		padding-inline: 2.5rem;
	}
}

.hhd-kicker-bar a {
	color: var(--hhd-accent);
	font-weight: 500;
	text-decoration: none;
}

.hhd-kicker-bar a:hover {
	color: var(--hhd-accent-2);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Hero — magazine split (copy + wellness still-life)
   -------------------------------------------------------------------------- */
.hhd-hero {
	display: grid;
	gap: 2.5rem;
	align-items: center;
	margin-bottom: 3.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--hhd-border);
}

@media (min-width: 900px) {
	.hhd-hero {
		grid-template-columns: 1.15fr 0.85fr;
		gap: 3.5rem;
	}
}

.hhd-hero__eyebrow {
	font-family: var(--hhd-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hhd-accent-2);
	margin: 0 0 1rem;
}

.hhd-hero__title {
	font-family: var(--hhd-font-display);
	font-weight: 700;
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: 0 0 1.25rem;
	color: var(--hhd-text);
}

.hhd-hero__deck {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--hhd-muted);
	margin: 0 0 1.5rem;
	max-width: 36rem;
}

.hhd-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	font-size: 0.8125rem;
	color: var(--hhd-muted);
	align-items: center;
}

.hhd-hero__meta-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--hhd-accent-2);
	display: inline-block;
}

/* Abstract wellness still-life (CSS/SVG — not clinic portal) */
.hhd-still-life {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--hhd-radius);
	overflow: hidden;
	background:
		radial-gradient(ellipse 60% 50% at 70% 60%, #9A34121F, transparent 70%),
		radial-gradient(ellipse 40% 40% at 30% 40%, #1E3A5F1A, transparent 65%),
		linear-gradient(160deg, var(--hhd-cream-deep) 0%, #F5E6DC 45%, #EDE6DC 100%);
	box-shadow: var(--hhd-shadow);
	border: 1px solid var(--hhd-border);
}

.hhd-still-life__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hhd-still-life__caption {
	position: absolute;
	bottom: 0.75rem;
	right: 0.9rem;
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hhd-muted);
	opacity: 0.7;
}

/* Unsplash-style photo placeholder (optional class) */
.hhd-hero-photo {
	aspect-ratio: 4 / 3;
	border-radius: var(--hhd-radius);
	overflow: hidden;
	background: var(--hhd-cream-deep) center/cover no-repeat;
	box-shadow: var(--hhd-shadow);
	border: 1px solid var(--hhd-border);
	min-height: 220px;
}

.hhd-hero-photo--wellness {
	background-image:
		linear-gradient(180deg, rgba(18, 26, 23, 0.05), transparent 40%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Crect fill='%23E8F0EB' width='800' height='600'/%3E%3Cellipse cx='520' cy='340' rx='140' ry='90' fill='%23C5D9CC' opacity='0.7'/%3E%3Cellipse cx='280' cy='280' rx='100' ry='100' fill='%23D4C4B0' opacity='0.85'/%3E%3Ccircle cx='420' cy='220' r='48' fill='%23A8C4B4'/%3E%3Ccircle cx='380' cy='380' r='70' fill='%23B8A090' opacity='0.6'/%3E%3Cpath d='M200 420 Q320 300 400 380' stroke='%230B6E4F' stroke-width='2' fill='none' opacity='0.35'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Section labels
   -------------------------------------------------------------------------- */
.hhd-section-label {
	font-family: var(--hhd-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hhd-accent);
	margin: 0 0 0.75rem;
}

.hhd-section-hed {
	font-family: var(--hhd-font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	margin: 0 0 1.75rem;
	letter-spacing: -0.02em;
}

.hhd-section-hed::after {
	content: none; /* magazine: no tick rule under hed */
}

/* --------------------------------------------------------------------------
   Methodology — magazine pull panel (not tick-box)
   -------------------------------------------------------------------------- */
.hhd-methodology {
	display: grid;
	gap: 1.5rem;
	padding: 1.75rem 2rem;
	background: var(--hhd-surface);
	border: 1px solid var(--hhd-border);
	border-radius: var(--hhd-radius);
	border-left: 3px solid var(--hhd-accent);
	box-shadow: var(--hhd-shadow);
	margin: 0 0 3rem;
}

@media (min-width: 782px) {
	.hhd-methodology {
		grid-template-columns: auto 1fr;
		align-items: start;
		gap: 1.75rem;
	}
}

.hhd-methodology__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	background: var(--hhd-accent);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 4px;
	white-space: nowrap;
	width: fit-content;
}

.hhd-methodology p {
	margin: 0 0 0.75rem;
	color: var(--hhd-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.hhd-methodology p:last-child {
	margin-bottom: 0;
}

.hhd-methodology a {
	font-weight: 600;
	text-decoration: none;
	color: var(--hhd-accent);
}

.hhd-methodology a:hover {
	color: var(--hhd-accent-2);
}

.hhd-methodology__meta {
	font-size: 0.75rem !important;
	color: var(--hhd-muted) !important;
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Disclosure — quiet, near rankings
   -------------------------------------------------------------------------- */
.hhd-disclosure-short {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--hhd-muted);
	margin: 0 0 2rem;
	padding: 0.85rem 1rem;
	background: transparent;
	border: none;
	border-top: 1px solid var(--hhd-border);
	border-bottom: 1px solid var(--hhd-border);
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
}

.hhd-disclosure-short::before {
	content: "i";
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	border: 1.5px solid var(--hhd-muted);
	font-size: 0.65rem;
	font-weight: 700;
	font-style: italic;
	font-family: Georgia, serif;
	line-height: 1;
	margin-top: 0.1rem;
	color: var(--hhd-muted);
}

.hhd-disclosure-short a {
	color: var(--hhd-accent);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Ranking cards — roomy magazine grid
   -------------------------------------------------------------------------- */
.hhd-ranking-grid {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 3rem;
}

@media (min-width: 700px) {
	.hhd-ranking-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.75rem;
	}
}


@media (min-width: 1100px) {
	.hhd-ranking-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.hhd-ranking-card {
	background: var(--hhd-surface);
	border: 1px solid var(--hhd-border);
	border-radius: var(--hhd-radius);
	padding: 1.75rem 1.5rem 1.5rem;
	box-shadow: var(--hhd-shadow);
	display: flex;
	flex-direction: column;
	min-height: 100%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hhd-ranking-card:hover {
	border-color: #9A341259;
	box-shadow: 0 2px 4px rgba(18, 26, 23, 0.04), 0 12px 32px rgba(18, 26, 23, 0.08);
}

.hhd-ranking-card--featured {
	border-color: #1E3A5F73;
	background: linear-gradient(180deg, #F5E6DC 0%, var(--hhd-surface) 28%);
}

.hhd-ranking-card__rank {
	font-family: var(--hhd-font-display);
	font-weight: 700;
	font-size: 2.75rem;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--hhd-accent-2);
	margin: 0 0 1rem;
}

.hhd-ranking-card__rank span {
	display: none; /* magazine: big numeral only */
}

.hhd-ranking-card h3 {
	font-family: var(--hhd-font-display);
	font-weight: 600;
	font-size: 1.25rem;
	margin: 0 0 0.65rem;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.hhd-ranking-card__score {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--hhd-text);
	margin: 0 0 0.85rem;
}

.hhd-ranking-card__stars {
	color: var(--hhd-accent-2);
	letter-spacing: 0.05em;
	font-size: 0.75rem;
}

.hhd-ranking-card p {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--hhd-muted);
	margin: 0 0 1.25rem;
	flex: 1;
}

.hhd-ranking-card__action {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--hhd-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hhd-accent-2);
	text-decoration: none;
	margin-top: auto;
}

.hhd-ranking-card__action:hover {
	color: var(--hhd-accent);
}

.hhd-ranking-card__action::after {
	content: "→";
	font-weight: 400;
	letter-spacing: 0;
}

.hhd-ranking-card__action-note {
	display: block;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--hhd-muted);
	margin-top: 0.35rem;
}

.hhd-ranking-card__footer {
	margin-top: auto;
}

/* Vertical stack variant (articles / listicles) */
.hhd-ranking-stack {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0 0 2.5rem;
}

.hhd-ranking-stack .hhd-ranking-card {
	flex-direction: row;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 1.5rem 1.75rem;
}

.hhd-ranking-stack .hhd-ranking-card__rank {
	font-size: 2.25rem;
	margin: 0;
	min-width: 3.5rem;
}

.hhd-ranking-stack .hhd-ranking-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

@media (max-width: 599px) {
	.hhd-ranking-stack .hhd-ranking-card {
		flex-direction: column;
		gap: 0.5rem;
	}
}

/* --------------------------------------------------------------------------
   Article / post list — airy magazine
   -------------------------------------------------------------------------- */
.hhd-mag-list .wp-block-post {
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--hhd-border);
}

.hhd-mag-list .wp-block-post-title {
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	margin: 0.35rem 0 0.5rem;
}

.hhd-mag-list .wp-block-post-title a {
	color: var(--hhd-text);
	text-decoration: none;
}

.hhd-mag-list .wp-block-post-title a:hover {
	color: var(--hhd-accent);
}

.hhd-mag-list .wp-block-post-date {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hhd-muted);
}

.hhd-mag-list .wp-block-post-excerpt {
	color: var(--hhd-muted);
	font-size: 1rem;
}

.hhd-article-hed {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--hhd-border);
}

.hhd-article-hed .wp-block-post-title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: 1rem;
}

.hhd-byline-note {
	font-size: 0.8125rem;
	color: var(--hhd-muted);
	font-style: italic;
	margin: 0.5rem 0 0;
}

/* --------------------------------------------------------------------------
   Footer — magazine colophon + 03 regions
   -------------------------------------------------------------------------- */
.hhd-footer {
	background: var(--hhd-surface);
	border-top: 2px solid var(--hhd-accent);
	margin-top: 2rem;
}

.hhd-footer__inner {
	max-width: var(--hhd-wide);
	margin-inline: auto;
	padding: 3rem 1.5rem 2.5rem;
}

@media (min-width: 782px) {
	.hhd-footer__inner {
		padding-inline: 2.5rem;
	}
}

.hhd-footer__colophon {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--hhd-border);
}

.hhd-footer__mission {
	font-size: 0.9375rem;
	color: var(--hhd-muted);
	line-height: 1.55;
	margin: 0.5rem 0 0;
	max-width: 36rem;
}

.hhd-footer__block {
	margin-bottom: 1.75rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--hhd-border);
}

.hhd-footer__block h2 {
	font-family: var(--hhd-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hhd-accent);
	margin: 0 0 0.75rem;
}

.hhd-footer__block p {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--hhd-muted);
	margin: 0 0 0.65rem;
}

.hhd-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 1.5rem 0 1rem;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 500;
}

.hhd-footer__nav a {
	color: var(--hhd-text);
	text-decoration: none;
}

.hhd-footer__nav a:hover {
	color: var(--hhd-accent);
}

.hhd-footer__copy {
	font-size: 0.75rem;
	color: var(--hhd-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Utilities / 404 / search
   -------------------------------------------------------------------------- */
.hhd-empty {
	text-align: center;
	padding: 4rem 1rem;
}

.hhd-empty h1 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

.wp-block-search .wp-block-search__input {
	border: 1px solid var(--hhd-border);
	border-radius: 6px;
	padding: 0.65rem 0.85rem;
	background: var(--hhd-surface);
}

.wp-block-search .wp-block-search__button {
	background: var(--hhd-accent);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.65rem 1.1rem;
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.wp-block-query-pagination {
	margin-top: 2rem;
	font-size: 0.875rem;
}

/* Align WP groups using our classes */
.wp-block-group.hhd-header,
.wp-block-group.hhd-footer {
	max-width: none;
}

.wp-block-group.hhd-shell {
	max-width: var(--hhd-wide);
}

/* Inline SVG lockups from parts */
.hhd-wordmark svg.hhd-lockup-img,
.hhd-footer__colophon svg.hhd-lockup-img {
	height: 2.5rem;
	width: auto;
	max-width: min(280px, 70vw);
	display: block;
}

.hhd-footer__colophon svg.hhd-lockup-img--footer {
	height: 2rem;
	margin-bottom: 0.5rem;
}

.hhd-footer__colophon svg.hhd-bug-img {
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	display: block;
}

.hhd-still-life__svg {
	display: block;
}

/* v2 masthead nameplate (Brand Director money file) */
.hhd-wordmark--masthead {
	display: inline-flex;
	align-items: center;
	max-width: min(520px, 88vw);
}

.hhd-masthead-img {
	display: block;
	height: auto;
	width: 100%;
	max-width: min(520px, 88vw);
	max-height: 4.25rem;
	object-fit: contain;
	object-position: left center;
}

@media (min-width: 782px) {
	.hhd-masthead-img {
		max-height: 5rem;
		max-width: min(560px, 55vw);
	}
}

.hhd-header__inner {
	align-items: center;
}

.hhd-lockup-img,
.hhd-lockup-img--footer {
	display: block;
	height: 2.35rem;
	width: auto;
	max-width: min(280px, 70vw);
}

.hhd-lockup-img--footer {
	height: 2rem;
	margin-bottom: 0.5rem;
}

.hhd-bug-img {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
}


body { background-image:radial-gradient(rgba(28,25,23,.03) 1px,transparent 1px); background-size:18px 18px; }
.hhd-header { border-bottom:none; box-shadow:0 1px 0 #D6D3D1,0 8px 24px rgba(28,25,23,.04); }
.hhd-memo-stamp { display:inline-flex; gap:.75rem; font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#1E3A5F; margin-bottom:.75rem; }
@media (min-width:800px) {
  .hhd-ranking-grid { grid-template-columns:1.2fr .8fr; }
  .hhd-ranking-card--featured { grid-row:span 2; }
}
.hhd-ranking-card { border-top:3px solid #9A3412; border-radius:7px; }
.hhd-ranking-card--featured { background:linear-gradient(180deg,#F5E6DC 0%,#FFFDF8 30%); }
.hhd-methodology { border-left:4px solid #9A3412; background:#F5E6DC; border-radius:7px; }
.hhd-hero { border-bottom-style:dashed; }