/*!
Theme Name: Hip-Hop Hotness (Alkane Child)
Theme URI: https://www.hiphophotness.com/
Template: alkane
Author: HHH
Description: Pitchfork-inspired editorial redesign of Hip-Hop Hotness. A clean, high-contrast black-and-white magazine layout with serif headlines, a grid homepage (hero + cards), and a "Best New Music" rail. Built as a child theme of Alkane.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alkane-hhh
*/

/* ==========================================================================
   Ad slot (leaderboard) — styles consolidated from the old inline <style>
   ========================================================================== */
.hhh-ad { margin: 0 auto; text-align: center; }
.adslot_1 { width: 320px; height: 100px; }
@media (min-width: 500px) { .adslot_1 { width: 300px; height: 250px; } }
@media (min-width: 800px) { .adslot_1 { width: 728px; height: 90px; } }

/* ==========================================================================
   Masthead — Pitchfork-style white header
   ========================================================================== */
.hhh-masthead {
	position: sticky;
	top: 0;
	z-index: 200;
	background: #fff;
	border-bottom: 1px solid #111;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.hhh-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 20px;
}

.hhh-bar-left  { display: flex; align-items: center; gap: 8px; justify-self: start; }
.hhh-bar-right { display: flex; align-items: center; gap: 14px; justify-self: end; }

.hhh-logo { justify-self: center; line-height: 0; }
.hhh-logo img { height: 40px; width: auto; display: block; }

/* Icon buttons (search toggle, socials) */
.hhh-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: none;
	border: 0;
	color: #111;
	cursor: pointer;
	padding: 0;
}
.hhh-search-toggle:hover { color: var(--hhh-accent); }
.hhh-soc { line-height: 0; }
.hhh-soc img { display: block; }
.hhh-soc:hover { opacity: .65; }

/* Hamburger (mobile only) */
.hhh-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 38px;
	height: 38px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
}
.hhh-burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: #111;
}

/* Section navigation row */
.hhh-nav {
	border-top: 1px solid var(--hhh-line);
}
.hhh-nav-menu {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 28px;
	list-style: none;
	margin: 0 auto;
	padding: 12px 20px;
	max-width: 1240px;
}
.hhh-nav-menu li { margin: 0; }
.hhh-nav-menu a {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #111;
	text-decoration: none;
}
.hhh-nav-menu a:hover,
.hhh-nav-menu .current-menu-item > a { color: var(--hhh-accent); }

/* Slide-down search */
.hhh-search {
	border-top: 1px solid var(--hhh-line);
	background: #fff;
}
.hhh-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 16px 20px;
}
.hhh-search-form svg { color: #999; flex: none; }
.hhh-search-form input[type="search"] {
	flex: 1;
	border: 0;
	outline: 0;
	font-family: var(--hhh-serif);
	font-size: 22px;
	padding: 4px 0;
	background: transparent;
	color: #111;
}
.hhh-search-form button {
	border: 0;
	background: #111;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 10px 18px;
	cursor: pointer;
}
.hhh-search-form button:hover { background: var(--hhh-accent); }

/* Mobile off-canvas drawer */
.hhh-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 320px;
	max-width: 86vw;
	background: #fff;
	z-index: 400;
	transform: translateX(-100%);
	transition: transform .28s ease;
	overflow-y: auto;
	padding: 18px 22px 40px;
	-webkit-overflow-scrolling: touch;
}
.hhh-drawer-open .hhh-drawer { transform: translateX(0); }

.hhh-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.hhh-drawer-head .hhh-logo img { height: 34px; }
.hhh-drawer-close {
	background: none;
	border: 0;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	color: #111;
	padding: 0 4px;
}

.hhh-drawer-search input[type="search"] {
	width: 100%;
	border: 1px solid #111;
	padding: 11px 14px;
	font-size: 15px;
	margin-bottom: 22px;
	background: #fff;
}

.hhh-drawer-menu {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	border-top: 1px solid var(--hhh-line);
}
.hhh-drawer-menu li { border-bottom: 1px solid var(--hhh-line); }
.hhh-drawer-menu a {
	display: block;
	padding: 15px 2px;
	font-family: var(--hhh-serif);
	font-weight: 700;
	font-size: 22px;
	color: #111;
	text-decoration: none;
}
.hhh-drawer-menu a:hover { color: var(--hhh-accent); }

.hhh-drawer-soc { display: flex; gap: 22px; }
.hhh-drawer-soc img { display: block; }

.hhh-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 300;
}

@media (max-width: 820px) {
	.hhh-burger { display: flex; }
	.hhh-bar-left,
	.hhh-bar-right { display: none; }
	.hhh-nav { display: none; }
	.hhh-logo img { height: 34px; }
	.hhh-bar { padding: 12px 16px; }
}

/* ==========================================================================
   Archive — category / tag / date listing
   ========================================================================== */
.hhh-archive-head {
	text-align: center;
	max-width: 760px;
	margin: 6px auto 40px;
	padding-bottom: 26px;
	border-bottom: 2px solid var(--hhh-ink);
}
.hhh-archive-head .hhh-kicker { margin-bottom: 12px; }
.hhh-archive-title {
	font-family: var(--hhh-serif);
	font-weight: 800;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0;
	text-transform: capitalize;
}
.hhh-archive-desc {
	margin: 14px auto 0;
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.55;
	color: #444;
}

/* Three-up grid feels right for a section page */
.hhh-archive .hhh-grid { grid-template-columns: repeat(3, 1fr); }

.hhh-archive-empty {
	text-align: center;
	font-family: var(--hhh-serif);
	font-size: 20px;
	color: var(--hhh-muted);
	padding: 40px 0 60px;
}

/* Inline search field (search results + 404 headers) */
.hhh-inline-search {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 520px;
	margin: 22px auto 0;
	border: 1px solid #111;
	padding: 8px 14px;
}
.hhh-inline-search svg { color: #999; flex: none; }
.hhh-inline-search input[type="search"] {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 16px;
	color: #111;
	min-width: 0;
}
.hhh-inline-search button {
	border: 0;
	background: #111;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 9px 16px;
	cursor: pointer;
	flex: none;
}
.hhh-inline-search button:hover { background: var(--hhh-accent); }

/* 404 gets an oversized headline */
.hhh-404-head .hhh-archive-title { font-size: clamp(40px, 8vw, 90px); }

/* Pagination */
.hhh-archive .pagination,
.hhh-pagination {
	margin-top: 52px;
	padding-top: 28px;
	border-top: 1px solid var(--hhh-line);
}
.hhh-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.hhh-archive .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--hhh-line);
	font-size: 14px;
	font-weight: 600;
	color: #111;
	text-decoration: none;
}
.hhh-archive .nav-links .page-numbers:hover { border-color: #111; }
.hhh-archive .nav-links .page-numbers.current {
	background: #111;
	color: #fff;
	border-color: #111;
}
.hhh-archive .nav-links .page-numbers.dots { border-color: transparent; }
.hhh-archive .nav-links .prev,
.hhh-archive .nav-links .next {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
}

@media (max-width: 1000px) {
	.hhh-archive .hhh-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
	.hhh-archive .hhh-grid { grid-template-columns: repeat(2, 1fr); }
	.hhh-archive-head { margin-bottom: 30px; }
}
@media (max-width: 520px) {
	.hhh-archive .hhh-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Single post — editorial reading layout
   ========================================================================== */
/* Neutralise the parent theme's floated `.post` grid rule (applies at
   min-width:1330px) so the article is a single centered column, not a 47%
   float with the related grid riding up beside it. */
.single .hhh-single,
.hhh-single.post {
	width: auto;
	float: none;
	clear: both;
	margin-left: auto;
	margin-right: auto;
	border: 0;
	min-height: 0;
}

.hhh-single {
	max-width: 1240px;
	margin: 0 auto;
	padding: 28px 20px 8px;
	color: var(--hhh-ink);
	font-family: var(--hhh-sans);
}

/* Related grid + comments always sit below the article */
.hhh-single + .hhh-home,
.hhh-comments-wrap { clear: both; }

/* Narrow centered measure for header, body and tags */
.hhh-single-head,
.hhh-single-content,
.hhh-single > .hhh-tags {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.hhh-single-head { text-align: center; padding: 18px 0 28px; }
.hhh-single-head .hhh-kicker { margin-bottom: 14px; }
.hhh-single-title {
	font-family: var(--hhh-serif);
	font-weight: 800;
	font-size: clamp(30px, 4.6vw, 52px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0;
}
.hhh-single-dek {
	font-family: var(--hhh-serif);
	font-style: italic;
	font-size: clamp(18px, 2.2vw, 23px);
	line-height: 1.4;
	color: #444;
	margin: 18px auto 0;
	max-width: 60ch;
}
.hhh-single-byline {
	margin-top: 22px;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hhh-muted);
}
.hhh-single-byline b { color: var(--hhh-ink); font-weight: 600; }
.hhh-single-byline .hhh-dot { margin: 0 8px; }

/* Featured image — wider than the text column */
.hhh-single-media {
	max-width: 980px;
	margin: 8px auto 36px;
}
.hhh-single-media img { width: 100%; height: auto; display: block; }
.hhh-single-media figcaption {
	font-size: 12.5px;
	color: var(--hhh-muted);
	padding-top: 10px;
	text-align: center;
}

/* Body type — editorial serif for comfortable reading */
.hhh-single-content {
	font-family: Georgia, "Times New Roman", var(--hhh-serif);
	font-size: 19px;
	line-height: 1.72;
	color: #1a1a1a;
}
.hhh-single-content p { margin: 0 0 1.35em; }
.hhh-single-content a { color: var(--hhh-accent); text-decoration: underline; text-underline-offset: 2px; }
.hhh-single-content h2,
.hhh-single-content h3 {
	font-family: var(--hhh-serif);
	font-weight: 700;
	line-height: 1.2;
	margin: 1.6em 0 .5em;
}
.hhh-single-content h2 { font-size: 28px; }
.hhh-single-content h3 { font-size: 23px; }
.hhh-single-content img { max-width: 100%; height: auto; }
.hhh-single-content blockquote {
	margin: 1.6em 0;
	padding: 6px 0 6px 24px;
	border-left: 3px solid var(--hhh-ink);
	font-family: var(--hhh-serif);
	font-style: italic;
	font-size: 24px;
	line-height: 1.35;
	color: #111;
}
.hhh-single-content ul,
.hhh-single-content ol { margin: 0 0 1.35em 1.1em; }
.hhh-single-content li { margin-bottom: .5em; }
.hhh-single-content iframe,
.hhh-single-content .twitter-tweet,
.hhh-single-content .instagram-media { margin: 1.4em auto; }

/* Tags */
.hhh-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 36px auto 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--hhh-line);
}
.hhh-tags li { margin: 0; }
.hhh-tags a {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #111;
	border: 1px solid var(--hhh-line);
	padding: 7px 12px;
	text-decoration: none;
}
.hhh-tags a:hover { border-color: #111; color: var(--hhh-accent); }

.hhh-comments-wrap { padding-top: 8px; }

@media (max-width: 600px) {
	.hhh-single-content { font-size: 18px; }
	.hhh-single-content blockquote { font-size: 21px; }
}

/* ==========================================================================
   Page — single-column layout (Contact, About, etc.)
   ========================================================================== */
/* Neutralise the parent theme's floated `.post` rule (active >1330px). */
.page .hhh-page,
.hhh-page.post {
	width: auto;
	float: none;
	clear: both;
	border: 0;
	min-height: 0;
}

.hhh-page {
	max-width: 1240px;
	margin: 0 auto;
	padding: 28px 20px 16px;
	color: var(--hhh-ink);
	font-family: var(--hhh-sans);
}

.hhh-page-head {
	text-align: center;
	max-width: 760px;
	margin: 8px auto 36px;
	padding-bottom: 24px;
	border-bottom: 2px solid var(--hhh-ink);
}
.hhh-page-title {
	font-family: var(--hhh-serif);
	font-weight: 800;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.01em;
	margin: 0;
}

.hhh-page-content {
	max-width: 680px;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.65;
}
.hhh-page-content p { margin: 0 0 1.2em; }
.hhh-page-content a { color: var(--hhh-accent); text-decoration: underline; text-underline-offset: 2px; }
.hhh-page-content h2 { font-family: var(--hhh-serif); font-weight: 700; font-size: 28px; margin: 1.4em 0 .5em; }
.hhh-page-content img { max-width: 100%; height: auto; }

/* ---- Contact Form 7 -------------------------------------------------- */
.hhh-page-content .wpcf7 { max-width: 540px; margin: 28px auto 0; }
.hhh-page-content .wpcf7-form p { margin: 0 0 16px; }

.hhh-page-content .wpcf7-form label { display: block; }

.hhh-page-content .wpcf7-form input[type="text"],
.hhh-page-content .wpcf7-form input[type="email"],
.hhh-page-content .wpcf7-form input[type="tel"],
.hhh-page-content .wpcf7-form input[type="url"],
.hhh-page-content .wpcf7-form input[type="number"],
.hhh-page-content .wpcf7-form select,
.hhh-page-content .wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #111 !important;
	border-radius: 0 !important;
	background: #fff !important;
	padding: 14px 16px;
	font-size: 16px;
	font-family: var(--hhh-sans);
	color: #111;
	line-height: 1.4;
}
.hhh-page-content .wpcf7-form input::placeholder,
.hhh-page-content .wpcf7-form textarea::placeholder { color: #999; }

.hhh-page-content .wpcf7-form input:focus,
.hhh-page-content .wpcf7-form textarea:focus,
.hhh-page-content .wpcf7-form select:focus {
	outline: 0;
	border-color: var(--hhh-accent) !important;
}

.hhh-page-content .wpcf7-form textarea {
	min-height: 170px;
	resize: vertical;
	display: block;
}

.hhh-page-content .wpcf7-form input[type="submit"] {
	display: inline-block;
	width: 100%;
	border: 0 !important;
	border-radius: 0 !important;
	background: #111 !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 15px 28px;
	margin-top: 4px;
	cursor: pointer;
	transition: background .15s ease;
}
.hhh-page-content .wpcf7-form input[type="submit"]:hover { background: var(--hhh-accent) !important; }

/* CF7 response / validation messages */
.hhh-page-content .wpcf7-response-output {
	margin: 14px 0 0 !important;
	border-width: 1px !important;
	padding: 12px 14px !important;
	font-size: 14px;
}
.hhh-page-content .wpcf7-not-valid-tip { font-size: 13px; color: var(--hhh-accent); }

/* ==========================================================================
   Footer — Pitchfork-style white
   ========================================================================== */
.hhh-footer {
	background: #fff;
	border-top: 1px solid #111;
	margin-top: 64px;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #111;
}
.hhh-footer-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}
.hhh-footer > .hhh-footer-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px;
	padding-top: 44px;
	padding-bottom: 40px;
}

.hhh-footer-brand .hhh-logo { display: inline-block; line-height: 0; }
.hhh-footer-brand .hhh-logo img { height: 46px; width: auto; }
.hhh-footer-tag {
	margin: 14px 0 16px;
	max-width: 32ch;
	font-size: 14px;
	line-height: 1.5;
	color: var(--hhh-muted);
}
.hhh-footer-soc { display: flex; gap: 18px; }
.hhh-footer-soc img { display: block; }
.hhh-footer-soc a:hover { opacity: .6; }

.hhh-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 40px;
}
.hhh-footer-menu a {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #111;
	text-decoration: none;
}
.hhh-footer-menu a:hover { color: var(--hhh-accent); }

.hhh-footer-bottom { border-top: 1px solid var(--hhh-line); }
.hhh-footer-bottom .hhh-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 18px;
	padding-bottom: 24px;
}
.hhh-copy { font-size: 12px; letter-spacing: 0.03em; color: var(--hhh-muted); }
.hhh-totop {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #111;
	text-decoration: none;
}
.hhh-totop:hover { color: var(--hhh-accent); }

@media (max-width: 600px) {
	.hhh-footer > .hhh-footer-inner { padding-top: 34px; padding-bottom: 30px; gap: 26px; }
	.hhh-footer-menu { gap: 10px 30px; }
}

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	--hhh-ink: #111111;
	--hhh-paper: #ffffff;
	--hhh-muted: #6b6b6b;
	--hhh-line: #e7e7e7;
	--hhh-accent: #d51920;          /* energetic red for kickers / links */
	--hhh-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--hhh-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--hhh-maxw: 1240px;
}

/* ==========================================================================
   Homepage shell
   ========================================================================== */
.hhh-home {
	max-width: var(--hhh-maxw);
	margin: 0 auto;
	padding: 28px 20px 64px;
	color: var(--hhh-ink);
	font-family: var(--hhh-sans);
	-webkit-font-smoothing: antialiased;
}

.hhh-home a { text-decoration: none; color: inherit; }

/* Grid/flex children must be allowed to shrink below their content's intrinsic
   size, otherwise a large image (e.g. width="2560") forces its track full-width. */
.hhh-top,
.hhh-hero,
.hhh-top-list,
.hhh-top-list .hhh-row,
.hhh-top-list .hhh-row > div,
.hhh-grid > *,
.hhh-rail > * { min-width: 0; }

.hhh-home img { max-width: 100%; height: auto; }

/* Section heading -------------------------------------------------------- */
.hhh-section { margin-top: 56px; }
.hhh-section:first-of-type { margin-top: 8px; }

.hhh-section-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	border-bottom: 2px solid var(--hhh-ink);
	padding-bottom: 8px;
	margin-bottom: 26px;
}

.hhh-section-head h2 {
	font-family: var(--hhh-sans);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
	line-height: 1;
}

.hhh-section-head .hhh-more {
	margin-left: auto;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hhh-muted);
}
.hhh-section-head .hhh-more:hover { color: var(--hhh-accent); }

/* "Best New Music" gets a filled badge ----------------------------------- */
.hhh-section--bnm .hhh-section-head { border-bottom-color: var(--hhh-accent); }
.hhh-section--bnm .hhh-section-head h2 {
	background: var(--hhh-accent);
	color: #fff;
	padding: 7px 12px;
	letter-spacing: 0.12em;
}

/* Kicker (category label above a headline) ------------------------------- */
.hhh-kicker {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hhh-accent);
	margin: 0 0 8px;
}

/* Card image frame -------------------------------------------------------- */
.hhh-thumb {
	display: block;
	position: relative;
	overflow: hidden;
	background: #f2f2f2;
	aspect-ratio: 4 / 3;
}
.hhh-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}
.hhh-card:hover .hhh-thumb img,
.hhh-hero:hover .hhh-thumb img { transform: scale(1.04); }

/* Placeholder when a post has no featured image */
.hhh-thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hhh-ink);
	color: #fff;
}
.hhh-thumb--empty span {
	font-family: var(--hhh-serif);
	font-style: italic;
	font-size: 20px;
	opacity: .85;
	padding: 0 16px;
	text-align: center;
}

/* ==========================================================================
   Hero (top of the homepage)
   ========================================================================== */
.hhh-top {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 30px;
	margin-bottom: 12px;
}

.hhh-hero .hhh-thumb { aspect-ratio: 16 / 10; }
.hhh-hero h1 {
	font-family: var(--hhh-serif);
	font-weight: 800;
	font-size: clamp(28px, 3.4vw, 46px);
	line-height: 1.08;
	margin: 16px 0 10px;
	letter-spacing: -0.01em;
}
.hhh-hero h1 a:hover { color: var(--hhh-accent); }
.hhh-hero .hhh-dek {
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	max-width: 58ch;
}
.hhh-meta {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hhh-muted);
	margin-top: 12px;
}
.hhh-meta b { color: var(--hhh-ink); font-weight: 600; }

/* Stacked secondary stories beside the hero */
.hhh-top-list { display: flex; flex-direction: column; gap: 22px; }
.hhh-top-list .hhh-row {
	display: grid;
	grid-template-columns: 116px 1fr;
	gap: 14px;
	align-items: start;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--hhh-line);
}
.hhh-top-list .hhh-row:last-child { border-bottom: 0; padding-bottom: 0; }
.hhh-top-list .hhh-thumb { aspect-ratio: 1 / 1; }
.hhh-top-list h3 {
	font-family: var(--hhh-serif);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	margin: 6px 0 0;
}
.hhh-top-list h3 a:hover { color: var(--hhh-accent); }
.hhh-top-list .hhh-kicker { margin-bottom: 4px; }

/* ==========================================================================
   Card grid (section rows)
   ========================================================================== */
.hhh-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 26px;
}
.hhh-card h3 {
	font-family: var(--hhh-serif);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.22;
	margin: 12px 0 0;
}
.hhh-card h3 a:hover { color: var(--hhh-accent); }
.hhh-card .hhh-kicker { margin-top: 12px; }
.hhh-card .hhh-meta { margin-top: 8px; }

/* Best New Music: horizontal snap rail ----------------------------------- */
.hhh-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 1fr);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 14px;
	-webkit-overflow-scrolling: touch;
}
.hhh-rail .hhh-card { scroll-snap-align: start; }
.hhh-rail .hhh-thumb { aspect-ratio: 1 / 1; }
.hhh-rail::-webkit-scrollbar { height: 6px; }
.hhh-rail::-webkit-scrollbar-thumb { background: var(--hhh-line); border-radius: 6px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
	.hhh-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
	.hhh-top { grid-template-columns: 1fr; gap: 28px; }
	.hhh-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.hhh-home { padding: 18px 14px 48px; }
	.hhh-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
	.hhh-card h3 { font-size: 16px; }
	.hhh-section { margin-top: 44px; }
}