: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);
}

/* Preserve user's custom overrides */
button:disabled,
button:disabled[disabled] {
	background-color: #efe2d3;
	color: #000000;
}

body.page-template-page-top-brands #site-content > .container {
	width: 100%;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	margin: 0;
}

.brand-az button,
.brand-tabs button.brand-tab {
	border: 0;
	background: #000;
	padding: 10px 15px 10px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #FFF;
	font-family: var(--sans);
	cursor: pointer;
	border-radius: 0;
	line-height: normal;
	min-width: auto;
}

/* Shared */
.ci-container {
	width: min(calc(100% - var(--padding)), var(--max));
	margin: auto;
}

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

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

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

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

.brands-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: 15ch;
	color: var(--ink);
}

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

.brands-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;
}

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

/* TOP 3 */
.top-three {
	padding: 60px 0 30px;
}

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

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

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

.top-three-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 22px;
}

.top-brand {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--line);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .3s ease, box-shadow .3s ease;
}

.top-brand:hover {
	transform: translateY(-3px);
	box-shadow: 0 30px 40px -30px rgba(10,10,10,.25);
}

.top-brand-visual {
	aspect-ratio: 5 / 6;
	position: relative;
	overflow: hidden;
	display: block;
}

.top-brand:nth-child(1) .top-brand-visual {
	aspect-ratio: 4 / 5;
}

.top-brand-visual img,
.brand-card-visual > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

.top-brand-visual::after,
.brand-card-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(0,0,0,.58),
			transparent 60%
		);
}

.top-brand-rank {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 3;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: 56px;
	line-height: .8;
	color: rgba(255,255,255,.6);
	text-shadow: 0 2px 20px rgba(0,0,0,.4);
}

.top-brand-wordmark {
	position: absolute;
	left: 26px;
	bottom: 24px;
	z-index: 3;
	color: var(--paper);
}

.top-brand-wordmark .n {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(30px,3.5vw,44px);
	letter-spacing: -.02em;
	line-height: .95;
}

.top-brand-wordmark .s {
	display: block;
	font-size: 9px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(243,238,229,.75);
	margin-top: 8px;
}

.top-brand-body {
	padding: 26px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.top-brand-region {
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--stone-dark);
	font-weight: 600;
}

.top-brand-tag {
	display: inline-block;
	margin-top: 12px;
	font-size: 11px;
	font-weight: 500;
	color: var(--vermilion);
	letter-spacing: .02em;
}

.top-brand-blurb {
	font-size: 13px;
	line-height: 1.7;
	color: #3a3630;
	margin: 14px 0 0;
}

.top-brand-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.top-brand-meta .m {
	font-size: 10px;
	color: var(--stone-dark);
	letter-spacing: .02em;
}

.top-brand-meta .m b {
	font-family: var(--serif);
	font-size: 16px;
	font-weight: 400;
	color: var(--ink);
	margin-right: 4px;
}

.top-brand-meta .cta {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
}

.top-brand-meta .cta::after {
	content: " →";
}

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

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

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

.brand-controls-head {
	font-family: var(--serif);
	font-size: 22px;
	letter-spacing: -.015em;
}

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

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

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

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

.brand-az {
	padding: 14px 0 4px;
	overflow-x: auto;
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--line);
	scrollbar-width: none;
}

.brand-az::-webkit-scrollbar {
	display: none;
}

.brand-az button {
	flex-shrink: 0;
	position: relative;
}

.brand-az button:hover:not(:disabled) {
	color: var(--gold);
}

.brand-az button.active {
	color: var(--gold);
}

.brand-az button.active::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 14px;
	right: 14px;
	height: 1px;
	background: var(--gold);
}

/* BRAND GRID */
.brand-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: 22px 20px;
	padding: 36px 0 80px;
}

.brand-card {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--line);
	overflow: hidden;
	transition: .3s ease;
}

.brand-card:hover {
	border-color: var(--ink);
	transform: translateY(-2px);
}

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

.brand-card-visual {
	aspect-ratio: 5 / 4;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--charcoal);
}

.brand-card-visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			45deg,
			rgba(255,255,255,.03) 0 1px,
			transparent 1px 22px
		);
}

.brand-image-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(
			135deg,
			#0A0A0A 0%,
			#24384B 55%,
			#D7A06D 130%
		);
}

.brand-image-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			45deg,
			rgba(255,255,255,.03) 0 1px,
			transparent 1px 22px
		);
}

.brand-wordmark {
	position: relative;
	z-index: 3;
	text-align: center;
	color: var(--paper);
	padding: 0 16px;
}

.brand-wordmark .w-name {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(22px,2.4vw,30px);
	letter-spacing: -.01em;
	line-height: 1;
}

.brand-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	font-size: 8.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 5px 9px;
	background: rgba(248,244,236,.95);
	color: var(--ink);
	border: 1px solid rgba(24,19,15,.12);
}

.brand-tag.rising {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--ink);
}

.brand-tag.top {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

.brand-card-info {
	padding: 18px 20px 20px;
}

.brand-card-name {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 19px;
	letter-spacing: -.01em;
	line-height: 1.15;
}

.brand-card-region {
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--stone-dark);
	font-weight: 600;
	margin-top: 6px;
}

.brand-card-blurb {
	font-size: 12px;
	line-height: 1.6;
	color: #3a3630;
	margin: 10px 0 0;
}

.brand-card-foot {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 10px;
	letter-spacing: .06em;
}

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

.brand-card-foot .pieces b {
	font-family: var(--serif);
	font-size: 14px;
	font-weight: 400;
	color: var(--ink);
	margin-right: 3px;
}

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

.brand-card-foot .arrow::after {
	content: " →";
	transition: transform .25s ease;
	display: inline-block;
}

.brand-card:hover .brand-card-foot .arrow::after {
	transform: translateX(3px);
}

.brands-empty {
	display: none;
	padding: 60px 0;
	grid-column: 1 / -1;
	text-align: center;
}

.brands-empty h3 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 28px;
	margin: 0 0 12px;
	letter-spacing: -.015em;
}

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

/* RISING STARS */
.rising-strip {
	padding: 70px 0 90px;
	background: var(--paper);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.rising-strip-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 26px;
	flex-wrap: wrap;
	gap: 14px;
}

.rising-strip-head h3 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(24px,2.8vw,34px);
	letter-spacing: -.02em;
	margin: 0;
}

.rising-strip-head h3 em {
	font-style: italic;
	font-weight: 300;
	color: var(--gold);
}

.rising-strip-head p {
	margin: 0;
	font-size: 12px;
	color: var(--stone-dark);
	max-width: 36ch;
	line-height: 1.6;
}

.rising-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 8px;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--stone) transparent;
}

.rising-track::-webkit-scrollbar {
	height: 5px;
}

.rising-track::-webkit-scrollbar-thumb {
	background: var(--stone);
}

.rising-card {
	flex: 0 0 240px;
	scroll-snap-align: start;
	border: 1px solid var(--line);
	background: var(--ivory);
	padding: 22px;
	transition: border-color .2s ease;
	color: inherit;
	text-decoration: none;
}

.rising-card:hover {
	border-color: var(--ink);
}

.rising-card .num {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: 32px;
	color: var(--gold);
	line-height: 1;
}

.rising-card .name {
	font-family: var(--serif);
	font-size: 18px;
	letter-spacing: -.01em;
	margin: 14px 0 4px;
}

.rising-card .region {
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--stone-dark);
	font-weight: 600;
}

.rising-card .trend {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: 10.5px;
	color: var(--stone-dark);
	display: flex;
	align-items: center;
	gap: 6px;
}

.rising-card .trend b {
	color: #4d6641;
	font-weight: 600;
	font-family: var(--serif);
	font-size: 14px;
}

.rising-card .trend::before {
	content: "";
	width: 8px;
	height: 8px;
	background: #5c7a4f;
	border-radius: 50%;
}

/* CTA */
.brand-cta {
	padding: 80px 0 100px;
	background: var(--ink);
	color: var(--ivory);
	position: relative;
	overflow: hidden;
}

.brand-cta::before {
	content: "भारत";
	position: absolute;
	right: -30px;
	bottom: -80px;
	font-family: var(--serif);
	font-size: 240px;
	line-height: 1;
	color: rgba(255,255,255,.03);
	pointer-events: none;
}

.brand-cta-inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 1;
}

.brand-cta h3 {
	color: #FFF;
	font-weight: 400;
	font-size: clamp(30px,3.6vw,48px);
	letter-spacing: -.02em;
	line-height: 1.1;
	margin: 0;
}

.brand-cta h3 em {
	font-style: italic;
	font-weight: 300;
	color: var(--gold);
}

.brand-cta p {
	font-size: 14px;
	line-height: 1.7;
	color: rgba(243,238,229,.65);
	margin: 16px 0 0;
	max-width: 40ch;
}

.brand-cta-eyebrow {
	color: var(--gold);
	margin-bottom: 16px;
}

.brand-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-end;
}

.brand-cta-actions a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 16px 28px;
	background: var(--gold);
	color: var(--ink);
	text-decoration: none;
}

.brand-cta-actions a:hover {
	background: #e6b787;
}

.brand-cta-actions a.secondary {
	background: transparent;
	border: 1px solid var(--ivory);
	color: var(--ivory);
}

.brand-cta-actions a.secondary:hover {
	background: var(--ivory);
	color: var(--ink);
}

/* RESPONSIVE */
@media (max-width: 900px) {
	.top-three-grid {
		grid-template-columns: 1fr;
	}

	.brand-grid {
		grid-template-columns: repeat(2, minmax(0,1fr));
	}
}

@media (max-width: 820px) {
	.brand-controls {
		padding: 36px 0 12px;
	}

	.brand-grid {
		padding: 24px 0 60px;
	}

	.brand-cta-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.brand-cta-actions {
		justify-content: center;
	}
}

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

	.brand-card-info {
		padding: 14px;
	}

	.brand-card-name {
		font-size: 16px;
	}

	.brand-card-blurb {
		display: none;
	}

	.brand-card-region {
		font-size: 8px;
		line-height: 1.5;
	}

	.brand-card-foot {
		margin-top: 10px;
		padding-top: 10px;
	}

	.brand-card-foot .arrow {
		font-size: 8px;
	}

	.brand-card-visual {
		aspect-ratio: 4 / 5;
	}

	.top-three-grid {
		display: flex;
		overflow-x: auto;
		gap: 12px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-right: calc(var(--padding) * -0.5);
		padding-right: 24px;
	}

	.top-three-grid::-webkit-scrollbar {
		display: none;
	}

	.top-brand {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}

	.brand-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		width: 100%;
		scrollbar-width: none;
	}

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