/* Content Manager Pro — Frontend Styles
 * VISUAL IDENTITY: "Himalayan Gazette" — deep pine green + parchment +
 * burnished copper, paired with a Source Serif 4 display serif for headings
 * and IBM Plex Mono for data/labels across every HPCM component. */


.hpcm-content-body,
.hpcm-player,
.hpcm-player * {
	box-sizing: border-box;
}

/* ---------------- Post Title (H1) ----------------
   Theme prints this directly above our content box. WordPress adds the
   .single-hpcm_content body class automatically, so this only ever
   touches Content Manager Pro pages — same approach Job Manager Pro uses
   for its own job-listing titles. */
body.single-hpcm_content .entry-header,
body.single-hpcm_content .page-header {
	padding-top: 32px !important;
}
body.single-hpcm_content h1.entry-title,
body.single-hpcm_content .entry-title {
	font-family: 'Source Serif 4', Georgia, serif !important;
	font-size: clamp(26px, 4vw, 38px) !important;
	font-weight: 700 !important;
	color: var(--hpcm-pine, #123f2b) !important;
	line-height: 1.28 !important;
	margin-bottom: 14px !important;
}

/* ---------------- Article Body Box ---------------- */

.hpcm-content-body {
	font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 1.85;
	color: #1c2b22;
	overflow-wrap: break-word;
	word-break: break-word;
	background: #fff;
	border: 1.5px solid var(--hpcm-border, #e3ddc9);
	border-radius: var(--hpcm-radius, 14px);
	padding: 34px 38px;
	box-shadow: var(--hpcm-shadow, 0 4px 20px rgba(18, 63, 43, .07));
}
.hpcm-content-body > *:first-child { margin-top: 0; }
.hpcm-content-body > *:last-child { margin-bottom: 0; }

.hpcm-content-body img,
.hpcm-content-body table,
.hpcm-content-body iframe,
.hpcm-content-body video {
	max-width: 100%;
	height: auto;
}

.hpcm-content-body p {
	font-size: 16px;
	line-height: 1.85;
	margin: 0 0 20px;
}

.hpcm-content-body h1,
.hpcm-content-body h2,
.hpcm-content-body h3 {
	font-family: 'Source Serif 4', Georgia, serif;
	color: #123f2b;
}

.hpcm-content-body h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 38px 0 18px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--hpcm-border, #e3ddc9);
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1.3;
}
.hpcm-content-body h2:first-child { margin-top: 0; }
.hpcm-content-body h2::before {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 24px;
	border-radius: 3px;
	background: linear-gradient(180deg, #b9793a, #123f2b);
}

.hpcm-content-body h3 {
	font-size: 17px;
	font-weight: 700;
	color: #1f6e46;
	margin: 24px 0 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Study-content FAQ pattern: an H3 phrased as a question immediately
   followed by its answer paragraph — style that pair as a highlighted
   card, same idea as Job Manager Pro's ❓ h3 + p treatment. */
/* FAQ-style question headings only (server-side flagged when the H3 text
   actually ends in "?" — see HPCM_Frontend::mark_faq_headings()). A plain
   section heading like "The Shunga Dynasty (c. 185-73 BCE)" is NOT a
   question and stays a normal heading, unlike the old rule which put the
   ❓ + boxed-answer treatment on every single H3 regardless of content. */
.hpcm-content-body h3.hpcm-faq-q::before { content: '❓'; font-size: 15px; flex: 0 0 auto; }
.hpcm-content-body h3.hpcm-faq-q + p {
	background: #fbf6ec;
	border: 1px solid var(--hpcm-border, #e3ddc9);
	border-left: 4px solid #123f2b;
	border-radius: 10px;
	padding: 16px 18px;
	margin: 0 0 18px;
	font-size: 15px;
}

.hpcm-content-body ul,
.hpcm-content-body ol {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}
.hpcm-content-body ul li,
.hpcm-content-body ol li {
	position: relative;
	padding: 11px 0 11px 38px;
	font-size: 15.5px;
	line-height: 1.7;
	border-bottom: 1px dashed var(--hpcm-border, #e3ddc9);
}
.hpcm-content-body ul li:last-child,
.hpcm-content-body ol li:last-child { border-bottom: none; }
.hpcm-content-body ul li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 10px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(31, 110, 70, .1);
	color: #1f6e46;
	font-size: 12px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hpcm-content-body ol { counter-reset: hpcm-step; }
.hpcm-content-body ol li::before {
	counter-increment: hpcm-step;
	content: counter(hpcm-step);
	position: absolute;
	left: 0;
	top: 9px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #6b4118;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hpcm-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 24px;
	border-radius: 12px;
	/* Faint edge fade hints there's more to scroll, without needing JS. */
	background:
		linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
		linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
		linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0)),
		linear-gradient(to left, rgba(0,0,0,.08), rgba(0,0,0,0)) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
	background-attachment: local, local, scroll, scroll;
}

.hpcm-content-body table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
	font-size: 14px;
	margin: 0;
	border: 1.5px solid var(--hpcm-border, #e3ddc9);
	border-radius: 12px;
	overflow: hidden;
}
.hpcm-content-body th,
.hpcm-content-body td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--hpcm-border, #e3ddc9);
	text-align: left;
	vertical-align: top;
}
.hpcm-content-body th {
	background: #fbf6ec;
	color: #123f2b;
	font-weight: 700;
	white-space: nowrap;
}
.hpcm-content-body tr:last-child td { border-bottom: none; }
.hpcm-content-body tr:nth-child(even) td { background: rgba(18, 63, 43, .02); }

.hpcm-content-body blockquote {
	background: #fbf6ec;
	border-left: 4px solid #b9793a;
	border-radius: 10px;
	padding: 14px 18px;
	margin: 0 0 20px;
	font-style: italic;
	color: #4a4a3c;
}

.hpcm-content-body a {
	color: #1f6e46;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hpcm-content-body strong,
.hpcm-content-body b {
	background: linear-gradient(180deg, transparent 60%, #f0d9a8 60%);
	padding: 0 2px;
	font-weight: 800;
	color: #6b4118;
}

@media (max-width: 600px) {
	.hpcm-content-body { padding: 22px 18px; font-size: 15px; }
	.hpcm-content-body h2 { font-size: 19px; margin: 28px 0 14px; }
	.hpcm-content-body h3 { font-size: 15.5px; }
}

/* Sentence spans used for TTS highlight */
.hpcm-sentence {
	transition: background-color .25s ease, box-shadow .25s ease;
	border-radius: 4px;
	padding: 0 2px;
}

.hpcm-sentence.hpcm-active {
	background-color: #f3e3c2;
	box-shadow: 0 0 0 2px #d9b878 inset;
}

/* ---------------- Player Bar ---------------- */

.hpcm-player {
	width: 100%;
	font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
	background: linear-gradient(135deg, #123f2b 0%, #1f6b4a 100%);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 16px;
	padding: 18px 20px;
	margin-bottom: 24px;
	box-shadow: 0 10px 28px rgba(18, 63, 43, .35);
	color: #fff;
}

.hpcm-player-meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.hpcm-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: inherit;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .2px;
	padding: 5px 12px;
	border-radius: 999px;
	color: #fff;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .35);
	white-space: nowrap;
}

.hpcm-badge-hot { background: #9a2b1f; border-color: #9a2b1f; }
.hpcm-badge-star { background: #b9793a; border-color: #b9793a; color: #2a1900; }

.hpcm-player-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/*
 * Specificity + !important here is deliberate: many WordPress themes ship a
 * global `button { background:...; color:...; }` reset that otherwise wins
 * over a plain `.hpcm-btn` rule and leaves dark text sitting on a dark
 * background (invisible). Locking these down guarantees the label is always
 * readable regardless of the active theme.
 */
.hpcm-player .hpcm-player-controls .hpcm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	border-radius: 999px;
	padding: 11px 20px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	background-color: #ffffff !important;
	background-image: none !important;
	color: #10243e !important;
	-webkit-text-fill-color: #10243e !important;
	text-shadow: none !important;
	opacity: 1 !important;
	transition: transform .15s ease, box-shadow .15s ease;
}

.hpcm-player .hpcm-player-controls .hpcm-btn .hpcm-icon,
.hpcm-player .hpcm-player-controls .hpcm-btn .hpcm-btn-label {
	color: inherit !important;
	-webkit-text-fill-color: inherit !important;
}

.hpcm-player .hpcm-player-controls .hpcm-btn:hover,
.hpcm-player .hpcm-player-controls .hpcm-btn:focus,
.hpcm-player .hpcm-player-controls .hpcm-btn:visited,
.hpcm-player .hpcm-player-controls .hpcm-btn:active {
	color: #10243e !important;
	-webkit-text-fill-color: #10243e !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.hpcm-player .hpcm-player-controls .hpcm-btn-listen {
	background-color: #1f6b4a !important;
	background-image: linear-gradient(135deg, #1f6b4a, #123f2b) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.hpcm-player .hpcm-player-controls .hpcm-btn-listen:hover,
.hpcm-player .hpcm-player-controls .hpcm-btn-listen:focus {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.hpcm-player .hpcm-player-controls .hpcm-btn-ai {
	background-color: #b9793a !important;
	background-image: linear-gradient(135deg, #b9793a, #8f5a24) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}

.hpcm-player .hpcm-player-controls .hpcm-btn-ai:hover,
.hpcm-player .hpcm-player-controls .hpcm-btn-ai:focus {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.hpcm-player .hpcm-player-controls .hpcm-btn-pause,
.hpcm-player .hpcm-player-controls .hpcm-btn-stop {
	background-color: rgba(255, 255, 255, .18) !important;
	background-image: none !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, .45) !important;
}

.hpcm-player .hpcm-player-controls .hpcm-btn-pause:hover,
.hpcm-player .hpcm-player-controls .hpcm-btn-stop:hover,
.hpcm-player .hpcm-player-controls .hpcm-btn-pause:focus,
.hpcm-player .hpcm-player-controls .hpcm-btn-stop:focus {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	background-color: rgba(255, 255, 255, .28) !important;
}

/* ---------------- Professional English / Hindi language switch ---------------- */

.hpcm-player .hpcm-lang-toggle {
	display: inline-flex;
	align-items: center;
	padding: 3px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, .14) !important;
	border: 1px solid rgba(255, 255, 255, .35);
	gap: 2px;
}

.hpcm-player .hpcm-lang-toggle.hpcm-loading {
	opacity: .7;
	cursor: wait;
}

.hpcm-player .hpcm-lang-toggle .hpcm-lang-option {
	appearance: none;
	border: none;
	cursor: pointer;
	border-radius: 999px;
	padding: 8px 16px;
	font-family: inherit;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.2;
	background-color: transparent !important;
	background-image: none !important;
	color: rgba(255, 255, 255, .75) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, .75) !important;
	transition: background-color .18s ease, color .18s ease;
}

.hpcm-player .hpcm-lang-toggle .hpcm-lang-option.is-active {
	background-color: #ffffff !important;
	color: #10243e !important;
	-webkit-text-fill-color: #10243e !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.hpcm-player .hpcm-lang-toggle .hpcm-lang-option:hover:not(.is-active) {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.hpcm-icon { font-size: 1.2rem; }

.hpcm-player .hpcm-speed-select {
	border-radius: 999px;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, .35);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 700;
	background-color: rgba(255, 255, 255, .18) !important;
	background-image: none !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.hpcm-player .hpcm-speed-select option {
	color: #10243e !important;
	-webkit-text-fill-color: #10243e !important;
	background-color: #ffffff !important;
}

.hpcm-progress {
	margin-top: 14px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .2);
	overflow: hidden;
}

.hpcm-progress-bar {
	height: 100%;
	width: 0%;
	background: #b9793a;
	transition: width .2s linear;
}

/* ---------------- Widgets / Lists ---------------- */

.hpcm-latest-list,
.hpcm-subject-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hpcm-latest-list li,
.hpcm-subject-list li {
	padding: 8px 0;
	border-bottom: 1px solid #eee;
}

.hpcm-mini-badge {
	font-size: .75rem;
	color: #6b4118;
	background: #f0d9a8;
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 6px;
	white-space: nowrap;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 768px) {
	.hpcm-content-body { font-size: 1.08rem; line-height: 1.8; }
	.hpcm-player { padding: 16px; border-radius: 14px; }
}

@media (max-width: 600px) {
	.hpcm-content-body { font-size: 1.05rem; }
	.hpcm-player-controls { gap: 8px; }
}

@media (max-width: 480px) {
	.hpcm-player { padding: 14px; margin-bottom: 18px; }

	.hpcm-player-meta { gap: 6px; margin-bottom: 10px; }
	.hpcm-badge { font-size: .75rem; padding: 4px 10px; }

	.hpcm-player-controls {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.hpcm-player .hpcm-player-controls .hpcm-btn {
		width: 100%;
		padding: 12px 16px;
		font-size: .95rem;
		color: #10243e !important;
		-webkit-text-fill-color: #10243e !important;
	}

	.hpcm-player .hpcm-player-controls .hpcm-btn-listen {
		color: #ffffff !important;
		-webkit-text-fill-color: #ffffff !important;
	}

	.hpcm-player .hpcm-player-controls .hpcm-btn-ai {
		color: #ffffff !important;
		-webkit-text-fill-color: #ffffff !important;
	}

	.hpcm-player .hpcm-player-controls .hpcm-btn-pause,
	.hpcm-player .hpcm-player-controls .hpcm-btn-stop {
		color: #ffffff !important;
		-webkit-text-fill-color: #ffffff !important;
	}

	.hpcm-btn-label { display: inline; }

	.hpcm-player .hpcm-speed-select {
		width: 100%;
		text-align: center;
		color: #ffffff !important;
		-webkit-text-fill-color: #ffffff !important;
	}

	.hpcm-player .hpcm-lang-toggle {
		width: 100%;
	}

	.hpcm-player .hpcm-lang-toggle .hpcm-lang-option {
		flex: 1 1 50%;
		text-align: center;
	}
}

@media (max-width: 360px) {
	.hpcm-content-body { font-size: 1rem; }
	.hpcm-player .hpcm-player-controls .hpcm-btn { font-size: .88rem; padding: 11px 12px; }
	.hpcm-icon { font-size: 1.05rem; }
}

/* ══════════════════════════════════════════════════════════
   Content Manager Pro — Card Grid & Archive Layout
   Same structural pattern as Job Manager Pro's card system,
   restyled in HPCM's own "Himalayan Gazette" palette
   (deep pine + parchment + burnished copper).
   ══════════════════════════════════════════════════════════ */
:root {
	--hpcm-pine: #123f2b;
	--hpcm-pine-light: #1f6e46;
	--hpcm-pine-dark: #0b2b1c;
	--hpcm-copper: #6b4118;
	--hpcm-copper-light: #b9793a;
	--hpcm-parchment: #f0d9a8;
	--hpcm-parchment-bg: #fbf6ec;
	--hpcm-text: #1c2b22;
	--hpcm-muted: #5b6b60;
	--hpcm-border: #e3ddc9;
	--hpcm-radius: 14px;
	--hpcm-shadow: 0 4px 20px rgba(18, 63, 43, .07);
	--hpcm-shadow-lg: 0 14px 34px rgba(18, 63, 43, .16);
}

.hpcm-home-wrap,
.hpcm-grid-cols,
.hpcm-card,
.hpcm-cat-head {
	box-sizing: border-box;
	font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
	color: var(--hpcm-text);
}
.hpcm-home-wrap * { box-sizing: border-box; }

.hpcm-home-wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
}

.hpcm-archive-page { padding-top: 32px; padding-bottom: 56px; }

.hpcm-cat-head {
	background: linear-gradient(135deg, var(--hpcm-pine), var(--hpcm-pine-dark));
	border-radius: var(--hpcm-radius);
	padding: 26px 30px;
	margin-bottom: 28px;
}
.hpcm-cat-title {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 700;
	font-size: 28px;
	color: #fdf6e6;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.hpcm-cat-count {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--hpcm-parchment);
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px;
	padding: 4px 14px;
}

.hpcm-empty { color: var(--hpcm-muted); font-style: italic; padding: 20px 0; }

.hpcm-grid-cols {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	align-items: start;
}
.hpcm-cols-archive { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1200px) { .hpcm-cols-archive { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .hpcm-cols-archive { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hpcm-cols-archive { grid-template-columns: 1fr; } }

.hpcm-card {
	position: relative;
	background: var(--hpcm-parchment-bg);
	border: 1.5px solid var(--hpcm-border);
	border-radius: var(--hpcm-radius);
	padding: 20px 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: box-shadow .2s, transform .15s, border-color .2s;
	box-shadow: var(--hpcm-shadow);
	min-height: 250px;
}
.hpcm-card:hover {
	box-shadow: var(--hpcm-shadow-lg);
	transform: translateY(-4px);
	border-color: var(--hpcm-copper-light);
}
.hpcm-card-featured {
	border-color: var(--hpcm-copper-light);
	box-shadow: 0 10px 26px rgba(185, 121, 58, .25);
}
.hpcm-card-ribbon {
	position: absolute;
	top: -10px;
	right: 16px;
	background: linear-gradient(135deg, var(--hpcm-copper-light), var(--hpcm-copper));
	color: #fff8ea;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .3px;
	padding: 5px 12px;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(107, 65, 24, .3);
}

.hpcm-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.hpcm-card .hpcm-badge {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .3px;
	text-transform: uppercase;
	padding: 4px 10px;
	color: #fff;
	background: var(--hpcm-pine-light);
	border: none;
}
.hpcm-card .hpcm-badge-subject { background: var(--hpcm-pine); }
.hpcm-card .hpcm-badge-exam { background: var(--hpcm-pine-light); }
.hpcm-card .hpcm-badge-important { background: var(--hpcm-copper-light); color: #2a1900; }
.hpcm-card .hpcm-badge-lang { background: #fff; color: var(--hpcm-copper); border: 1px solid var(--hpcm-parchment); }

.hpcm-card-title {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.35;
	margin: 2px 0 0;
}
.hpcm-card-title a { color: var(--hpcm-pine); text-decoration: none; }
.hpcm-card-title a:hover { color: var(--hpcm-copper); }

.hpcm-card-excerpt {
	font-size: 13.5px;
	color: var(--hpcm-muted);
	line-height: 1.6;
	margin: 0;
	flex-grow: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hpcm-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px dashed var(--hpcm-border);
}
.hpcm-card-stamp {
	position: relative;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--hpcm-parchment);
	color: var(--hpcm-copper);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.hpcm-card-stamp::before {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	border: 1px dashed var(--hpcm-copper-light);
}
.hpcm-stamp-l1 { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 800; line-height: 1; }
.hpcm-stamp-l2 { font-family: 'IBM Plex Mono', monospace; font-size: 7px; font-weight: 700; line-height: 1.1; text-align: center; margin-top: 2px; }

.hpcm-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, var(--hpcm-pine), var(--hpcm-pine-light));
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	padding: 10px 16px;
	border-radius: 999px;
	white-space: nowrap;
	transition: opacity .2s;
}
.hpcm-card-btn:hover { opacity: .88; color: #fff; }

.hpcm-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
	flex-wrap: wrap;
}
.hpcm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 8px;
	background: var(--hpcm-parchment-bg);
	border: 1px solid var(--hpcm-border);
	color: var(--hpcm-pine);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}
.hpcm-pagination .page-numbers.current {
	background: var(--hpcm-pine);
	color: #fff;
	border-color: var(--hpcm-pine);
}
.hpcm-pagination .page-numbers:hover:not(.current) { border-color: var(--hpcm-copper-light); }

@media (max-width: 600px) {
	.hpcm-home-wrap { padding: 0 16px; }
	.hpcm-cat-head { padding: 20px 18px; }
	.hpcm-cat-title { font-size: 22px; }
	.hpcm-card { padding: 16px 16px 14px; min-height: 0; }
}