/*
Theme Name: The Celebration Experience
Theme URI: https://thecelebrationexperience.com/
Author: Shawn Cosner
Description: Custom theme for The Celebration Experience — premium photo booth rentals serving North Central West Virginia. Clean editorial aesthetic: Playfair Display headings, Manrope body, champagne-gold accent, sharp corners. Built from the Horizons design reference on the wp-site-template workflow.
Version: 0.1.0
*/

/* ─── Design tokens ─────────────────────────────────────────────
   Extracted from the Horizons reference design. Edit here to retune
   the whole site. */
:root {
	--bg: #ffffff; /* page background — pure white */
	--bg-elev-1: #fafafa; /* cards / off-white panels */
	--bg-elev-2: #f2f2f2; /* muted fills */
	--bg-dark: #0a0a0a; /* dark sections */
	--text-bright: #0a0a0a; /* headings + strong text */
	--text-body: #1a1a1a; /* body copy */
	--text-mute: #666666; /* secondary copy */
	--text-dim: #999999; /* faint meta */
	--accent: #ab9049; /* champagne gold */
	--accent-soft: #c4ad6e; /* gold hover */
	--primary: #0a0a0a; /* primary button fill */
	--primary-fg: #ffffff;
	--rule: #d9d9d9; /* visible borders */
	--rule-faint: #ececec; /* hairline borders */
	--measure: 720px; /* long-form max width */
	--header-h: 96px; /* header row height */
}

/* ─── Reset + base ──────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	background: var(--bg);
	color: var(--text-body);
	font-family:
		"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img,
svg {
	max-width: 100%;
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	color: var(--text-bright);
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
	margin: 0;
}
p {
	margin: 0;
}

/* ─── Layout helpers ────────────────────────────────────────────── */
.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}
@media (min-width: 1024px) {
	.container {
		padding: 0 2rem;
	}
}
.text-balance {
	text-wrap: balance;
}
.eyebrow {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.rule-accent {
	width: 4rem;
	height: 1px;
	background: var(--accent);
	border: 0;
	margin: 0;
}

/* ─── Buttons ───────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3.5rem;
	padding: 0 2.5rem;
	font-family: "Manrope", sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background 0.25s,
		color 0.25s,
		border-color 0.25s,
		opacity 0.25s;
}
.btn-primary {
	background: var(--primary);
	color: var(--primary-fg);
}
.btn-primary:hover {
	opacity: 0.88;
}
.btn-accent {
	background: var(--accent);
	color: #fff;
}
.btn-accent:hover {
	background: var(--accent-soft);
}
.btn-outline {
	background: transparent;
	color: var(--text-bright);
	border-color: var(--rule);
}
.btn-outline:hover {
	background: var(--text-bright);
	color: var(--bg);
}
.btn-ghost-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}
.btn-ghost-light:hover {
	background: #fff;
	color: #000;
}

/* ─── Top contact bar ───────────────────────────────────────────── */
.topbar {
	background: var(--text-bright);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.03em;
}
.topbar-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0.5rem 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
}
@media (min-width: 640px) {
	.topbar-inner {
		justify-content: flex-end;
		padding: 0.5rem 2rem;
	}
}
.topbar a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #fff;
	transition: color 0.2s;
}
.topbar a:hover {
	color: var(--accent-soft);
}
.topbar .hide-sm {
	display: none;
}
@media (min-width: 640px) {
	.topbar .hide-sm {
		display: inline;
	}
}

/* ─── Header / primary nav ──────────────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--rule-faint);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
}
.brand-logo {
	display: flex;
	align-items: center;
	transition: opacity 0.2s;
	flex: 0 0 auto;
}
.brand-logo:hover {
	opacity: 0.8;
}
.brand-logo img {
	height: 58px;
	width: auto;
	max-width: none;
	flex-shrink: 0;
}
.main-nav {
	display: none;
	align-items: center;
	gap: 1.6rem;
}
@media (min-width: 1100px) {
	.main-nav {
		display: flex;
	}
}
.main-nav a {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-mute);
	transition: color 0.2s;
	white-space: nowrap;
}
.main-nav a:hover {
	color: var(--accent);
}
.main-nav a.active {
	color: var(--text-bright);
}
.hamburger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 11px;
}
@media (min-width: 1100px) {
	.hamburger {
		display: none;
	}
}
.hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--text-bright);
	transition: 0.3s;
}
.hamburger.active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
	opacity: 0;
}
.hamburger.active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* mobile nav panel */
.mobile-nav {
	display: none;
	border-top: 1px solid var(--rule-faint);
	padding: 1rem 0 1.5rem;
}
.mobile-nav.open {
	display: block;
}
.mobile-nav a {
	display: block;
	padding: 0.85rem 1.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--text-mute);
	transition:
		background 0.2s,
		color 0.2s;
}
.mobile-nav a:hover,
.mobile-nav a.active {
	background: var(--bg-elev-2);
	color: var(--text-bright);
}
.mobile-contact {
	margin-top: 1rem;
	padding: 1.25rem 1.5rem 0;
	border-top: 1px solid var(--rule-faint);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.mobile-contact a {
	padding: 0;
	display: flex;
	gap: 0.6rem;
	align-items: center;
	font-size: 0.85rem;
	color: var(--text-mute);
}
.mobile-contact a:hover {
	color: var(--accent);
}

/* ─── Page hero (interior pages) ────────────────────────────────── */
.page-hero {
	padding: 5rem 0 3.5rem;
	text-align: center;
}
.page-hero .eyebrow {
	display: block;
	margin-bottom: 1.5rem;
}
.page-hero-title {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	margin: 0 0 1.25rem;
}
.page-hero-title .accent-word {
	color: var(--accent);
}
.page-hero-sub {
	font-size: 1.1rem;
	color: var(--text-mute);
	line-height: 1.7;
	max-width: 42rem;
	margin: 0 auto;
	font-weight: 300;
}
.page-hero .rule-accent {
	margin: 1.75rem auto 0;
}

/* ─── Generic section ───────────────────────────────────────────── */
.section {
	padding: 5rem 0;
}
.section-dark {
	background: var(--bg-dark);
	color: #fff;
}
.section-dark h1,
.section-dark h2,
.section-dark h3 {
	color: #fff;
}
.section-muted {
	background: var(--bg-elev-1);
}
.section + .section {
	border-top: 1px solid var(--rule-faint);
}
.section-head {
	text-align: center;
	max-width: 42rem;
	margin: 0 auto 3.5rem;
}
.section-head h2 {
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0 0 1rem;
}
.section-head p {
	color: var(--text-mute);
	font-size: 1.05rem;
	line-height: 1.7;
}
.section-label {
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.section-label::before {
	content: "";
	display: block;
	width: 30px;
	height: 1px;
	background: var(--accent);
}

/* ─── Cards ─────────────────────────────────────────────────────── */
.card {
	background: var(--bg-elev-1);
	border: 1px solid var(--rule);
}
.card-pad {
	padding: 2rem;
}

/* ─── Footer ────────────────────────────────────────────────────── */
.site-footer {
	background: var(--bg);
	border-top: 1px solid var(--rule-faint);
	padding: 4rem 0 2rem;
	color: var(--text-mute);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-bottom: 3rem;
}
@media (min-width: 768px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.footer-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.footer-logo {
	display: inline-block;
	transition: opacity 0.2s;
}
.footer-logo:hover {
	opacity: 0.8;
}
.footer-logo img {
	height: 60px;
	width: auto;
	max-width: none;
	flex-shrink: 0;
	margin-bottom: 1.25rem;
}
.footer-blurb {
	font-size: 0.88rem;
	line-height: 1.7;
}
.footer-col h3 {
	font-family: "Manrope", sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-bright);
	margin-bottom: 1.25rem;
}
.footer-col .area {
	display: flex;
	gap: 0.6rem;
	font-size: 0.85rem;
	line-height: 1.7;
}
.footer-contact a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.88rem;
	margin-bottom: 0.9rem;
	transition: color 0.2s;
}
.footer-contact a:hover {
	color: var(--accent);
}
.footer-social {
	display: flex;
	gap: 0.75rem;
}
.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--bg-elev-2);
	color: var(--text-bright);
	transition:
		background 0.25s,
		color 0.25s;
}
.footer-social a:hover {
	background: var(--accent);
	color: #fff;
}
.footer-bottom {
	border-top: 1px solid var(--rule-faint);
	padding-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	font-size: 0.8rem;
}
@media (min-width: 768px) {
	.footer-bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}
.footer-bottom a:hover {
	color: var(--accent);
}
.footer-bottom .links {
	display: flex;
	gap: 1.5rem;
}

/* ─── Inline icon sizing ────────────────────────────────────────── */
.ico {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}
.ico-accent {
	color: var(--accent);
}

/* ─── Long-form content (generic pages / posts) ─────────────────── */
.page-content {
	max-width: var(--measure);
	margin: 0 auto;
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--text-body);
}
.page-content p {
	margin: 0 0 1.25rem;
}
.page-content h2 {
	font-size: 1.8rem;
	margin: 2.5rem 0 1rem;
}
.page-content h3 {
	font-size: 1.35rem;
	margin: 2rem 0 0.75rem;
}
.page-content a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ─── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
	:root {
		--header-h: 76px;
	}
	.brand-logo img {
		height: 44px;
		width: auto;
	}
}
@media (max-width: 640px) {
	.section {
		padding: 3.5rem 0;
	}
	.page-hero {
		padding: 3.5rem 0 2.5rem;
	}
	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ─── Home page ─────────────────────────────────────────────────── */
.home-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	padding: 7rem 0 4rem;
	background: #0a0a0a center / cover no-repeat;
}
.home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		#0a0a0a 0%,
		rgba(10, 10, 10, 0.55) 45%,
		rgba(10, 10, 10, 0.7) 100%
	);
}
.home-hero .container {
	position: relative;
	z-index: 1;
	max-width: 56rem;
}
.home-hero .eyebrow {
	color: rgba(255, 255, 255, 0.7);
	display: block;
	margin-bottom: 1.75rem;
}
.home-hero h1 {
	color: #fff;
	font-size: clamp(2.5rem, 6vw, 4.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin-bottom: 2rem;
}
.home-hero .hero-lede {
	font-size: 1.1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 300;
	max-width: 38rem;
	margin: 0 auto 3rem;
}
.home-hero .hero-actions {
	display: flex;
	gap: 1.25rem;
	justify-content: center;
	flex-wrap: wrap;
}

.video-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	max-width: 64rem;
	margin: 0 auto;
}
@media (min-width: 768px) {
	.video-grid {
		grid-template-columns: 1fr 1fr;
	}
}
.video-card {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--bg-elev-2);
	border: 1px solid var(--rule);
	overflow: hidden;
	cursor: pointer;
}
.video-card .video-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.4s;
}
.video-card:hover .video-play {
	background: rgba(0, 0, 0, 0.08);
}
.video-play-btn {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: var(--text-bright);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	transition: transform 0.4s;
}
.video-card:hover .video-play-btn {
	transform: scale(1.06);
}
.video-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.75rem;
	text-align: left;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
.video-caption h3 {
	color: #fff;
	font-size: 1.4rem;
}
.video-caption p {
	color: rgba(255, 255, 255, 0.8);
	font-weight: 300;
	margin-top: 0.35rem;
	font-size: 0.95rem;
}

.home-locations p {
	font-size: 1.1rem;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 300;
	max-width: 42rem;
	margin: 0 auto;
}
.home-cta .eyebrow {
	display: block;
	margin-bottom: 1.5rem;
}
.home-cta h2 {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	margin-bottom: 1.5rem;
}
.home-cta p {
	font-size: 1.1rem;
	color: var(--text-mute);
	font-weight: 300;
	line-height: 1.7;
	max-width: 38rem;
	margin: 0 auto 2.5rem;
}

/* ─── Tabs (Collections) ────────────────────────────────────────── */
.tab-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 32rem;
	margin: 0 auto 3.5rem;
	background: var(--bg-elev-2);
}
.tab {
	font-family: "Manrope", sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.9rem 1rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--text-mute);
	transition:
		background 0.2s,
		color 0.2s;
}
.tab.active {
	background: var(--bg);
	color: var(--text-bright);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tab-panel {
	display: none;
}
.tab-panel.active {
	display: block;
}

/* ─── Data tables (pricing / features) ──────────────────────────── */
.data-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--rule);
	background: var(--bg);
}
.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.data-table th,
.data-table td {
	padding: 1rem 1.25rem;
	text-align: left;
	border-bottom: 1px solid var(--rule-faint);
}
.data-table thead th {
	background: var(--bg-elev-1);
	vertical-align: bottom;
	color: var(--text-bright);
	font-weight: 600;
}
.data-table thead .tier {
	text-align: center;
	vertical-align: top;
}
.data-table thead .tier .tier-name {
	font-weight: 600;
	color: var(--text-bright);
}
.data-table thead .tier .tier-price {
	font-size: 0.82rem;
	color: var(--text-mute);
	font-weight: 400;
	margin-top: 0.25rem;
	white-space: nowrap;
}
.data-table tbody td.check {
	text-align: center;
	color: var(--accent);
	font-weight: 600;
}
.data-table tbody td.center {
	text-align: center;
	font-weight: 500;
	color: var(--text-bright);
}
.data-table tbody tr:last-child td {
	border-bottom: 0;
}
.data-table .row-hi {
	background: var(--bg-elev-1);
}
.data-table td.feature {
	color: var(--text-mute);
	font-weight: 500;
}
.data-table td.exp {
	color: var(--text-bright);
	font-weight: 600;
	vertical-align: top;
	white-space: nowrap;
}
.data-table td.exp-desc {
	color: var(--text-mute);
	line-height: 1.7;
}

/* collections layout bits */
.collection-block + .collection-block {
	margin-top: 5rem;
}
.block-head {
	text-align: center;
	margin-bottom: 2.5rem;
}
.block-head h3 {
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	margin-bottom: 0.5rem;
}
.block-head p {
	color: var(--text-mute);
	font-size: 1.05rem;
}
.table-note {
	text-align: center;
	color: var(--text-mute);
	margin-top: 1.25rem;
	font-size: 0.88rem;
	line-height: 1.6;
}
.table-note.caps {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	font-size: 0.78rem;
	margin-top: 1.75rem;
}
.box-tag {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--accent);
	margin-bottom: 1.5rem;
}
.enhance-note {
	max-width: 44rem;
	margin: 2.5rem auto 0;
	text-align: center;
	color: var(--text-mute);
	line-height: 1.7;
}
.enhance-note p {
	margin: 0 0 0.75rem;
}
.enhance-note p:last-child {
	margin-bottom: 0;
}
.enhance-note a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}
.enhance-note a:hover {
	text-decoration: underline;
}
.quote-line {
	text-align: center;
	max-width: 46rem;
	margin: 5rem auto;
	font-family: "Playfair Display", serif;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.4;
	color: var(--text-bright);
}
.info-panel {
	max-width: 44rem;
	margin: 5rem auto 0;
	background: var(--bg-elev-1);
	border: 1px solid var(--rule);
	padding: 2.5rem;
}
.info-panel h3 {
	text-align: center;
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 1.75rem;
}
.info-panel .row {
	padding: 1rem 0;
	border-bottom: 1px solid var(--rule-faint);
	color: var(--text-mute);
	font-size: 1rem;
}
.info-panel .row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.pill {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-mute);
	border: 1px solid var(--rule);
	padding: 0.5rem 1.1rem;
	margin-bottom: 1.75rem;
}
.coming-soon {
	max-width: 36rem;
	margin: 0 auto;
	text-align: center;
	padding: 4rem 0;
}
.coming-soon h2 {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: 1.25rem;
}
.coming-soon p {
	color: var(--text-mute);
	font-size: 1.1rem;
	line-height: 1.7;
}

/* ─── Accordion (FAQ) ───────────────────────────────────────────── */
.faq-section + .faq-section {
	margin-top: 3rem;
}
.faq-section-trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	background: none;
	border: 0;
	border-bottom: 2px solid var(--rule);
	cursor: pointer;
	text-align: left;
	padding: 0 0 1rem;
	margin: 0;
}
.faq-section-title {
	font-family: "Playfair Display", serif;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text-bright);
	line-height: 1.2;
}
.faq-section-trigger:hover .faq-section-title {
	color: var(--accent);
}
.faq-section-trigger .chev {
	transition: transform 0.25s;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	color: var(--text-mute);
}
.faq-section-trigger[aria-expanded="true"] .chev {
	transform: rotate(180deg);
}
.faq-section.collapsed .accordion,
.faq-section.collapsed .faq-intro {
	display: none;
}
.accordion {
	border-bottom: 1px solid var(--rule-faint);
	margin-top: 0.25rem;
}
.acc-item {
	border-top: 1px solid var(--rule-faint);
}
.faq-section .accordion .acc-item:first-child {
	border-top: 0;
}
.acc-trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: "Manrope", sans-serif;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--text-bright);
	padding: 1.35rem 0;
}
.acc-trigger:hover {
	color: var(--accent);
}
.acc-trigger .chev {
	transition: transform 0.25s;
	flex-shrink: 0;
	width: 1.1rem;
	height: 1.1rem;
}
.acc-trigger[aria-expanded="true"] .chev {
	transform: rotate(180deg);
}
.acc-content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s ease;
}
.acc-trigger[aria-expanded="true"] + .acc-content {
	grid-template-rows: 1fr;
}
.acc-content > div {
	overflow: hidden;
}
.acc-content-inner {
	padding: 0 0 1.4rem;
	color: var(--text-mute);
	line-height: 1.75;
}
.faq-intro {
	color: var(--text-mute);
	line-height: 1.75;
	margin: 0.75rem 0 1.75rem;
	max-width: 46rem;
}
.acc-list {
	margin: 0.6rem 0 0.9rem;
	padding-left: 1.25rem;
	list-style: none;
}
.acc-list li {
	position: relative;
	padding-left: 1.1rem;
	margin-bottom: 0.45rem;
}
.acc-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	background: var(--accent);
	border-radius: 50%;
}
.acc-list li strong {
	color: var(--text-bright);
	font-weight: 600;
}
.help-box {
	margin-top: 5rem;
	text-align: center;
	background: var(--bg-elev-1);
	border: 1px solid var(--rule);
	padding: 3rem 2rem;
}
.help-box h3 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 0.75rem;
}
.help-box p {
	color: var(--text-mute);
	font-size: 1.05rem;
	max-width: 36rem;
	margin: 0 auto 2rem;
	line-height: 1.7;
}
.help-actions {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.help-contact {
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.help-contact a:first-child {
	color: var(--text-bright);
	font-weight: 600;
}
.help-contact a:hover {
	color: var(--accent);
}

/* ─── Preview-only: nav items for pages not yet built ───────────── */
.main-nav .soon,
.mobile-nav .soon {
	color: var(--text-dim);
	cursor: default;
	position: relative;
}
.main-nav .soon::after {
	content: "soon";
	font-size: 0.5rem;
	letter-spacing: 0.1em;
	vertical-align: super;
	margin-left: 0.3rem;
	color: var(--accent);
	opacity: 0.8;
}
.mobile-nav .soon {
	display: block;
	padding: 0.85rem 1.5rem;
	font-size: 0.85rem;
	font-weight: 600;
}
.mobile-nav .soon::after {
	content: "  · coming soon";
	font-size: 0.65rem;
	color: var(--accent);
	letter-spacing: 0.04em;
}
.preview-banner {
	background: var(--accent);
	color: #fff;
	text-align: center;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.6rem 1rem;
}
.placeholder-note {
	max-width: 44rem;
	margin: 0 auto 3rem;
	text-align: center;
	font-size: 0.84rem;
	color: var(--text-mute);
	background: var(--bg-elev-1);
	border: 1px solid var(--rule);
	padding: 1rem 1.5rem;
}

/* ─── Gallery ───────────────────────────────────────────────────── */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	max-width: 64rem;
	margin: 0 auto;
}
@media (min-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}
.gallery-tile {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--bg-elev-2);
	border: 1px solid var(--rule);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.gallery-tile .ph-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-dim);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.gallery-tile .tile-caption {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 1rem;
	font-size: 0.85rem;
	color: var(--text-mute);
	font-weight: 500;
}

/* ─── Vendors ───────────────────────────────────────────────────── */
.vendor-cat + .vendor-cat {
	margin-top: 4rem;
}
.vendor-cat-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	border-bottom: 1px solid var(--rule);
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}
.vendor-cat-head h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
}
.vendor-cat-head .count {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-mute);
	white-space: nowrap;
}
.vendor-cat-desc {
	color: var(--text-mute);
	font-size: 0.95rem;
	margin-top: 0.5rem;
	max-width: 40rem;
}
.vendor-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 640px) {
	.vendor-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.vendor-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.vendor-card {
	background: var(--bg-elev-1);
	border: 1px solid var(--rule);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition:
		box-shadow 0.25s,
		transform 0.25s;
}
.vendor-card:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
	transform: translateY(-2px);
}
.vendor-card h3 {
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
}
.vendor-card p {
	color: var(--text-mute);
	font-size: 0.92rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
	flex: 1;
}
.vendor-card .loc {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.vendor-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.1rem;
	margin-bottom: 1.25rem;
}
.vendor-links a {
	font-size: 0.84rem;
	color: var(--accent);
	text-decoration: none;
	font-weight: 500;
}
.vendor-links a:hover {
	text-decoration: underline;
}
.vendor-soon {
	background: var(--bg-elev-1);
	border: 1px dashed var(--rule);
	padding: 2rem 1.75rem;
	text-align: center;
}
.vendor-soon p {
	color: var(--text-mute);
	font-size: 0.95rem;
	line-height: 1.7;
	max-width: 42rem;
	margin: 0 auto;
	font-style: italic;
}

/* ─── Reserve form ──────────────────────────────────────────────── */
.reserve-wrap {
	max-width: 38rem;
	margin: 0 auto;
}
.reserve-form {
	background: var(--bg-elev-1);
	border: 1px solid var(--rule);
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}
.form-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.form-field label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-bright);
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.form-field input,
.form-field select,
.form-field textarea {
	font-family: "Manrope", sans-serif;
	font-size: 0.95rem;
	color: var(--text-bright);
	background: var(--bg);
	border: 1px solid var(--rule);
	padding: 0.8rem 0.9rem;
	width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--accent);
}
.form-field textarea {
	resize: vertical;
	min-height: 6rem;
}
.reserve-note {
	font-size: 0.8rem;
	color: var(--text-mute);
	text-align: center;
}
.form-msg {
	display: none;
	background: var(--accent);
	color: #fff;
	padding: 1rem;
	text-align: center;
	font-size: 0.9rem;
	font-weight: 500;
}
.form-msg.show {
	display: block;
}

/* ─── Add-on / enhancement cards ────────────────────────────────── */
.divider-text {
	position: relative;
	text-align: center;
	max-width: 48rem;
	margin: 0 auto 2.5rem;
}
.divider-text::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--rule-faint);
}
.divider-text span {
	position: relative;
	background: var(--bg);
	padding: 0 1.5rem;
	font-style: italic;
	color: var(--text-mute);
	font-size: 0.95rem;
}
.addon-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 68rem;
	margin: 0 auto;
}
@media (min-width: 640px) {
	.addon-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.addon-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.addon-card {
	background: var(--bg-elev-1);
	border: 1px solid var(--rule);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.addon-card h3 {
	font-size: 1.2rem;
	margin-bottom: 0.85rem;
}
.addon-card p {
	color: var(--text-mute);
	font-size: 0.92rem;
	line-height: 1.65;
}
.addon-card p.sec {
	font-style: italic;
	font-size: 0.85rem;
	margin-top: 0.5rem;
}
.addon-price {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-bright);
}
.addon-price .pr-row {
	display: flex;
	justify-content: space-between;
	margin-top: 0.45rem;
	font-weight: 500;
}
.addon-price .pr-row .lbl {
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-mute);
	font-weight: 400;
}

/* ─── Blog cards ────────────────────────────────────────────────── */
.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 68rem;
	margin: 0 auto;
}
@media (min-width: 640px) {
	.blog-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.blog-card {
	background: var(--bg-elev-1);
	border: 1px solid var(--rule);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.blog-card .date {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-mute);
	margin-bottom: 1rem;
}
.blog-card h3 {
	font-size: 1.2rem;
	line-height: 1.3;
	margin-bottom: 0.75rem;
}
.blog-card p {
	color: var(--text-mute);
	font-size: 0.9rem;
	line-height: 1.6;
	flex: 1;
}
.blog-card .read {
	margin-top: 1.5rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/* ─── Experience investment tables ──────────────────────────────── */
.invest-card {
	max-width: 34rem;
	margin: 0 auto;
	background: var(--bg-elev-1);
	border: 1px solid var(--rule);
	padding: 2.5rem;
}
.invest-card h2 {
	text-align: center;
	font-size: 1.5rem;
	border-bottom: 1px solid var(--rule);
	padding-bottom: 1.25rem;
	margin-bottom: 0.5rem;
}
.invest-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--rule-faint);
}
.invest-row:last-child {
	border-bottom: 0;
}
.invest-row .hrs {
	font-size: 1.05rem;
	color: var(--text-body);
}
.invest-row .amt {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text-bright);
}
.invest-extra {
	background: var(--bg-elev-2);
	border: 1px solid var(--rule-faint);
	padding: 1rem;
	margin-top: 0.75rem;
	font-size: 0.85rem;
	color: var(--text-mute);
	line-height: 1.6;
}
.invest-cta {
	text-align: center;
	margin-top: 2rem;
}

/* ============ GALLERY ============ */
.container.narrow {
	max-width: 42rem;
}
.btn-ghost {
	background: transparent;
	color: var(--text-bright);
	border-color: var(--rule);
}
.btn-ghost:hover {
	background: var(--text-bright);
	color: #fff;
}

.section-head {
	text-align: center;
	margin-bottom: 2.75rem;
}
.section-head .eyebrow {
	display: block;
	margin-bottom: 0.85rem;
}
.section-head h2 {
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}
.section-head p {
	color: var(--text-mute);
	margin-top: 0.85rem;
	max-width: 38rem;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

/* the celebration collage — masonry */
.collage {
	columns: 3 260px;
	column-gap: 1rem;
}
.collage a {
	display: block;
	overflow: hidden;
	margin: 0 0 1rem;
	break-inside: avoid;
	border: 1px solid var(--rule-faint);
}
.collage img {
	width: 100%;
	display: block;
	transition: transform 0.5s ease;
}
.collage a:hover img {
	transform: scale(1.04);
}
@media (max-width: 640px) {
	.collage {
		columns: 2 140px;
		column-gap: 0.6rem;
	}
	.collage a {
		margin-bottom: 0.6rem;
	}
}

/* collage filter tabs (A Bit of Everything / by collection) */
.collage-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0 0 1.75rem;
	border-bottom: 1px solid var(--rule-faint);
	padding-bottom: 1.1rem;
}
.collage-tab {
	background: none;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--text-dim);
	padding: 0.5rem 1.1rem;
	transition:
		color 0.18s,
		border-color 0.18s,
		background 0.18s;
}
.collage-tab:hover {
	color: var(--text);
}
.collage-tab.is-active {
	color: #fff;
	background: var(--accent);
	border-color: var(--accent);
}
.collage a.tile {
	position: relative;
}
.collage a.tile.is-hidden {
	display: none;
}
.collage .tile-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.5rem 0.6rem;
	font-size: 0.72rem;
	color: #fff;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.collage a.tile:hover .tile-cap {
	opacity: 1;
}

/* browse by collection — cover cards */
.collection-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.25rem;
}
.collection-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 1px solid var(--rule);
	text-decoration: none;
}
.collection-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.collection-card:hover img {
	transform: scale(1.06);
}
.collection-card .cc-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.5rem;
	background: linear-gradient(
		to top,
		rgba(10, 10, 10, 0.74) 0%,
		rgba(10, 10, 10, 0.15) 45%,
		rgba(10, 10, 10, 0) 72%
	);
}
.collection-card .cc-title {
	color: #fff;
	font-family: "Playfair Display", serif;
	font-size: 1.5rem;
	line-height: 1.15;
}
.collection-card .cc-count {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: 0.4rem;
}

/* follow along — social embeds */
.social-embed {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
	max-width: 60rem;
	margin: 0 auto;
}
@media (max-width: 760px) {
	.social-embed {
		grid-template-columns: 1fr;
	}
}
.embed-card {
	border: 1px solid var(--rule);
	background: var(--bg-elev-1);
	padding: 1.25rem;
}
.embed-card h3 {
	font-size: 1.1rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.embed-frame {
	width: 100%;
	border: 0;
	min-height: 500px;
	background: #fff;
	overflow: hidden;
}
.ig-placeholder {
	border: 1px dashed var(--rule);
	padding: 2rem 1.5rem;
	text-align: center;
	color: var(--text-mute);
	min-height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.6;
}
.ig-placeholder .btn {
	margin-top: 1rem;
}

/* say something nice — qr feature */
.qr-feature {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 3rem;
	align-items: center;
	background: var(--bg);
	border: 1px solid var(--rule);
	padding: 2.75rem;
}
@media (max-width: 760px) {
	.qr-feature {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 2rem;
	}
}
.qr-feature .eyebrow {
	display: block;
	margin-bottom: 1rem;
}
.qr-feature h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: 1rem;
}
.qr-feature p {
	color: var(--text-mute);
	line-height: 1.7;
	margin-bottom: 1rem;
}
.qr-img {
	width: 100%;
	max-width: 230px;
	margin: 0 auto;
	display: block;
	border: 1px solid var(--rule);
	padding: 1rem;
	background: #fff;
}

/* collection drill-down extras */
.crumb {
	margin-bottom: 1.25rem;
}
.crumb a {
	color: var(--text-mute);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-decoration: none;
}
.crumb a:hover {
	color: var(--accent);
}
.collection-share {
	margin-top: 3rem;
	text-align: center;
	padding: 2.5rem;
	background: var(--bg-elev-1);
	border: 1px solid var(--rule);
}
.collection-share p {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	color: var(--text-dim);
	margin-bottom: 0.6rem;
}
.collection-share .share-url {
	display: block;
	font-family: "Playfair Display", serif;
	font-size: 1.2rem;
	color: var(--text-bright);
	margin-bottom: 1.5rem;
}

/* category collection pages (gallery-<slug>.html) */
.collection-block + .collection-block {
	margin-top: 3.5rem;
	padding-top: 3.5rem;
	border-top: 1px solid var(--rule-faint);
}
.collection-block .section-head {
	margin-bottom: 1.5rem;
}
.collection-share-line {
	margin-top: 1.25rem;
}
.collection-share-line a {
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
}
.collection-share-line a:hover {
	text-decoration: underline;
}
.empty-collection {
	text-align: center;
	padding: 3.5rem 2rem;
	background: var(--bg-elev-1);
	border: 1px solid var(--rule);
}
.empty-collection p {
	color: var(--text-mute);
	max-width: 34rem;
	margin: 0 auto 1.5rem;
	line-height: 1.7;
}

/* say-something-nice form */
.nice-form {
	max-width: 34rem;
	margin: 0 auto;
	background: var(--bg-elev-1);
	border: 1px solid var(--rule);
	padding: 2.25rem;
}
.nice-form .field {
	margin-bottom: 1.25rem;
}
.nice-form label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-bottom: 0.5rem;
	color: var(--text-bright);
}
.nice-form input,
.nice-form textarea {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--rule);
	background: var(--bg);
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--text-bright);
}
.nice-form input:focus,
.nice-form textarea:focus {
	outline: none;
	border-color: var(--accent);
}
.nice-form .star-row {
	font-size: 1.6rem;
	color: var(--accent);
	letter-spacing: 0.2rem;
}
.nice-form .btn {
	width: 100%;
	margin-top: 0.5rem;
}

.note-inline {
	font-size: 0.85rem;
	color: var(--text-mute);
	font-style: italic;
}
.note-inline a {
	color: var(--accent);
	text-decoration: none;
}
.note-inline a:hover {
	text-decoration: underline;
}

/* ===================================================================
   WordPress theme additions (forms wiring, blog, prose, embeds)
   =================================================================== */

/* form status message states */
.form-msg {
	display: none;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--accent);
	background: var(--bg-elev-1);
	color: var(--text-bright);
	font-size: 0.95rem;
	line-height: 1.6;
}
.form-msg.show {
	display: block;
}
.form-msg.is-error {
	border-color: #c0392b;
	color: #c0392b;
}

/* interactive star rating */
.nice-form .star-row {
	display: flex;
	gap: 0.15rem;
}
.star-row .star {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 1.9rem;
	line-height: 1;
	color: var(--rule);
	padding: 0 0.1rem;
	transition: color 0.15s;
}
.star-row .star:hover,
.star-row .star.on {
	color: var(--accent);
}

/* container width helper (used by say-something-nice) */
.container.narrow {
	max-width: 40rem;
}

/* event embed (external video) */
.event-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	break-inside: avoid;
	margin: 0 0 1rem;
	border: 1px solid var(--rule-faint);
}
.event-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* generic page prose */
.rich-text {
	color: var(--text-mute);
	line-height: 1.8;
}
.rich-text h2,
.rich-text h3 {
	color: var(--text-bright);
	margin: 2rem 0 0.75rem;
	font-family: "Playfair Display", serif;
}
.rich-text p {
	margin-bottom: 1.1rem;
}
.rich-text a {
	color: var(--accent);
}
.rich-text img {
	height: auto;
}

/* blog */
.blog-list {
	display: grid;
	gap: 2.5rem;
	max-width: 50rem;
	margin: 0 auto;
}
.blog-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	border-bottom: 1px solid var(--rule-faint);
	padding-bottom: 2.5rem;
}
@media (min-width: 680px) {
	.blog-card {
		grid-template-columns: 260px 1fr;
		gap: 1.75rem;
	}
}
.blog-thumb {
	display: block;
	overflow: hidden;
	border: 1px solid var(--rule-faint);
}
.blog-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	display: block;
	transition: transform 0.5s;
}
.blog-thumb:hover img {
	transform: scale(1.04);
}
.blog-card-body h2 {
	font-size: 1.5rem;
	margin: 0.4rem 0 0.6rem;
	line-height: 1.2;
}
.blog-card-body h2 a {
	color: var(--text-bright);
	text-decoration: none;
}
.blog-card-body h2 a:hover {
	color: var(--accent);
}
.blog-card-body p {
	color: var(--text-mute);
	line-height: 1.7;
	margin-bottom: 0.75rem;
}
.blog-more {
	color: var(--accent);
	text-decoration: none;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}
.blog-pagination {
	margin-top: 3rem;
	text-align: center;
}
.blog-pagination .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	margin: 0 0.15rem;
	border: 1px solid var(--rule);
	color: var(--text-mute);
	text-decoration: none;
}
.blog-pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.post-hero-img {
	margin-bottom: 2rem;
	border: 1px solid var(--rule-faint);
}
.post-hero-img img {
	width: 100%;
	height: auto;
	display: block;
}

/* ════════════════════════════════════════════════════════════════════
   BEHIND THE BOOTH — editorial blog + the "Kept" signature series  v0.2
   ════════════════════════════════════════════════════════════════════ */

.blog-hero .accent-word {
	color: var(--accent);
	font-style: italic;
}
.blog-page .section {
	padding-top: 0;
}

/* ── The "Kept" badge (masthead seal) ─────────────────────────────── */
.kept-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	margin: 0 0 1.1rem;
	text-align: center;
}
.kept-badge-word {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-weight: 600;
	font-size: 1.45rem;
	line-height: 1;
	color: var(--accent);
	position: relative;
	padding: 0 1.1rem;
}
.kept-badge-word::before,
.kept-badge-word::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0.7rem;
	height: 1px;
	background: var(--accent);
	opacity: 0.7;
}
.kept-badge-word::before {
	left: -0.15rem;
}
.kept-badge-word::after {
	right: -0.15rem;
}
.kept-badge-sub {
	font-family: "Manrope", sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.post-series {
	display: inline-block;
	margin-bottom: 0.4rem;
}
.post-series:hover .kept-badge-word {
	color: var(--accent-soft);
}

/* corner flag on Kept images */
.kept-flag {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: var(--accent);
	color: #fff;
	font-family: "Manrope", sans-serif;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 0.4rem 0.85rem;
}

/* ── Category tags ────────────────────────────────────────────────── */
.blog-tag,
.blog-tag-sm {
	display: inline-block;
	font-family: "Manrope", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
}
.blog-tag {
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	margin-bottom: 1rem;
}
.blog-tag-sm {
	font-size: 0.64rem;
	letter-spacing: 0.18em;
	margin-bottom: 0.6rem;
	color: var(--text-mute);
}
.blog-tag:hover {
	color: var(--accent-soft);
}

/* ── Lead story ───────────────────────────────────────────────────── */
.blog-lead {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	max-width: 64rem;
	margin: 0 auto;
	align-items: center;
}
@media (min-width: 860px) {
	.blog-lead {
		grid-template-columns: 1.15fr 1fr;
		gap: 3rem;
	}
	.blog-lead.no-img {
		grid-template-columns: 1fr;
		max-width: 46rem;
		text-align: center;
	}
}
.blog-lead-img {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--rule-faint);
}
.blog-lead-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	display: block;
	transition: transform 0.7s ease;
}
.blog-lead-img:hover img {
	transform: scale(1.04);
}
.blog-lead-body .kept-badge {
	align-items: flex-start;
}
.blog-lead.no-img .kept-badge {
	align-items: center;
}
.blog-lead-title {
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 1.1;
	margin: 0 0 1rem;
}
.blog-lead-title a {
	color: var(--text-bright);
	text-decoration: none;
	transition: color 0.25s;
}
.blog-lead-title a:hover {
	color: var(--accent);
}
.blog-lead-excerpt {
	color: var(--text-mute);
	font-size: 1.05rem;
	line-height: 1.75;
	margin-bottom: 1.5rem;
}
.blog-meta {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.blog-lead.no-img .blog-meta {
	justify-content: center;
}
.blog-meta-date {
	font-family: "Manrope", sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-dim);
}

/* ── Divider ──────────────────────────────────────────────────────── */
.blog-divide {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	max-width: 72rem;
	margin: 4.5rem auto 2.5rem;
}
.blog-divide::before,
.blog-divide::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rule-faint);
}
.blog-divide .section-label {
	margin: 0;
	white-space: nowrap;
}
.blog-divide .section-label::before {
	display: none;
}

/* ── Card grid ────────────────────────────────────────────────────── */
.post-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem 2rem;
	max-width: 72rem;
	margin: 0 auto;
}
@media (min-width: 620px) {
	.post-cards {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 980px) {
	.post-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}
.post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
}
.post-card-img {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--rule-faint);
}
.post-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	display: block;
	transition: transform 0.7s ease;
}
.post-card-img:hover img {
	transform: scale(1.05);
}
.post-card-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background: linear-gradient(160deg, var(--bg-elev-1), var(--bg-elev-2));
	border: 1px solid var(--rule-faint);
}
.post-card-mark span {
	font-family: "Playfair Display", serif;
	font-size: 6rem;
	line-height: 0;
	color: var(--accent);
	opacity: 0.35;
	margin-top: 1.5rem;
}
.post-card-body {
	padding: 1.25rem 0 0;
}
.post-card-title {
	font-size: 1.3rem;
	line-height: 1.22;
	margin: 0 0 0.6rem;
}
.post-card-title a {
	color: var(--text-bright);
	text-decoration: none;
	transition: color 0.25s;
}
.post-card-title a:hover {
	color: var(--accent);
}
.post-card-excerpt {
	color: var(--text-mute);
	font-size: 0.92rem;
	line-height: 1.65;
	margin: 0 0 0.9rem;
}

/* ════ Single post — the long read ════════════════════════════════ */
.post-head {
	padding: 4rem 0 0;
	text-align: center;
}
@media (min-width: 768px) {
	.post-head {
		padding: 5rem 0 0;
	}
}
.post-head .crumb {
	margin-bottom: 1.75rem;
}
.post-head .kept-badge,
.post-head .post-series {
	margin-left: auto;
	margin-right: auto;
}
.post-head .blog-tag {
	display: inline-block;
}
.post-title {
	font-size: clamp(2rem, 4.4vw, 3.25rem);
	line-height: 1.12;
	margin: 0.5rem auto 1.25rem;
	max-width: 18ch;
}
.post-byline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	font-family: "Manrope", sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.post-byline-name {
	color: var(--accent);
}
.post-byline-dot {
	opacity: 0.5;
}
.post-measure {
	max-width: var(--measure);
}
.single-post .post-hero-img {
	margin: 2.5rem auto 0;
	border: 1px solid var(--rule-faint);
}

/* prose */
.post-prose {
	color: var(--text-body);
	font-size: 1.12rem;
	line-height: 1.85;
	max-width: 42rem;
	margin: 0 auto;
}
.post-prose > p {
	margin: 0 0 1.4rem;
}
.post-prose > p:first-of-type {
	font-size: 1.2rem;
	color: var(--text-body);
}
.post-prose > p:first-of-type::first-letter {
	font-family: "Playfair Display", serif;
	font-weight: 600;
	font-size: 3.7em;
	line-height: 0.78;
	float: left;
	margin: 0.04em 0.14em 0 0;
	color: var(--accent);
}
.post-prose h2 {
	font-family: "Playfair Display", serif;
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	line-height: 1.2;
	color: var(--text-bright);
	margin: 2.8rem 0 1rem;
	padding-top: 0.4rem;
}
.post-prose h2::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	background: var(--accent);
	margin-bottom: 1rem;
}
.post-prose h3 {
	font-family: "Playfair Display", serif;
	font-size: 1.3rem;
	color: var(--text-bright);
	margin: 2rem 0 0.7rem;
}
.post-prose a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.post-prose a:hover {
	color: var(--accent-soft);
}
.post-prose strong {
	color: var(--text-bright);
	font-weight: 600;
}
.post-prose em {
	font-style: italic;
}
.post-prose ul {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}
.post-prose ul li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.7rem;
	line-height: 1.7;
}
.post-prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	background: var(--accent);
	border-radius: 50%;
}
.post-prose blockquote {
	margin: 2rem 0;
	padding: 0.4rem 0 0.4rem 1.6rem;
	border-left: 2px solid var(--accent);
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 1.3rem;
	line-height: 1.5;
	color: var(--text-bright);
}

/* signature */
.post-sign {
	max-width: 42rem;
	margin: 3.25rem auto 0;
	text-align: left;
}
.post-sign .rule-accent {
	margin: 0 0 1.6rem;
}
.post-sign-cheers {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 1.5rem;
	color: var(--text-bright);
	margin: 0;
}
.post-sign-name {
	font-family: "Playfair Display", serif;
	font-size: 1.6rem;
	color: var(--accent);
	margin: 0.1rem 0 0.35rem;
}
.post-sign-role {
	font-family: "Manrope", sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin: 0;
}

/* end CTA */
.post-cta {
	max-width: 42rem;
	margin: 3.5rem auto 0;
	padding: 2.5rem;
	background: var(--bg-elev-1);
	border: 1px solid var(--rule-faint);
	text-align: center;
}
.post-cta-text {
	font-family: "Playfair Display", serif;
	font-size: 1.45rem;
	color: var(--text-bright);
	margin: 0 0 1.5rem;
}
.post-cta .btn {
	margin-bottom: 1.25rem;
}
.post-cta-back {
	display: block;
	font-family: "Manrope", sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--text-mute);
	text-decoration: none;
}
.post-cta-back:hover {
	color: var(--accent);
}

/* ── "Cheers" champagne mark — centered background, never clips ────── */
.post-cards .post-card {
	align-self: start;
} /* don't stretch cards to row height (keeps marks 4:5) */
.post-card-mark {
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	background-image:
		url("img/btb-glasses-pad.png"),
		linear-gradient(160deg, var(--bg-elev-1), var(--bg-elev-2));
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: contain, cover;
}

/* ── Blog masthead artwork (Behind the Booth) ────────────────────── */
.blog-masthead {
	margin: 0.25rem auto 0;
	max-width: 240px;
	line-height: 0;
}
.blog-masthead img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
@media (min-width: 768px) {
	.blog-masthead {
		max-width: 255px;
	}
}

/* ── Portrait (vertical phone) video players ─────────────────────── */
.video-grid:has(.video-card-portrait) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3rem;
	align-items: flex-start;
}
.video-card-portrait {
	width: 100%;
	max-width: 340px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: none;
	border: 0;
	box-shadow: none;
	aspect-ratio: auto;
	overflow: visible;
}
/* Real ornate frame overlaid on top; the video sits inside its transparent opening (no distortion) */
.video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 582 / 896;
}
.video-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: url("img/gold-frame.webp") center / 100% 100% no-repeat;
	filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.4));
}
.video-window {
	position: absolute;
	top: 15.2%;
	left: 21.8%;
	right: 21.8%;
	bottom: 15.2%;
	overflow: hidden;
	background: #000;
	cursor: pointer;
	z-index: 1;
}
.video-card.playing .video-window {
	cursor: pointer;
}
.video-window .video-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
}
/* Pre-play cover: small glasses + description, blocks the video, slides away on play */
.video-cover {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.7rem;
	text-align: center;
	background: linear-gradient(160deg, #fbfaf7, #efe9dd);
	transition:
		opacity 0.5s ease,
		transform 0.5s ease;
}
.cover-glasses {
	display: block;
	width: 44%;
	aspect-ratio: 1 / 1;
	background: url("img/btb-glasses-pad.png") center / contain no-repeat;
}
.cover-title {
	font-family: "Playfair Display", serif;
	font-size: 1rem;
	color: var(--text-bright);
	margin: 0.1rem 0 0;
	line-height: 1.12;
}
.cover-desc {
	font-family: "Manrope", sans-serif;
	font-size: 0.72rem;
	color: var(--text-mute);
	line-height: 1.45;
	max-width: 22ch;
	margin: 0;
}
.video-card.playing .video-cover {
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
}
/* Play button BELOW the frame */
.video-card-portrait .video-play {
	position: static;
	inset: auto;
	margin-top: 1.4rem;
	width: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	border: 0;
	border-radius: 2px;
	padding: 0.7rem 1.6rem;
	background: var(--accent);
	color: #fff;
	font-family: "Manrope", sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background 0.25s;
}
.video-card-portrait .video-play:hover {
	background: var(--accent-soft);
}
.video-card-portrait .video-play .video-play-ic {
	display: inline-flex;
}
.video-card.playing .video-play {
	display: none;
}

/* ── Post engagement bar: Love + Share ───────────────────────────── */
.post-engage {
	max-width: 42rem;
	margin: 3rem auto 0;
	padding: 1.25rem 0;
	border-top: 1px solid var(--rule-faint);
	border-bottom: 1px solid var(--rule-faint);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.like-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: none;
	border: 1px solid var(--rule);
	padding: 0.55rem 1.1rem;
	cursor: pointer;
	color: var(--text-mute);
	font-family: "Manrope", sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: all 0.25s;
}
.like-btn svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	transition: all 0.25s;
}
.like-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.like-btn .like-count {
	font-family: "Playfair Display", serif;
	font-size: 1rem;
	letter-spacing: 0;
	color: var(--text-bright);
}
.like-btn.liked {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(171, 144, 73, 0.06);
}
.like-btn.liked svg {
	fill: var(--accent);
	stroke: var(--accent);
}
.like-btn.liked .like-count {
	color: var(--accent);
}
.share-row {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.share-label {
	font-family: "Manrope", sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin-right: 0.4rem;
}
.share-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid var(--rule);
	background: none;
	color: var(--text-mute);
	cursor: pointer;
	transition: all 0.25s;
	padding: 0;
}
.share-ico svg {
	fill: currentColor;
}
.share-ico svg[stroke] {
	fill: none;
}
.share-ico:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(171, 144, 73, 0.06);
}
.share-ico.copied {
	border-color: var(--accent);
	color: var(--accent);
}
.share-ico.copied::after {
	content: "Copied";
	position: absolute;
	margin-top: -3rem;
	font-family: "Manrope", sans-serif;
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	background: #fff;
	border: 1px solid var(--rule-faint);
	padding: 0.2rem 0.5rem;
	white-space: nowrap;
}
.share-ico {
	position: relative;
}

/* ── Home video cards: lazy click-to-play ────────────────────────── */
.video-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
	display: block;
	border: 0;
}
.video-card .video-play {
	border: 0;
	cursor: pointer;
}
.video-card.playing .video-play,
.video-card.playing .video-caption {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
.video-card.playing .video-el {
	z-index: 3;
}
.video-card.playing {
	cursor: default;
}