/* Puzzle Work — self-contained front-end styles (portable to any theme) */
.pzwork-wrap {
	--pzwork-pink: #EA267A;
	--pzwork-purple: #692D8D;
	--pzwork-mustard: #d6a337;
	--pzwork-forest: #254f1a;
	--pzwork-maroon: #780016;
	--pzwork-cobalt: #061492;
	--pzwork-ink: #000000;
	--pzwork-sage: #6b6470;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Plus Jakarta Sans", Roboto, sans-serif;
	box-sizing: border-box;
}
.pzwork-wrap * { box-sizing: border-box; }
.pzwork-empty { color: #666; font-style: italic; }

.pzwork-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.pzwork-chip {
	border: 2.5px solid var(--pzwork-ink);
	border-radius: 99px;
	background: #fff;
	padding: 9px 16px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	transition: background-color .15s, color .15s;
	font-family: inherit;
}
.pzwork-chip:hover { background: #f0f0f0; }
.pzwork-chip.is-active { background: var(--pzwork-ink); color: #fff; }

.pzwork-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .pzwork-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .pzwork-grid { grid-template-columns: repeat(3, 1fr); } }

.pzwork-card {
	border: 2.5px solid var(--pzwork-ink);
	border-radius: 32px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
	transition: transform .18s ease;
}
.pzwork-card:hover { transform: translateY(-4px); }
.pzwork-card.pzwork-hide { display: none; }

.pzwork-band { height: 74px; display: flex; align-items: center; padding: 0 22px; }
.pzwork-band strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }

.pzwork-fill-pink    { background: var(--pzwork-pink); }
.pzwork-fill-purple  { background: var(--pzwork-purple); }
.pzwork-fill-mustard { background: var(--pzwork-mustard); }
.pzwork-fill-forest  { background: var(--pzwork-forest); }
.pzwork-fill-maroon  { background: var(--pzwork-maroon); }
.pzwork-fill-cobalt  { background: var(--pzwork-cobalt); }

.pzwork-body { padding: 18px 22px 22px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.pzwork-subtitle {
	font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, monospace;
	font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pzwork-sage); margin: 0;
}
.pzwork-desc { font-size: .88rem; line-height: 1.5; color: #3a3532; }
.pzwork-desc p { margin: 0; }

.pzwork-swatches { display: flex; border: 1.5px solid var(--pzwork-ink); border-radius: 10px; overflow: hidden; }
.pzwork-swatch { flex: 1; height: 46px; display: flex; align-items: flex-end; padding: 5px 7px; }
.pzwork-swatch span { font-family: ui-monospace, monospace; font-size: 8.5px; font-weight: 600; }

.pzwork-tagrow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.pzwork-tag {
	font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, monospace;
	font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
	border: 1.5px solid var(--pzwork-ink); border-radius: 99px; padding: 4px 10px; color: #000;
}