:root {
	--ink: #0A0A0A;
	--charcoal: #161616;
	--ivory: #F3EEE5;
	--paper: #FAF8F3;
	--stone: #B8AA96;
	--stone-dark: #817565;
	--gold: #D7A06D;
	--vermilion: #9D3C2D;
	--line: rgba(10,10,10,.12);
	--line-strong: rgba(10,10,10,.18);
	--serif: "Fraunces", serif;
	--sans: "Inter", sans-serif;
	--max: 1500px;
	--padding: clamp(20px,5vw,80px);
}

.cult-top-artisans {
	background: var(--ivory);
	color: var(--ink);
	font-family: var(--sans);
}

body.page-template-page-top-artisans #site-content > .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}
.cult-top-artisans .ci-container {
	width: min(calc(100% - var(--padding)), var(--max));
	margin: auto;
}

.cult-top-artisans .eyebrow {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--stone-dark);
}


/* HERO */
.artisan-hero {
	position: relative;
	padding: 80px 0 40px;
	background:
		radial-gradient(
			ellipse 80% 60% at 50% 0%,
			rgba(215,160,109,.2),
			transparent 60%
		),
		var(--ivory);
	text-align: center;
	overflow: hidden;
}

.artisan-hero .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--vermilion);
}

.artisan-hero .eyebrow::before,
.artisan-hero .eyebrow::after {
	content: "";
	width: 24px;
	height: 1px;
	background: currentColor;
	opacity: .5;
}

.artisan-title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(44px,6vw,86px);
	letter-spacing: -.035em;
	line-height: .98;
	margin: 22px auto 0;
	max-width: 16ch;
	color: var(--ink);
}

.artisan-title em {
	font-style: italic;
	font-weight: 300;
	color: var(--vermilion);
	position: relative;
	padding: 0 .06em;
}

.artisan-title em::after {
	content: "";
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: -.16em;
	height: 12px;
	background:
		radial-gradient(
			circle at 50% 50%,
			#9D3C2D 0 2px,
			transparent 2.5px
		) 50% 50% / 8px 8px repeat-x,
		linear-gradient(
			90deg,
			transparent,
			rgba(157,60,45,.35),
			transparent
		) 50% 50% / 100% 1px no-repeat;
}

.artisan-sub {
	max-width: 560px;
	margin: 24px auto 0;
	font-size: 15px;
	line-height: 1.7;
	color: #3a3630;
}

.artisan-stats {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-top: 48px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.artisan-stats .stat {
	flex: 1;
	max-width: 200px;
	text-align: center;
	padding: 20px 0;
	border-right: 1px solid var(--line);
}

.artisan-stats .stat:last-child {
	border-right: 0;
}

.artisan-stats b {
	display: block;
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 400;
}

.artisan-stats span {
	display: block;
	font-size: 9px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--stone-dark);
	margin-top: 4px;
}

/* FEATURED ARTISAN */
.master-section {
	padding: 70px 0 40px;
}

.master-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 36px;
	flex-wrap: wrap;
	gap: 16px;
}

.master-head h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(28px,3vw,40px);
	letter-spacing: -.02em;
	margin: 0;
}

.master-head h2 em {
	font-style: italic;
	font-weight: 300;
	color: var(--gold);
}

.master-card {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	background: var(--paper);
	border: 1px solid var(--line);
	overflow: hidden;
}

.master-portrait {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--charcoal);
}

.master-portrait img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.master-card:hover .master-portrait img {
	transform: scale(1.025);
}

.master-portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to top,
			rgba(0,0,0,.35),
			transparent 55%
		);
	pointer-events: none;
}

.master-rank {
	position: absolute;
	top: 28px;
	right: 30px;
	z-index: 3;
	font-family: var(--serif);
	font-size: 64px;
	font-style: italic;
	font-weight: 300;
	color: rgba(255,255,255,.7);
	text-shadow: 0 2px 20px rgba(0,0,0,.25);
}

.master-body {
	padding: 56px 52px;
	display: flex;
	flex-direction: column;
}

.master-badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 9px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--gold);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--gold);
}

.master-name {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(38px,3.8vw,54px);
	letter-spacing: -.03em;
	line-height: 1;
	margin: 22px 0 0;
}

.master-role {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--stone-dark);
	margin-top: 12px;
}

.master-location {
	margin-top: 10px;
	font-size: 12px;
	color: var(--stone-dark);
}

.master-blurb {
	font-size: 15px;
	line-height: 1.75;
	color: #3a3630;
	margin: 24px 0 0;
	max-width: 44ch;
}

.master-meta {
	display: flex;
	gap: 36px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.master-meta .m {
	font-size: 11px;
	color: var(--stone-dark);
}

.master-meta .m b {
	display: block;
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 400;
	color: var(--ink);
	margin-bottom: 2px;
}

.master-cta {
	margin-top: auto;
	padding-top: 32px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
}

.master-cta::after {
	content: "→";
	transition: transform .25s ease;
}

.master-cta:hover {
	color: var(--vermilion);
}

.master-cta:hover::after {
	transform: translateX(4px);
}

/* MONTH FILTER */
.artisan-month-filter {
	margin-left: auto;
}

.artisan-month-filter input[type="month"] {
	appearance: none;
	-webkit-appearance: none;
	padding: 8px 4px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ink);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	cursor: pointer;
	border-radius: 0px;
	max-height: max-content;
	width: 135px;
}

/* CONTROLS */
.artisan-controls {
	padding: 52px 0 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	border-top: 1px solid var(--line);
	margin-top: 20px;
}

.artisan-controls-head {
	font-family: var(--serif);
	font-size: 38px;
}

.artisan-controls-head b {
	font-weight: 500;
}

.artisan-controls-head .count {
	font-family: var(--sans);
	font-size: 11px;
	color: var(--stone-dark);
	margin-left: 12px;
	letter-spacing: .02em;
}

.artisan-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.artisan-tab {
	font: inherit;
	cursor: pointer;
	background: none;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 9px 14px;
	border: 1px solid var(--line);
	color: var(--ink);
	transition: .2s ease;
	border-radius: 0px;
}

.artisan-tab:hover {
	border-color: var(--ink);
}

.artisan-tab.active {
	background: var(--ink);
	color: var(--ivory);
	border-color: var(--ink);
}

/* GRID */
.artisan-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 20px;
	padding: 32px 0 80px;
}

.artisan-card {
	position: relative;
	transition: transform .3s ease;
}

.artisan-card:hover {
	transform: translateY(-3px);
}

.artisan-card.hidden {
	display: none;
}

.artisan-portrait {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	margin-bottom: 14px;
	background: var(--charcoal);
}

.artisan-portrait img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.artisan-card:hover .artisan-portrait img {
	transform: scale(1.025);
}

.artisan-portrait .overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			to top,
			rgba(0,0,0,.48) 0%,
			transparent 52%
		);
	pointer-events: none;
}

.artisan-portrait .years {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 9px;
	background: rgba(248,244,236,.94);
	border: 1px solid rgba(24,19,15,.12);
	color: var(--ink);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.artisan-portrait .years b {
	font-family: var(--serif);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
}

.artisan-portrait .master-star {
	position: absolute;
	bottom: 16px;
	left: 16px;
	z-index: 3;
	padding: 6px 9px;
	background: var(--gold);
	color: var(--ink);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.artisan-info {
	padding: 0 2px;
}

.artisan-name {
	margin: 0;
	font-family: var(--serif);
	font-weight: 500;
	font-size: 20px;
	letter-spacing: -.015em;
	line-height: 1.1;
}

.artisan-name a {
	color: inherit;
	text-decoration: none;
}

.artisan-role {
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--stone-dark);
	font-weight: 600;
	margin-top: 6px;
}

.artisan-region {
	font-size: 11.5px;
	color: #3a3630;
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.artisan-region::before {
	content: "";
	width: 4px;
	height: 4px;
	background: var(--vermilion);
	border-radius: 50%;
	flex: 0 0 auto;
}

.artisan-foot {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 10px;
}

.artisan-foot .pieces {
	color: var(--stone-dark);
}

.artisan-foot .pieces b {
	font-family: var(--serif);
	font-size: 14px;
	font-weight: 400;
	color: var(--ink);
}

.artisan-foot .visit {
	color: var(--vermilion);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: 9.5px;
	text-decoration: none;
}

.artisan-foot .visit::after {
	content: " →";
}

/* EMPTY STATE */
.artisans-empty {
	grid-column: 1 / -1;
	padding: 60px 20px;
	text-align: center;
}

.artisans-empty h3 {
	margin: 0 0 8px;
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 400;
}

.artisans-empty p {
	margin: 0;
	color: var(--stone-dark);
	font-size: 13px;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
	.artisan-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.master-card {
		grid-template-columns: 1fr;
	}

	.master-body {
		padding: 38px 30px;
	}
}

@media (max-width: 720px) {
	.artisan-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.artisan-stats {
		overflow-x: auto;
		justify-content: flex-start;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.artisan-stats::-webkit-scrollbar {
		display: none;
	}

	.artisan-stats .stat {
		flex: 0 0 42%;
		max-width: none;
		scroll-snap-align: start;
	}

	.artisan-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		width: 100%;
		padding-bottom: 4px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.artisan-tabs::-webkit-scrollbar {
		display: none;
	}

	.artisan-tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

@media (max-width: 440px) {
	.artisan-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 10px;
	}

	.artisan-name {
		font-size: 17px;
	}

	.artisan-role {
		font-size: 8.5px;
		line-height: 1.5;
	}

	.artisan-region {
		font-size: 10px;
	}

	.artisan-foot {
		gap: 5px;
	}

	.artisan-portrait .years {
		top: 8px;
		right: 8px;
		padding: 5px 7px;
		font-size: 7px;
	}

	.artisan-portrait .master-star {
		left: 8px;
		bottom: 8px;
		font-size: 7px;
	}

	.master-body {
		padding: 32px 22px;
	}

	.master-meta {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
}