/* =========================================================================
   HipHopNCulture — design system
   Tokens come from the Customizer (inc/customizer.php) as CSS custom
   properties on :root. Everything below consumes them, so a reskin is a
   Customizer change, not a code change.
   ========================================================================= */

:root {
	/* Fallbacks — overridden by hnc_customizer_css(). */
	--hnc-ink: #0a0a0a;
	--hnc-base: #ffffff;
	--hnc-surface: #f4f4f4;
	--hnc-line: #e4e4e4;
	--hnc-muted: #6b6b6b;
	--hnc-accent: #ff4500;
	--hnc-featured: #f0b429;
	--hnc-header-bg: #0a0a0a;
	--hnc-header-fg: #ffffff;
	--hnc-display: "Anton", "Archivo Black", "Oswald", Impact, system-ui, sans-serif;
	--hnc-radius: 4px;
	--hnc-container: 1220px;
	--hnc-rail: 320px;

	--hnc-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--hnc-facebook: #1877f2;
	--hnc-gutter: 32px;
	--hnc-pad: clamp(16px, 4vw, 28px);
}

/* ---------- reset-ish ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--hnc-base);
	color: var(--hnc-ink);
	font-family: var(--hnc-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;

	/* Sticky footer: the page is at least a screen tall and stacks vertically, so
	   .hnc-foot can be pushed to the bottom with margin-top:auto on short pages.
	   svh (small viewport height) avoids the jump mobile browsers cause with vh
	   when their address bar collapses; vh is the fallback for older engines. */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

img,
svg,
video,
iframe { max-width: 100%; }

img { height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover,
a:focus-visible { color: var(--hnc-accent); }

:focus-visible {
	outline: 2px solid var(--hnc-accent);
	outline-offset: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--hnc-display);
	text-transform: uppercase;
	line-height: 1.08;
	letter-spacing: -0.005em;
	margin: 0 0 .5em;
	font-weight: 400;
}

p { margin: 0 0 1em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}

.hnc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--hnc-ink);
	color: #fff;
	padding: 12px 18px;
}
.hnc-skip:focus { left: 0; }

.hnc-icon { flex: none; vertical-align: middle; }

/* =========================================================================
   HEADER
   ========================================================================= */

.hnc-header {
	background: var(--hnc-header-bg);
	color: var(--hnc-header-fg);
	position: relative;
	z-index: 40;

	/* Flex items shrink by default; without this a tall page squashes the bar. */
	flex: none;
	width: 100%;
}

.hnc-header__inner {
	max-width: var(--hnc-container);
	margin-inline: auto;
	padding: 0 var(--hnc-pad);
	min-height: 46px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.hnc-brand__word,
.hnc-brand .custom-logo-link {
	font-family: var(--hnc-display);
	font-size: clamp(19px, 2.4vw, 24px);
	letter-spacing: -0.01em;
	color: var(--hnc-header-fg);
	display: inline-flex;
	align-items: center;
	padding: 10px 0;
}
.hnc-brand__word:hover { color: var(--hnc-header-fg); opacity: .82; }
.hnc-brand img { max-height: 34px; width: auto; }

.hnc-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 22px;
}

.hnc-nav__list {
	display: flex;
	align-items: center;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hnc-nav__list a {
	color: var(--hnc-header-fg);
	font-size: 14px;
	line-height: 46px;
	display: block;
	opacity: .92;
}
.hnc-nav__list a:hover,
.hnc-nav__list .current-menu-item > a { color: var(--hnc-header-fg); opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

/* Second level */
.hnc-nav__list .sub-menu {
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	min-width: 190px;
	background: var(--hnc-header-bg);
	border: 1px solid rgba(255,255,255,.14);
	display: none;
}
.hnc-nav__list li { position: relative; }
.hnc-nav__list li:hover > .sub-menu,
.hnc-nav__list li:focus-within > .sub-menu { display: block; }
.hnc-nav__list .sub-menu a { line-height: 1.4; padding: 8px 14px; font-size: 13.5px; }

.hnc-nav__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hnc-nav__login,
.hnc-nav__account { color: var(--hnc-header-fg); font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.hnc-nav__avatar { border-radius: 50%; }

.hnc-nav__join {
	background: var(--hnc-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: var(--hnc-radius);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.hnc-nav__join:hover { color: #fff; filter: brightness(1.1); }

.hnc-nav__cart {
	color: var(--hnc-header-fg);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	margin-inline: 10px;
}
.hnc-nav__cartcount {
	background: var(--hnc-accent);
	color: #fff;
	border-radius: 999px;
	min-width: 18px;
	height: 18px;
	display: inline-grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
	padding: 0 5px;
}
.hnc-nav__cartcount.is-empty { display: none; }

.hnc-navtoggle {
	display: none;
	margin-left: auto;
	background: none;
	border: 0;
	color: var(--hnc-header-fg);
	padding: 8px;
	cursor: pointer;
}

/* =========================================================================
   SHELL / LAYOUT
   ========================================================================= */

.hnc-shell {
	max-width: var(--hnc-container);
	margin-inline: auto;
	padding: 30px var(--hnc-pad) 56px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hnc-gutter);
	align-items: start;

	/* Take the leftover height so the footer lands on the bottom edge. */
	flex: 1 0 auto;
	width: 100%;
}

.has-shop-rail .hnc-shell {
	grid-template-columns: minmax(0, 1fr) var(--hnc-rail);
}

.hnc-main { min-width: 0; }
.hnc-main--wide { grid-column: 1 / -1; }

.hnc-section + .hnc-section { margin-top: 40px; }

.hnc-sectionhead {
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid var(--hnc-line);
	padding-bottom: 10px;
	margin-bottom: 20px;
}
.hnc-sectionhead__title {
	margin: 0;
	font-size: clamp(20px, 2.6vw, 27px);
}
.hnc-sectionhead > a { margin-left: auto; display: inline-flex; }

.hnc-intro { margin-bottom: 34px; }
.hnc-empty { color: var(--hnc-muted); padding: 24px 0; }
.hnc-archdesc { color: var(--hnc-muted); margin-top: -8px; max-width: 62ch; }

/* ---------- section (sub-category) nav ---------- */

.hnc-catnav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--hnc-line);
}

.hnc-catnav__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid var(--hnc-line);
	font-size: 13px;
	font-weight: 700;
	color: var(--hnc-muted);
	line-height: 1.3;
}
.hnc-catnav__item:hover {
	color: var(--hnc-ink);
	border-color: var(--hnc-muted);
}
.hnc-catnav__item.is-active {
	background: var(--hnc-ink);
	border-color: var(--hnc-ink);
	color: var(--hnc-base);
}

.hnc-catnav__n {
	font-size: 11px;
	font-weight: 700;
	opacity: .65;
	font-variant-numeric: tabular-nums;
}

@media (hover: none) and (pointer: coarse) {
	.hnc-catnav__item { min-height: 36px; }
}

/* =========================================================================
   CARDS — "The Latest"
   ========================================================================= */

.hnc-cards {
	display: flex;
	flex-direction: column;
}

.hnc-card {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--hnc-line);
}
.hnc-card:first-child { padding-top: 0; }

.hnc-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--hnc-radius);
	background: var(--hnc-surface);
}
.hnc-card__media img { width: 100%; height: 100%; object-fit: cover; }

.hnc-thumb__ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-family: var(--hnc-display);
	font-size: 34px;
	color: var(--hnc-muted);
	background: var(--hnc-surface);
}

.hnc-card__body { min-width: 0; }

.hnc-card__title {
	font-size: clamp(16px, 1.9vw, 19px);
	margin: 0 0 6px;
}

.hnc-card__dek {
	color: var(--hnc-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hnc-card__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

/* ---------- meta row ---------- */

.hnc-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12.5px;
	color: var(--hnc-muted);
}
.hnc-meta__spacer { flex: 1 1 auto; }
.hnc-meta__via { font-style: italic; }
.hnc-meta__stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.hnc-meta__reddit { display: inline-flex; }

/* =========================================================================
   VIDEO GRID
   ========================================================================= */

.hnc-vgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 18px;
}

/* =========================================================================
   NEW MUSIC STRIP
   Sits directly in .hnc-shell (not inside .hnc-main) so it spans the article
   column and the shop rail. It inherits the shell's max-width, so it runs the
   full content width without bleeding to the viewport edge.
   ========================================================================= */

.hnc-videostrip {
	grid-column: 1 / -1;
	margin-bottom: 6px;
}

/* auto-fit, not auto-fill: with fewer videos than slots, auto-fill would keep
   the empty tracks and leave a third of the row blank. auto-fit collapses them
   so whatever is published fills the strip, and it still packs down to eight
   132px cards once there are that many. */
.hnc-videostrip .hnc-vgrid {
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 14px;
}

/* Cards are ~130px wide here, so the type label carries the context and the
   vote/comment row is dropped — it does not fit legibly at this size. */
.hnc-videostrip .hnc-vcard__title {
	font-size: 12.5px;
	line-height: 1.25;
	margin: 8px 0 3px;
}
.hnc-videostrip .hnc-vcard__type { font-size: 10.5px; margin: 0; }
.hnc-videostrip .hnc-vcard__meta { display: none; }

/* ---------- paid placement ----------
   Gold rather than the brand accent: the accent already means "interactive"
   everywhere else (buttons, upvotes), so reusing it here would read as a
   control rather than as a promoted slot. */

.hnc-vcard.is-featured {
	position: relative;
	outline: 2px solid var(--hnc-featured);
	outline-offset: 4px;
	border-radius: var(--hnc-radius);
}

.hnc-vcard__badge {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	background: var(--hnc-featured);
	color: #1c1400;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 3px;
	line-height: 1;
	pointer-events: none;
}

/* The outline sits outside the box, so the strip needs a little breathing room
   or the first and last featured cards clip against the container edge. */
.hnc-videostrip .hnc-vgrid { padding: 5px; margin: -5px; }

/* Titles clamp to two lines so cards in a row keep the same height. */
.hnc-vcard__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hnc-vcard__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--hnc-radius);
	background: var(--hnc-surface);
}
.hnc-vcard__media img { width: 100%; height: 100%; object-fit: cover; }

.hnc-vcard__play,
.hnc-mini__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.hnc-vcard:hover .hnc-vcard__play { transform: scale(1.06); transition: transform .18s ease; }

.hnc-vcard__title {
	font-size: 13.5px;
	line-height: 1.3;
	margin: 10px 0 6px;
	text-transform: none;
	font-family: var(--hnc-body);
	font-weight: 700;
}

.hnc-vcard__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: var(--hnc-muted);
}

/* =========================================================================
   SINGLE / VIDEO BREAKDOWN
   ========================================================================= */

.hnc-single__title {
	font-size: clamp(24px, 3.4vw, 34px);
	margin-bottom: 22px;
}
.hnc-single__kicker { display: inline; }

/* =========================================================================
   ARTICLE LAYOUT
   Full-width hero, body held to a readable measure, related content in a row
   underneath. The two-column grid below is only for posts with a video.
   ========================================================================= */

.hnc-single--article .hnc-single__head { margin-bottom: 20px; }
/* Wide enough that the cap only bites on a rail-less layout. At 20ch a long
   headline wrapped to five lines inside an 812px column and left a third of the
   column empty beside it. */
.hnc-single--article .hnc-single__title {
	font-size: clamp(28px, 4.4vw, 46px);
	margin-bottom: 10px;
	max-width: 34ch;
}

.hnc-single__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--hnc-muted);
	margin: 0;
}
.hnc-single__byline a { font-weight: 700; }
.hnc-single__cats a { color: var(--hnc-accent); }

.hnc-single--article .hnc-single__hero {
	aspect-ratio: 16 / 9;
	margin: 0 0 30px;
	max-width: 100%;
}

/* ~68 characters is the readable range; the rail already narrows the column,
   so this mostly matters on wide screens with the rail switched off. */
.hnc-single__body { max-width: 68ch; }
.hnc-single__body > * { max-width: 100%; }

.hnc-single--article .hnc-single__actions {
	max-width: 68ch;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--hnc-line);
}
.hnc-single--article .hnc-single__votes {
	margin: 12px 0 0;
	padding-bottom: 0;
	border-bottom: 0;
}
.hnc-single--article .hnc-discussion { max-width: 68ch; margin-top: 38px; }
.hnc-single .hnc-related { margin-top: 46px; }

/* Related as a row of cards under an article. */
.hnc-related--grid .hnc-minis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 22px 18px;
}
/* grid-template-rows is load-bearing. .hnc-minis stretches every card to the
   tallest one, and two auto rows would split that slack between them — which
   makes the media row taller than a 4:3 box, and aspect-ratio then derives a
   *width* from that height. The thumbnail spills out of its own card and the
   row spills out of the content column. Pinning the slack on the body row keeps
   the media sized by its width, so the thumbnails also come out uniform. */
.hnc-related--grid .hnc-mini {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	gap: 10px;
	padding: 0;
	border-bottom: 0;
	align-items: stretch;
}
.hnc-related--grid .hnc-mini__title { font-size: 15px; }

/* The shop rail already removes 352px from the reading area. Splitting what
   remains once more makes the video and article columns too narrow, even on a
   large viewport — so stacked is the normal case, not the fallback, and the
   two-column grid is the exception granted only when the rail is off and there
   is real width to spend. Stacked, a breakdown is an article with a video hero,
   so it borrows the article's measure. */
.hnc-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}

.hnc-single__right { max-width: 68ch; }

@media (min-width: 1025px) {
	body:not(.has-shop-rail) .hnc-single__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 28px;
	}
	body:not(.has-shop-rail) .hnc-single__right { max-width: none; }
	body:not(.has-shop-rail) .hnc-single__dek { font-size: 15px; }
}

.hnc-single__left,
.hnc-single__right,
.hnc-single__dek {
	min-width: 0;
}

.hnc-single__dek iframe,
.hnc-single__dek video,
.hnc-single__dek img {
	max-width: 100%;
	height: auto;
}

.hnc-video__frame,
.hnc-single__hero {
	position: relative;
	margin: 0;
	border-radius: var(--hnc-radius);
	overflow: hidden;
	background: #000;
	aspect-ratio: 16 / 9;
}
.hnc-video__frame iframe,
.hnc-video__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.hnc-single__hero img { width: 100%; height: 100%; object-fit: cover; }

.hnc-single__votes {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 16px 0;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--hnc-line);
}

.hnc-related { margin-top: 30px; }

.hnc-section--reddit { margin-top: 38px; }
.hnc-sectionhead__more {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.hnc-minis { display: flex; flex-direction: column; }

.hnc-mini {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--hnc-line);
	align-items: center;
	min-width: 0;
}
.hnc-mini__media {
	position: relative;
	display: block;
	min-width: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--hnc-radius);
	background: var(--hnc-surface);
}
.hnc-mini__media img { width: 100%; height: 100%; object-fit: cover; }
.hnc-mini__title {
	font-family: var(--hnc-body);
	text-transform: none;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
}
.hnc-mini__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: var(--hnc-muted);
}
.hnc-mini__reddit { margin-left: auto; display: inline-flex; }

/* =========================================================================
   SHARE BUTTONS
   ========================================================================= */

.hnc-share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 14px;
}

.hnc-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 13px;
	border-radius: var(--hnc-radius);
	border: 1px solid var(--hnc-line);
	background: var(--hnc-base);
	color: var(--hnc-ink);
	line-height: 1.2;
	cursor: pointer;
}
.hnc-share__btn:hover { color: var(--hnc-ink); border-color: var(--hnc-muted); }

.hnc-share__btn--facebook {
	background: var(--hnc-facebook);
	border-color: var(--hnc-facebook);
	color: #fff;
}
.hnc-share__btn--facebook:hover { color: #fff; filter: brightness(1.08); }

.hnc-share__btn--x {
	background: #000;
	border-color: #000;
	color: #fff;
}
.hnc-share__btn--x:hover { color: #fff; filter: brightness(1.4); }

/* Compact variant inside list cards. */
.hnc-card .hnc-share { margin: 0; }
.hnc-card .hnc-share__btn { padding: 5px 10px; font-size: 12px; }
.hnc-card .hnc-share__btn--facebook,
.hnc-card .hnc-share__btn--x { display: none; }

/* =========================================================================
   VOTES
   ========================================================================= */

.hnc-vote {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	color: var(--hnc-muted);
	user-select: none;
}

.hnc-vote__btn {
	background: none;
	border: 0;
	padding: 3px;
	line-height: 0;
	cursor: pointer;
	color: var(--hnc-muted);
	border-radius: 3px;
}
.hnc-vote__btn:hover { background: var(--hnc-surface); }
.hnc-vote__btn[disabled] { cursor: not-allowed; opacity: .55; }
.hnc-vote__btn.is-active.hnc-vote__btn--up { color: var(--hnc-accent); }
.hnc-vote__btn.is-active.hnc-vote__btn--down { color: #7193ff; }

.hnc-vote__score { min-width: 1.4em; text-align: center; font-weight: 700; color: var(--hnc-ink); }
.hnc-vote.is-busy { opacity: .5; pointer-events: none; }

/* =========================================================================
   BUTTONS / CTA
   ========================================================================= */

.hnc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 11px 18px;
	border-radius: var(--hnc-radius);
	border: 1.5px solid var(--hnc-ink);
	background: var(--hnc-ink);
	color: var(--hnc-base);
	cursor: pointer;
	line-height: 1.2;
	text-align: center;
}
.hnc-btn:hover { color: var(--hnc-base); filter: brightness(1.25); }

.hnc-btn--outline {
	background: transparent;
	color: var(--hnc-ink);
}
.hnc-btn--outline:hover { background: var(--hnc-ink); color: var(--hnc-base); filter: none; }

.hnc-btn--block { display: flex; width: 100%; }

.hnc-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hnc-accent);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: 13.5px;
	padding: 12px 20px;
	border-radius: var(--hnc-radius);
}
.hnc-cta:hover { color: #fff; filter: brightness(1.1); }

.hnc-joinblock {
	margin-top: 44px;
	padding: 28px var(--hnc-pad);
	background: var(--hnc-ink);
	color: var(--hnc-base);
	border-radius: var(--hnc-radius);
	text-align: center;
}
.hnc-joinblock__title { font-size: clamp(22px, 3vw, 30px); margin-bottom: 8px; }
.hnc-joinblock__copy { color: rgba(255,255,255,.78); max-width: 46ch; margin: 0 auto 18px; font-size: 15px; }

/* =========================================================================
   SHOP RAIL
   ========================================================================= */

.hnc-rail { min-width: 0; }
.hnc-rail.is-sticky { position: sticky; top: 18px; }

.hnc-rail__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--hnc-line);
	padding-bottom: 10px;
	margin: 0 0 18px;
}

.hnc-rail__title {
	font-size: 21px;
	margin: 0;
}

.hnc-crypto-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	color: var(--hnc-muted);
	white-space: nowrap;
}
.hnc-crypto-badge__bitcoin {
	display: inline-grid;
	place-items: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #f7931a;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}
.hnc-crypto-badge__ethereum { width: 13px; height: 19px; fill: #343434; }
.hnc-crypto-badge__solana { width: 21px; height: 17px; fill: #7d4cff; }
.hnc-crypto-badge__label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.hnc-products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 14px;
}

.hnc-product { min-width: 0; }

.hnc-product__media {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	background: var(--hnc-surface);
	border-radius: var(--hnc-radius);
	overflow: hidden;
	margin-bottom: 8px;
	padding: 8px;
}
.hnc-product__media img { width: 100%; height: 100%; object-fit: contain; }

.hnc-product__phtext {
	font-family: var(--hnc-display);
	font-size: 15px;
	text-align: center;
	color: var(--hnc-ink);
	line-height: 1.1;
	padding: 6px;
}

.hnc-product__title {
	font-family: var(--hnc-body);
	text-transform: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 3px;
}
.hnc-product__price { font-size: 12.5px; color: var(--hnc-muted); margin-bottom: 8px; }
.hnc-product__price del { opacity: .6; margin-right: 4px; }

.hnc-product__add {
	font-size: 11px;
	padding: 6px 10px;
	width: 100%;
}
.hnc-product.is-placeholder .hnc-product__add { opacity: .55; pointer-events: none; }

.hnc-rail__all { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 700; }
.hnc-rail__notice {
	grid-column: 1 / -1;
	font-size: 12px;
	color: var(--hnc-muted);
	background: var(--hnc-surface);
	padding: 10px 12px;
	border-radius: var(--hnc-radius);
	margin: 4px 0 0;
}

.hnc-rail__widget { margin-top: 30px; }
.hnc-rail__widget ul { list-style: none; margin: 0; padding: 0; }
.hnc-rail__widget li { padding: 7px 0; border-bottom: 1px solid var(--hnc-line); font-size: 14px; }

/* =========================================================================
   COMMENTS
   ========================================================================= */

.hnc-comments { margin-top: 22px; }
.hnc-comments__count,
.hnc-comments__replytitle { font-size: 16px; margin-bottom: 14px; }

.hnc-comments__list,
.hnc-comments__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hnc-comments__list .children {
	margin-left: 14px;
	padding-left: 12px;
	border-left: 1px solid var(--hnc-line);
}

.hnc-comment { padding: 10px 0; }

.hnc-comment__head {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--hnc-muted);
	margin-bottom: 5px;
}
.hnc-comment__avatar { border-radius: 50%; }
.hnc-comment__author { font-weight: 700; color: var(--hnc-ink); }
.hnc-comment__dot { opacity: .6; }

.hnc-comment__body { font-size: 14px; }
.hnc-comment__body p:last-child { margin-bottom: 0; }
.hnc-comment__pending { color: var(--hnc-accent); }

.hnc-comment__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 6px;
	font-size: 12.5px;
}
.hnc-comment__reply a { color: var(--hnc-muted); font-weight: 600; }

.hnc-comments__mustlogin {
	background: var(--hnc-surface);
	padding: 14px 16px;
	border-radius: var(--hnc-radius);
	font-size: 14px;
}
.hnc-comments__mustlogin a { font-weight: 700; text-decoration: underline; }

.hnc-commentform textarea,
.hnc-commentform input[type="text"],
.hnc-commentform input[type="email"],
.hnc-commentform input[type="url"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--hnc-line);
	border-radius: var(--hnc-radius);
	font: inherit;
	font-size: 14px;
	background: var(--hnc-base);
	color: var(--hnc-ink);
}
.hnc-commentform .form-submit { margin-bottom: 0; }

/* =========================================================================
   SEARCH / PAGINATION / 404
   ========================================================================= */

.hnc-search { display: flex; gap: 8px; max-width: 420px; }
.hnc-search__input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid var(--hnc-line);
	border-radius: var(--hnc-radius);
	font: inherit;
	font-size: 14px;
	background: var(--hnc-base);
	color: var(--hnc-ink);
}
.hnc-search__submit {
	background: var(--hnc-ink);
	color: var(--hnc-base);
	border: 0;
	border-radius: var(--hnc-radius);
	padding: 0 14px;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.hnc-pagination { margin-top: 28px; }
.hnc-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.hnc-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--hnc-line);
	border-radius: var(--hnc-radius);
	font-size: 13.5px;
	font-weight: 600;
}
.hnc-pagination .page-numbers.current {
	background: var(--hnc-ink);
	color: var(--hnc-base);
	border-color: var(--hnc-ink);
}

.hnc-404 { text-align: center; padding: 60px 0; }
.hnc-404__code { font-size: clamp(60px, 14vw, 130px); line-height: 1; margin-bottom: 4px; }
.hnc-404__msg { color: var(--hnc-muted); margin-bottom: 22px; }
.hnc-404 .hnc-search { margin: 0 auto 22px; }

/* =========================================================================
   PAGES / CONTENT
   ========================================================================= */

.hnc-page__title { font-size: clamp(26px, 4vw, 38px); }
.hnc-page__hero { margin: 0 0 24px; border-radius: var(--hnc-radius); overflow: hidden; }

.entry-content > * { margin-block: 0 1em; }

/* Headings belong to the text that follows them, so the space goes above.
   The blanket rule above sets margin-block:0 1em, which on a 34px heading is
   34px of air underneath and none on top — exactly the wrong way round. */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-block: 1.5em 0.35em;
	line-height: 1.1;
}
.entry-content h3 { margin-block-start: 1.3em; }
.entry-content > :first-child { margin-block-start: 0; }

/* Prose links only. WooCommerce renders its cart, checkout and product-grid
   blocks inside .entry-content — including product tiles as <li><a class="...">
   — so any rule matching `li > a` or `p > a` paints Woo components accent-orange
   with an underline. Editor-written prose links carry no class, so keying on
   that is what reliably separates the two. */
.entry-content a:not([class]) {
	color: var(--hnc-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.entry-content a.hnc-btn,
.entry-content a.hnc-cta,
.entry-content a.button,
.entry-content a.wp-block-button__link,
.entry-content .wc-block-components-button,
.entry-content .woocommerce-loop-product__link {
	text-decoration: none;
}
.entry-content img { border-radius: var(--hnc-radius); }
.entry-content blockquote {
	margin: 1.4em 0;
	padding-left: 18px;
	border-left: 3px solid var(--hnc-accent);
	font-size: 1.05em;
}
.entry-content ul,
.entry-content ol { padding-left: 1.25em; }
.entry-content code {
	background: var(--hnc-surface);
	padding: 2px 5px;
	border-radius: 3px;
	font-size: .92em;
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.hnc-foot {
	border-top: 1px solid var(--hnc-line);
	padding: 26px var(--hnc-pad);

	/* Belt and braces: works even on views that render their own wrapper instead
	   of .hnc-shell, since any leftover space collapses into this margin. */
	margin-top: auto;
	flex: none;
	width: 100%;
}
.hnc-foot__widgets {
	max-width: var(--hnc-container);
	margin: 0 auto 22px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
}
.hnc-foot__title { font-size: 15px; }
.hnc-foot__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin: 0 0 12px;
	padding: 0;
	font-size: 13.5px;
}
.hnc-foot__copy {
	text-align: center;
	font-size: 12.5px;
	color: var(--hnc-muted);
	margin: 0;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1024px) {
	.has-shop-rail .hnc-shell { grid-template-columns: minmax(0, 1fr); }
	.hnc-rail.is-sticky { position: static; }
	.hnc-products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 860px) {
	.hnc-navtoggle { display: block; }

	.hnc-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--hnc-header-bg);
		padding: 8px var(--hnc-pad) 18px;
		border-top: 1px solid rgba(255,255,255,.14);
	}
	.hnc-nav.is-open { display: flex; }

	.hnc-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.hnc-nav__list a { line-height: 1.4; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
	.hnc-nav__list .sub-menu { position: static; display: block; border: 0; padding: 0 0 0 14px; background: none; }

	.hnc-nav__actions { margin-top: 14px; }
}

@media (max-width: 520px) {
	.hnc-card { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
	.hnc-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.hnc-videostrip .hnc-vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hnc-meta { flex-wrap: wrap; gap: 10px; }
	.hnc-meta__spacer { display: none; }
}

/* =========================================================================
   TOUCH TARGETS
   Icon-only controls are comfortable at desktop density but fall well under
   the 24px WCAG 2.5.8 floor on a phone. Coarse pointers get real hit areas;
   mouse users keep the tighter layout.
   ========================================================================= */

@media (hover: none) and (pointer: coarse) {
	.hnc-vote__btn {
		min-width: 40px;
		min-height: 40px;
		display: inline-grid;
		place-items: center;
		padding: 0;
	}
	.hnc-vote { gap: 2px; }

	.hnc-meta__reddit,
	.hnc-mini__reddit,
	.hnc-sectionhead > a {
		min-width: 44px;
		min-height: 44px;
		display: inline-grid;
		place-items: center;
		margin: -10px;          /* absorb the added box so rows don't grow */
		padding: 10px;
	}
	.hnc-mini__reddit { margin-left: auto; }

	.hnc-share__btn { min-height: 40px; }

	.hnc-product__add,
	.hnc-btn,
	.hnc-cta {
		min-height: 44px;
		padding-block: 11px;
	}
	.hnc-product__add { font-size: 12px; }

	.hnc-nav__list a { min-height: 44px; display: flex; align-items: center; }

	.hnc-search__input,
	.hnc-search__submit,
	.hnc-commentform textarea,
	.hnc-commentform input[type="text"],
	.hnc-commentform input[type="email"],
	.hnc-commentform input[type="url"] { min-height: 44px; }

	/* Card and product titles are primary navigation on a phone — give the
	   link itself a tappable line box rather than relying on the text height.
	   Padding is sized to clear the 24px WCAG 2.5.8 floor at these font sizes. */
	.hnc-card__title a,
	.hnc-vcard__title a,
	.hnc-mini__title a,
	.hnc-product__title a,
	.hnc-rail__all,
	.hnc-comments__mustlogin a,
	.hnc-meta__stat a,
	.hnc-single__byline a {
		display: inline-block;
		min-height: 24px;
		padding-block: 5px;
	}

	.hnc-comment__reply a {
		display: inline-block;
		padding: 8px 0;
	}

	/* WooCommerce's own markup — breadcrumbs, account links, password toggle. */
	.woocommerce-breadcrumb a,
	.woocommerce-LostPassword a,
	.woocommerce-privacy-policy-link,
	.woocommerce-terms-and-conditions-link {
		display: inline-block;
		min-height: 24px;
		padding-block: 5px;
	}
	.woocommerce .show-password-input,
	.woocommerce .hide-password-input {
		min-width: 44px;
		min-height: 44px;
		display: grid;
		place-items: center;
	}
}

/* iOS zooms the page when a focused input is under 16px. */
@media (max-width: 860px) {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	select,
	textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* Video type label ("Music Video", "Live Performance"…) under the card title. */
.hnc-vcard__type {
	margin: -2px 0 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hnc-muted);
}