/**
 * Long Beach Pride — homepage refinements
 * (c) HAUS XXIV, LLC · Licensed to Long Beach Pride
 *
 * Loads after home.generated.css. Hand-tuned rules that sit on top of the
 * extracted homepage cascade; edit here, never in the generated file.
 */

/* ==========================================================================
   Statement letter
   ========================================================================== */

/* The letter reads left-aligned in a wider measure, centered under the headline */
.since .st-p {
	max-width: min(920px, 100%) !important;
	text-align: left;
	hyphens: manual;
	-webkit-hyphens: manual;
}
html body .since .st-p > p + p { margin-top: 20px !important; }

/* ==========================================================================
   LBCPride365 — month drawers
   ========================================================================== */

/* Month labels: Zooja script, light weight, sized to read at a glance */
.ym-s {
	font-family: var(--accent), var(--serif);
	font-style: normal;
	font-weight: 300;
	font-synthesis: none;
	font-size: clamp(34px, 2.8vw, 48px);
	line-height: 1.05;
	letter-spacing: 0;
	padding-block: 4px;
}

/* Drawer frame: month number at the top, year at the foot */
.ym-tab {
	padding: 22px 0 24px;
	gap: 18px;
}
.ym-num,
.ym-y {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}
.ym-y {
	margin-top: auto;
}

/*
 * Depth: closed drawers sit above the open panel and cast a soft shadow onto
 * it, stacking inward from both edges. Drawers before the open month fall to
 * the right, drawers after it fall to the left. --ymz is the drawer's place
 * in the row (set in the component markup).
 */
.ym {
	transition: flex-grow .65s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
}
.ym.on {
	z-index: 0;
}
.ym:has(~ .ym.on) {
	z-index: calc(100 - var(--ymz, 0));
	box-shadow: inset -1px 0 0 rgba(255, 255, 255, .18), 14px 0 28px -6px rgba(8, 8, 10, .42), 4px 0 8px -2px rgba(8, 8, 10, .24);
}
.ym.on ~ .ym {
	z-index: calc(100 + var(--ymz, 0));
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18), -14px 0 28px -6px rgba(8, 8, 10, .42), -4px 0 8px -2px rgba(8, 8, 10, .24);
}

@media (max-width: 760px) {
	.ym-s {
		font-size: 32px;
	}

	/* One line per drawer: number, month, year */
	.ym-tab {
		display: grid;
		grid-template-columns: 3ch 1fr 3ch;
		align-items: center;
		gap: 12px;
		padding: 0 20px;
	}
	.ym-num {
		text-align: left;
	}
	.ym-y {
		margin: 0;
		text-align: right;
	}

	/* Stacked drawers: the same depth, falling down and up onto the open month */
	.ym:has(~ .ym.on) {
		box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .18), 0 12px 24px -6px rgba(8, 8, 10, .42), 0 3px 8px -2px rgba(8, 8, 10, .24);
	}
	.ym.on ~ .ym {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 -12px 24px -6px rgba(8, 8, 10, .42), 0 -3px 8px -2px rgba(8, 8, 10, .24);
	}
}

/* ==========================================================================
   Community Calendar — cards without a host photo
   ========================================================================== */

.evc-ph:empty {
	display: block;
	background:
		url("../images/brand/LBPride-logo-stacked-white.webp") center / 34% auto no-repeat,
		radial-gradient(120% 90% at 85% 0%, rgba(155, 48, 255, .55), transparent 60%),
		radial-gradient(110% 80% at 0% 100%, rgba(255, 122, 0, .38), transparent 55%),
		var(--night, #120E28);
}


/* ==========================================================================
   Phones
   Designed for the thumb, not shrunk from desktop: swipeable month cards,
   a chip row of communities, full-size touch targets and calmer type.
   ========================================================================== */

.ym-pager { display: none; }

@media (max-width: 760px) {

	/* Small print floor: nothing under 12px on a phone */
	.ym-k,
	.evc-host,
	.cv-flag span,
	.trust small,
	.trust-sec .trust b small { font-size: 12px !important; }
	.evc-cal .m { font-size: 11.5px; }
	.trust small { letter-spacing: .02em; }

	/* LBCPride365: a swipeable deck of month cards, this month first ---- */
	.ym-row {
		flex-direction: row;
		gap: 12px;
		margin: 0;
		padding: 4px var(--gut) 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gut);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.ym-row::-webkit-scrollbar { display: none; }
	.ym,
	.ym.on {
		flex: 0 0 min(84%, 360px);
		min-height: min(560px, 74svh);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		border-radius: 26px;
		border-top: 6px solid var(--ymc);
		scroll-snap-align: start;
		box-shadow: 0 18px 40px -22px rgba(8, 8, 10, .55) !important;
		z-index: auto !important;
	}
	.ym > img,
	.ym.on > img { opacity: 1; transform: none; filter: none; }
	.ym::after,
	.ym.on::after { background: linear-gradient(0deg, rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .8) 42%, rgba(8, 8, 10, .25) 72%, rgba(8, 8, 10, .1) 100%); }
	.ym::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 110px; background: linear-gradient(180deg, rgba(8, 8, 10, .55), rgba(8, 8, 10, 0)); pointer-events: none; }
	.ym .ym-tab,
	.ym.on .ym-tab {
		display: flex !important;
		position: absolute;
		inset: 0 0 auto;
		align-items: center;
		justify-content: space-between;
		min-height: 0;
		padding: 18px 20px;
		color: #fff;
		opacity: 1;
		pointer-events: none;
	}
	.ym-tab .ym-s { font-size: 40px; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); order: 2; flex: 1; text-align: left; margin-left: 10px; }
	.ym-tab .ym-num { order: 1; padding: 6px 9px; border-radius: 999px; background: var(--ymc); color: var(--ymi); font-size: 13px; }
	.ym-tab .ym-y { order: 3; font-size: 14px; opacity: .85; }
	.ym-b,
	.ym.on .ym-b {
		display: block;
		position: relative;
		min-width: 0;
		padding: 0 20px 20px;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.ym-t { font-size: 26px; margin-top: 6px; }
	.ym-b li a { padding: 14px 4px; margin-inline: -4px; }
	.ym-b .go { min-height: 24px; }

	.ym-pager {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 16px var(--gut) 0;
		font-size: 13px;
		font-weight: 600;
		color: var(--ink-3, rgba(12, 12, 14, .64));
	}
	.ym-track { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(12, 12, 14, .1); overflow: hidden; }
	.ym-track i { position: absolute; inset: 0 auto 0 0; width: 25%; border-radius: 3px; background: linear-gradient(90deg, #E40303, #FF8C00, #FFED00, #008026, #004DFF, #750787); transition: transform .12s linear; }

	/* Statement: the line and the handwriting get room to breathe -------- */
	.since .stand-h { font-size: clamp(30px, 8.6vw, 40px) !important; line-height: 1 !important; text-wrap: balance; }
	html .since .stand-h .ln.em.hw { margin-top: 26px !important; }
}

@media (max-width: 900px) {


	/* Community Calendar: full-size card buttons ------------------------ */
	.evc-more { min-height: 44px; padding-inline: 16px; }
}


/* ==========================================================================
   Hero — the script line sits tight under the first line
   ========================================================================== */

#opening .d-hero .ln + .ln { margin-top: -.2em; }


/* ==========================================================================
   Trust bar — four stats, number large and centered above its label
   ========================================================================== */

html body .trust-sec .trust { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html body .trust-sec .trust li {
	flex-direction: column;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px;
	padding: clamp(18px, 1.6vw, 26px) 12px !important;
	text-align: center !important;
}
html body .trust-sec .trust li + li { box-shadow: inset 1px 0 0 rgba(12, 12, 14, .07); }
html body .trust-sec .trust li:last-child { grid-column: auto; }
html body .trust-sec .trust b {
	justify-content: center !important;
	font-size: clamp(30px, 2.6vw, 44px) !important;
}
html body .trust-sec .trust li > span {
	margin: 0 !important;
	text-align: center !important;
	white-space: normal !important;
	font-size: 13px !important;
	letter-spacing: .02em;
}

@media (max-width: 700px) {
	html body .trust-sec .trust { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html body .trust-sec .trust li { padding: 18px 10px !important; }
	html body .trust-sec .trust li:nth-child(odd) { box-shadow: none; }
	html body .trust-sec .trust li:nth-child(n+3) { border-top: 1px solid rgba(12, 12, 14, .06); }
	html body .trust-sec .trust b { font-size: 32px !important; }
}


/* ==========================================================================
   Statement — the white prism treatment (as on the signup band)
   ========================================================================== */

.since {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #FBFAF8;
}
.since::before {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: -2;
	background:
		radial-gradient(38% 46% at 18% 30%, rgba(255, 140, 0, .22), transparent 70%),
		radial-gradient(34% 44% at 42% 72%, rgba(255, 237, 0, .20), transparent 70%),
		radial-gradient(36% 48% at 62% 28%, rgba(0, 128, 38, .14), transparent 70%),
		radial-gradient(38% 46% at 82% 66%, rgba(0, 77, 255, .16), transparent 70%),
		radial-gradient(30% 40% at 94% 20%, rgba(117, 7, 135, .16), transparent 70%),
		radial-gradient(30% 40% at 6% 80%, rgba(228, 3, 3, .14), transparent 70%);
	filter: blur(40px) saturate(1.2);
	animation: prism 26s ease-in-out infinite alternate;
	pointer-events: none;
}
.since::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, 0) 66%);
	mix-blend-mode: soft-light;
	pointer-events: none;
}
@keyframes prism {
	0% { transform: translate3d(-3%, -2%, 0) rotate(0); }
	100% { transform: translate3d(3%, 2%, 0) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
	.since::before { animation: none; }
}
.motion-off .since::before { animation: none; }
/* The wash fades out at the foot so the letter melts into the communities
   section below (both sit on the same warm white) */
/* (::before overhangs the section by 30% each way, so its fade ends at 78%) */
.since::before {
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 78%);
	mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 78%);
}
.since::after {
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}


/* ==========================================================================
   From the Board — Executive Committee portraits, compact notices
   ========================================================================== */

.bd-team {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	color: var(--ink);
	text-decoration: none;
}
.bd-faces { display: flex; }
.bd-face {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin-left: -12px;
	border-radius: 50%;
	border: 3px solid #fff;
	overflow: hidden;
	background: #EDE9FE;
	color: #5B21B6;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 2px 8px -2px rgba(12, 12, 14, .18);
	transition: transform .4s var(--ease);
}
.bd-face:first-child { margin-left: 0; }
.bd-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bd-team:hover .bd-face { transform: translateY(-2px); }
.bd-team:hover .bd-face:nth-child(even) { transform: translateY(2px); }
.bd-team-t {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.bd-team:focus-visible { outline: 2px solid #6D28D9; outline-offset: 4px; border-radius: 999px; }

/* Breathing room between the sponsor marquee and the board section */
html body section#board { padding-top: clamp(96px, 9vw, 152px) !important; }
@media (max-width: 700px) {
	html body section#board { padding-top: 72px !important; }
}

/* Notices: no arrow, date chip level with the headline, two-line excerpt */
html body .bd-list .bn {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start !important;
	gap: 16px;
	padding: 18px 20px;
	flex: 0 1 auto;
}
html body .bd-list { justify-content: space-between; gap: 10px; }
.bn-dt {
	width: 54px;
	height: 58px;
	margin-top: 18px; /* the tag line above the headline */
}
.bn-dt b { font-size: 26px; }
html body .bn h4 { margin-bottom: 4px; }
html body .bn p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

html body .bd-head h2 i { margin-right: .14em; }

@media (max-width: 700px) {
	.bd-face { width: 38px; height: 38px; margin-left: -10px; font-size: 12px; }
	html body .bd-list .bn { padding: 16px; gap: 14px; }
}


/* ==========================================================================
   Socials — room between the headline, text and follow row
   ========================================================================== */

html body .so-panel { gap: 0 !important; }
html body .so-panel h2 { line-height: 1.02; margin-bottom: 22px !important; }
html body .so-panel h2 i { display: inline-block; margin-top: .06em; }
html body .so-panel > p:not(.so-follow) { margin: 0 !important; line-height: 1.6; }
html body .so-panel .so-follow { margin: 28px 0 12px !important; }
html body .so-panel .so-brand { margin: 0; }

@media (max-width: 700px) {
	html body .so-panel { padding-bottom: 40px !important; }
}


/* ==========================================================================
   Communities — "Our Community." tucks up under "Our Shore."
   ========================================================================== */

html body .cv-h .cv-h2 { line-height: .82; margin-top: -.06em; }


/* ==========================================================================
   Communities — light: warm white, the photo as a white frosted wash,
   ink type, a white glass story card
   ========================================================================== */

html body .cv { background: #FBFAF8; color: var(--ink); }
html body .cv-frost img { filter: blur(90px) saturate(1.25) brightness(1.08); opacity: 0; }
html body .cv-frost img.on { opacity: .55; }
html body .cv-stage::after {
	background:
		linear-gradient(180deg, #FBFAF8 0, rgba(251, 250, 248, 0) 180px),
		linear-gradient(90deg, rgba(251, 250, 248, .94) 0%, rgba(251, 250, 248, .82) 46%, rgba(251, 250, 248, .6) 100%),
		radial-gradient(70% 60% at 80% 40%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
}

/* Headline: ink, with the script line in brand purple */
html body .cv-h { color: var(--ink); }
html body #cv-h i,
html.has-zooja body #cv-h i { color: #6D28D9 !important; text-shadow: none !important; }

/* The list: quiet ink names, the active one in its flag colors */
html body .cv-list button { color: rgba(12, 12, 14, .2); }
html body .cv-list button:hover .nm { color: rgba(12, 12, 14, .5); }
html body .cv-list li.on .n { color: #6D28D9; }
/* A hairline keeps the white stripes of each flag legible on white */
html body .cv-list li.on .nm { -webkit-text-stroke: 1px rgba(12, 12, 14, .16); filter: drop-shadow(0 1px 1px rgba(12, 12, 14, .12)); }
html body .cv-list button:focus-visible { outline-color: #6D28D9; }

/* Photo frame and the white glass story card */
html body .cv-media {
	background: #fff;
	box-shadow: 0 22px 44px -26px rgba(76, 29, 149, .35), 0 0 0 1px rgba(12, 12, 14, .06);
}
html body .cv-copy {
	background: rgba(255, 255, 255, .78);
	-webkit-backdrop-filter: blur(22px) saturate(1.6);
	backdrop-filter: blur(22px) saturate(1.6);
	box-shadow: 0 12px 40px -18px rgba(12, 12, 14, .35), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
html body .cv-flag { color: var(--ink-2); }
html body .cv-flag svg { box-shadow: 0 0 0 1px rgba(12, 12, 14, .12); }
html body .cv-copy h3 { color: #6D28D9; }
html body .cv-copy p { color: var(--ink); }

/* Progress rail and the closing card */
html body .cv-bar { background: rgba(12, 12, 14, .08); }
html body .cv-more { color: var(--ink); border-top-color: rgba(12, 12, 14, .12); }
html body .cv-more-p { color: var(--ink-2); }
html body .cv-more-b { color: #6D28D9; }
html body .cv-more:focus-visible { outline-color: #6D28D9; }
html body .cv .cv-more-t,
html.has-zooja body .cv .cv-more-t { color: var(--ink) !important; }

@media (max-width: 700px) {
	html body .cv-list button { background: rgba(12, 12, 14, .05); box-shadow: inset 0 0 0 1px rgba(12, 12, 14, .08); }
	html body .cv-list .nm,
	html body .cv-list li .nm { color: var(--ink) !important; opacity: .7; }
	html body .cv-list li.on button { background: #fff; box-shadow: 0 6px 18px -8px rgba(76, 29, 149, .45), inset 0 0 0 1px rgba(109, 40, 217, .25); }
	html body .cv-list li.on .nm { color: #4C1D95 !important; opacity: 1; filter: none; -webkit-text-stroke: 0; }
}



/* ==========================================================================
   One continuous light field: the letter, "Our Shore. Our Community." and
   #LBCPride365 share a single prism wash. Each section carries the same
   wash over the same base color, so the joins disappear. It scrolls with
   the page: pinning it to the window (background-attachment: fixed) made
   Chrome repaint on every scroll frame and tear against the header.
   ========================================================================== */

:root {
	--lbp-field: #FBFAF8;
	--lbp-wash:
		radial-gradient(42% 38% at 14% 26%, rgba(255, 140, 0, .13), transparent 70%),
		radial-gradient(38% 36% at 40% 74%, rgba(255, 214, 10, .12), transparent 70%),
		radial-gradient(40% 40% at 62% 30%, rgba(34, 197, 94, .08), transparent 70%),
		radial-gradient(42% 38% at 84% 64%, rgba(59, 130, 246, .11), transparent 70%),
		radial-gradient(34% 34% at 90% 20%, rgba(139, 92, 246, .12), transparent 70%),
		radial-gradient(34% 34% at 8% 80%, rgba(236, 72, 153, .10), transparent 70%);
}

html body .since,
html body .cv,
html body #pride365 {
	background-color: var(--lbp-field) !important;
	background-image: var(--lbp-wash) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	background-attachment: scroll !important;
}

/* The letter's own animated prism and white sheen give way to the field */
html body .since::before,
html body .since::after { display: none !important; }

/* Communities: no tinted overlay; the photo's frost is a whisper of color
   that fades out at the top and bottom edges */
html body .cv-stage { background: transparent; }
html body .cv-stage::after { display: none !important; }
html body .cv-frost {
	position: absolute !important;
	inset: 0 !important;
	height: auto !important;
	transform: none !important;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
html body .cv-frost img.on { opacity: .2; }


/* ==========================================================================
   Communities — sized to the window: the whole section fits below the
   header, with type and photo scaled down to match
   ========================================================================== */

@media (min-width: 701px) {
	html body .cv-stage {
		height: calc(100vh - var(--nav-h)) !important;
		height: calc(100svh - var(--nav-h)) !important;
		min-height: 560px !important;
		max-height: 820px !important;
	}
	html body .cv { scroll-margin-top: var(--nav-h); }
	html body .cv-in {
		padding: clamp(36px, 5vh, 64px) var(--gut) clamp(36px, 5vh, 64px) calc(var(--gut) + 18px) !important;
		grid-template-columns: minmax(0, 36fr) minmax(0, 64fr) !important;
		column-gap: clamp(48px, 5vw, 96px) !important;
		max-width: 1500px;
		margin-inline: auto;
	}
	html body .cv-h { font-size: clamp(26px, 2.3vw, 40px) !important; }
	html body .cv-win { margin-top: clamp(14px, 2.2vh, 28px) !important; }
	html body .cv-list .nm { font-size: clamp(26px, 2.6vw, 46px) !important; }
	html body .cv-list .n { width: 2.4em; }
	html body .cv-copy p { font-size: clamp(16px, 1.15vw, 20px) !important; }
	html body .cv-bar {
		top: clamp(36px, 5vh, 64px) !important;
		bottom: clamp(36px, 5vh, 64px) !important;
	}
}


/* ==========================================================================
   Sponsors — room between the headline row and the logo marquee
   ========================================================================== */

html body .pa-sec .lb { margin-top: clamp(48px, 5vw, 88px) !important; }


/* ==========================================================================
   Community Calendar — the arched dial
   ========================================================================== */

html body #events .evc-wrap.arc-on {
	position: relative;
	width: 100vw;
	margin: clamp(28px, 3vw, 48px) 0 0 calc(50% - 50vw) !important;
	padding-top: clamp(14px, 1.4vw, 22px); /* a little more air under the heading */
	overflow: hidden;
	overflow: clip;
}
html body #events .evc-wrap.arc-on .evc-grid {
	position: relative;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	scroll-snap-type: none !important;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--arc-h, 560px) - 70px), transparent calc(var(--arc-h, 560px) + 36px));
	mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--arc-h, 560px) - 70px), transparent calc(var(--arc-h, 560px) + 36px));
}
html body #events .evc-wrap.arc-on .evc-grid.drag { cursor: grabbing; }
html body #events .evc-wrap.arc-on .evc-grid:focus-visible { outline: none; }
html body #events .evc-wrap.arc-on .evc-grid:focus-visible .ev.is-center .evc { box-shadow: 0 0 0 3px #6D28D9, 0 30px 60px -28px rgba(12, 12, 14, .45); }

html body #events .evc-wrap.arc-on .evc-grid > .ev {
	position: absolute !important;
	top: 0;
	left: 50%;
	width: var(--card-w, 300px) !important;
	flex: none !important;
	margin: 0 0 0 calc(var(--card-w, 300px) / -2) !important;
	transform-origin: 50% 50%;
	will-change: transform;
}
html body #events .evc-wrap.arc-on .ev .evc {
	height: 100%;
	transition: box-shadow .5s var(--ease), filter .5s var(--ease);
	filter: saturate(calc(1 - var(--side, 0) * .35)) brightness(calc(1 - var(--side, 0) * .06));
}
html body #events .evc-wrap.arc-on .ev.is-center .evc {
	box-shadow: 0 0 0 1px rgba(109, 40, 217, .16), 0 26px 50px -26px rgba(76, 29, 149, .5);
}
html body #events .evc-wrap.arc-on .ev:not(.is-center) .evc { cursor: pointer; }
html body #events .evc-wrap.arc-on img { -webkit-user-drag: none; pointer-events: none; }

/* Arrows sit together under the center card */
html body #events .evc-wrap.arc-on .evc-nav { position: absolute; inset: auto 0 0; height: 64px; z-index: 200; pointer-events: none; display: block !important; margin: 0 !important; }
html body #events .evc-wrap.arc-on .evc-btn {
	display: grid !important;
	top: 50% !important;
	pointer-events: auto;
}
html body #events .evc-wrap.arc-on .evc-btn[data-dir="-1"] { left: calc(50% - 62px) !important; right: auto !important; }
html body #events .evc-wrap.arc-on .evc-btn[data-dir="1"] { right: calc(50% - 62px) !important; left: auto !important; }

@media (max-width: 700px) {
	html body #events .evc-wrap.arc-on .evc-btn { display: none !important; }
}

/* Arched dial: the section's buttons sit at the foot of the center card,
   over the lower edge of the arch */
html body #events .evc-wrap.arc-on .evc-arc-cta {
	position: relative;
	z-index: 300;
	display: flex;
	justify-content: center;
	margin-top: 14px; /* 50px clear of the center card */
	padding: 0 16px clamp(8px, 2vw, 24px);
}
html body #events .evc-wrap.arc-on .evc-arc-cta .btns { justify-content: center; }
@media (max-width: 700px) {
	html body #events .evc-wrap.arc-on .evc-arc-cta { margin-top: 30px; }
	html body #events .evc-wrap.arc-on .evc-arc-cta .btns { flex-direction: column; width: 100%; }
}
html body #events:has(.evc-wrap.arc-on) { padding-bottom: clamp(48px, 5vw, 80px) !important; }

/* LBCPride365: buttons sit under the headline */
html body .y365 .y-btns { margin-top: clamp(20px, 2vw, 28px); }

/* Parade card: the two-line logo needs more height than the old wordmark */
html body .pd-logos img.pd-lbp { height: clamp(48px, 4.2vw, 66px); width: auto; }
@media (max-width: 700px) {
	html body .pd-logos img.pd-lbp { height: 52px; width: auto; }
}


/* ==========================================================================
   Communities, refined — desktop: an even 50/50 split, standard headline
   size, names on a perspective dial (active full size, the rest scaled
   back), clean ink type with a flag chip, and smooth easing throughout.
   Phones: a full-bleed swipeable row of photo cards with glass panels.
   ========================================================================== */

@media (min-width: 901px) {
	html body .cv-left { display: flex; flex-direction: column; min-height: 0; }
	html body .cv-win { flex: 1; min-height: 0; }

	/* Headline back to full size; "Our Community." larger than "Our Shore." */
	html body .cv-h { font-size: clamp(32px, 3vw, 54px) !important; }
	html body .cv-h .cv-h2 { font-size: 1.55em !important; }

	/* Names: readable ink, eased color and a gentle nudge on the active one */
	html body .cv-list button { color: rgba(12, 12, 14, .34); }
	html body .cv-list .nm { transition: color .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1), opacity .45s ease !important; }
	html body .cv-list button:hover .nm { color: rgba(12, 12, 14, .62) !important; }

	/* Active name: its flag colors run cleanly across the word; a fine dark
	   edge keeps the pale stripes crisp on white */
	html body .cv-list li.on .nm {
		background: var(--fl), linear-gradient(#BDB6CC, #BDB6CC) !important;
		background-blend-mode: multiply !important;
		background-size: 100% 100% !important;
		-webkit-background-clip: text !important;
		background-clip: text !important;
		color: transparent !important;
		-webkit-text-fill-color: transparent !important;
		-webkit-text-stroke: .5px rgba(12, 12, 14, .3) !important;
		filter: saturate(1.35) !important;
		transform: translateX(6px) !important;
	}

	/* Icons as small rainbow markers */
	html body .cv-list .n { display: grid; place-items: center; width: 2.4em; letter-spacing: 0; }
	html body .cv-list .n svg { width: clamp(22px, 1.7vw, 28px); height: clamp(22px, 1.7vw, 28px); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
	html body .cv-list li.on .n svg { transform: scale(1.12); }
	html body .cv-list .n { transition: opacity .45s ease; opacity: .55; color: var(--nc, #6D28D9) !important; font-weight: 700; }
	html body .cv-list li.on .n { opacity: 1; }
	html body .cv-list li:nth-child(6n+1) { --nc: #E40303; }
	html body .cv-list li:nth-child(6n+2) { --nc: #E86A00; }
	html body .cv-list li:nth-child(6n+3) { --nc: #B58900; }
	html body .cv-list li:nth-child(6n+4) { --nc: #0A8A3A; }
	html body .cv-list li:nth-child(6n+5) { --nc: #1D4ED8; }
	html body .cv-list li:nth-child(6n) { --nc: #7C3AED; }

	/* The closing card always shows under the list */
	html body .cv-more { flex: none; }

	html body .cv-media img { transition: opacity .8s ease, transform 1.6s cubic-bezier(.22, 1, .36, 1) !important; }
	html body .cv-cards { display: none; }
}

@media (max-width: 900px) {
	html body .cv-stage { position: relative !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
	html body .cv-in { display: block !important; height: auto !important; padding: clamp(56px, 12vw, 80px) var(--gut) clamp(48px, 10vw, 72px) !important; }
	html body .cv-right,
	html body .cv-win,
	html body .cv-bar,
	html body .cv-frost { display: none !important; }
	html body .cv-h { font-size: var(--fs-h2) !important; line-height: 1.02 !important; }
	html body .cv-h .cv-h2 { display: block; font-size: 1em !important; line-height: 1.05 !important; margin-top: 0 !important; }

	/* Full-bleed card row */
	html body .cv-cards {
		display: flex;
		gap: 12px;
		margin: 24px calc(var(--gut) * -1) 0;
		padding: 4px var(--gut) 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gut);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	html body .cv-cards::-webkit-scrollbar { display: none; }
	html body .cv-card {
		position: relative;
		flex: 0 0 min(84vw, 380px);
		height: min(118vw, 560px);
		border-radius: 22px;
		overflow: hidden;
		scroll-snap-align: start;
		background: var(--night);
		box-shadow: 0 18px 40px -22px rgba(12, 12, 14, .45);
	}
	html body .cv-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	html body .cv-glass {
		position: absolute;
		left: 10px;
		right: 10px;
		bottom: 10px;
		padding: 16px 16px 18px;
		border-radius: 16px;
		background: rgba(255, 255, 255, .84);
		-webkit-backdrop-filter: blur(18px) saturate(1.4);
		backdrop-filter: blur(18px) saturate(1.4);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
		color: var(--ink);
	}
	html body .cv-glass .cv-flag { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .02em; color: var(--ink-2); }
	html body .cv-glass .cv-flag svg { width: 30px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(12, 12, 14, .12); }
	html body .cv-glass h3 { margin: 10px 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #0C0C0E; text-transform: none; }
	html body .cv-glass p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

	html body .cv-more { display: flex !important; margin: 20px 0 0 !important; padding-top: 18px !important; }
}

/* Parade panel: a soft purple glow fades in behind the row under the
   pointer (or keyboard focus); a fainter one marks the row playing */
html body .pd-tab { isolation: isolate; }
html body .pd-tab::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -6px -40px;
	background: radial-gradient(60% 70% at 30% 50%, rgba(139, 92, 246, .38), rgba(139, 92, 246, 0) 75%);
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}
html body .pd-tab.on::before { opacity: .45; }
html body .pd-tab:hover::before,
html body .pd-tab:focus-visible::before { opacity: 1; }
html body .cv-cards:focus-visible { outline: 3px solid #6D28D9; outline-offset: 2px; border-radius: 12px; }

/* Communities: larger names and icons so the list invites interaction */
@media (min-width: 901px) {
	html body .cv-list .nm { font-size: clamp(34px, 3.3vw, 60px) !important; }
	html body .cv-list button { gap: clamp(16px, 1.6vw, 26px); }
	html body .cv-list .n { width: auto; }
	html body .cv-list .n svg { width: clamp(30px, 2.4vw, 42px); height: clamp(30px, 2.4vw, 42px); }
	html body .cv-list li.on .n svg { transform: scale(1.1); }
}


/* ==========================================================================
   Stacked sections — no paint containment, hidden backfaces or backdrop
   blur on the pinned cards: together they made Chrome reuse stale tiles,
   so the card underneath flashed through the one sliding over it
   ========================================================================== */

html body .stack3 > :is(.pd, .rb2027, .gi) { contain: none !important; backface-visibility: visible !important; -webkit-backface-visibility: visible !important; }
/* The glass panels on the pinned cards drop the live backdrop blur (the
   main trigger: with it Chrome stopped painting the card sliding in) and
   become a near-solid smoked panel that reads the same */
html body .stack3 :is(.pledges, .pd-side, .gi-card) {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	background: linear-gradient(160deg, rgba(28, 28, 34, .86), rgba(8, 8, 11, .9)) !important;
}
/* Get Involved photos cross-fade: the new one fades in on top while the
   old one holds underneath, then drops away, so the card never goes dark */
html body .gi-media img { z-index: -3; transition: opacity .01s linear 1.2s, transform 7s linear; }
html body .gi-media img.on { z-index: -2; transition: opacity 1.2s var(--ease), transform 7s linear; }

/* Home parade card: no purple glow behind the tabs; "Parade" in rainbow at two
   thirds of the width of the line above (view.js), tucked up under it. The
   padding (cancelled by the negative margin) keeps the script's swashes
   inside the gradient's paint box so no letter is cut off. */
html body .pd-tab::before { display: none !important; }
html body #pd-h i.rb:not(#_) { display: block; width: max-content; max-width: 100%; margin: -.40em -.4em -.32em -.12em !important; font-weight: 700 !important; font-synthesis: weight; padding: .32em .4em .32em .12em; font-size: 1.4em !important; line-height: .95 !important; background: linear-gradient(90deg, #FF5C6C 0%, #FFA53D 20%, #FFE14D 38%, #5BE38A 56%, #5AA8FF 76%, #D08CFF 95%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 0 transparent !important; text-shadow: none !important; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); }


/* Home event cards: "Scale to fit" (event Image focus) shows the whole image,
   flyer or logo, over a blurred fill of itself, like the Events page cards. */
html body .evc-ph.is-fit { position: relative; overflow: hidden; background: #1a1024; }
html body .evc-ph.is-fit::before { content: ""; position: absolute; inset: -24px; background: var(--bg) center / cover no-repeat; filter: blur(22px) saturate(1.3) brightness(.85); transform: scale(1.1); }
html body main .evc-ph.is-fit img { position: relative; object-fit: contain !important; object-position: 50% 50% !important; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .35)); }

/* Stacked home sections: square corners on every card, including the first
   and while one slides over the next (owner, Nov 2026). */
html body .stack3 > *,
html body .stack3 > :is(.pd, .rb2027, .gi, .pa-sec) { border-radius: 0 !important; }


/* ==========================================================================
   Communities — phone cards with overlapping text frames
   ========================================================================== */

@media (max-width: 900px) {
	html body .cv-cards { align-items: flex-start; }
	html body .cv-card {
		display: flex;
		flex-direction: column;
		flex-basis: min(86vw, 420px);
		height: auto;
		overflow: visible;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}
	html body .cv-card > img {
		position: relative;
		inset: auto;
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: 50% 35%;
		border-radius: 22px;
		background: var(--night);
		box-shadow: 0 18px 40px -24px rgba(12, 12, 14, .45);
	}
	html body .cv-glass {
		position: relative;
		inset: auto;
		z-index: 1;
		flex: none;
		margin: -44px 12px 0;
		padding: 16px 16px 20px;
		border-radius: 16px;
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: 0 14px 32px -18px rgba(12, 12, 14, .35), 0 0 0 1px rgba(12, 12, 14, .06);
	}
}

/* Voice rules (owner, 2026-11-05): sentence case, no all-caps headlines. */
html body .stand-h { text-transform: none; }


/* Communities: "Our Community." set larger (owner, 2026-11-05) */
@media (min-width: 901px) {
	html body .cv-h .cv-h2 { font-size: 2em !important; margin-top: -.02em; }
}
@media (max-width: 900px) {
	html body .cv-h .cv-h2 { font-size: 1.45em !important; line-height: .95 !important; margin-top: .02em !important; }
}


/* ==========================================================================
   Home hero — sizzle reel and a headline that always wraps (owner,
   2026-11-05): quick cuts with varied transitions, no text on photos; the
   headline wraps on every screen and is never clipped once it has risen in.
   ========================================================================== */

#opening .reel-stills.sizzle img { opacity: 0; transform: none; transition: none !important; object-position: 50% 42% !important; will-change: transform, clip-path, opacity; }
#opening .reel-stills.sizzle img.prev { opacity: 1; z-index: 1; transform: scale(1.05); }
#opening .reel-stills.sizzle img.on { opacity: 1; z-index: 2; animation: sz-drift 2.6s linear both; }
#opening .reel-stills.sizzle img.on.fx-punch { animation: sz-punch .55s cubic-bezier(.2, .9, .2, 1) both, sz-drift 2.6s linear .55s both; }
#opening .reel-stills.sizzle img.on.fx-wipe { animation: sz-wipe .5s cubic-bezier(.7, 0, .2, 1) both, sz-drift 2.6s linear .5s both; }
#opening .reel-stills.sizzle img.on.fx-wipe-r { animation: sz-wipe-r .5s cubic-bezier(.7, 0, .2, 1) both, sz-drift 2.6s linear .5s both; }
#opening .reel-stills.sizzle img.on.fx-iris { animation: sz-iris .6s cubic-bezier(.6, 0, .2, 1) both, sz-drift 2.6s linear .6s both; }
#opening .reel-stills.sizzle img.on.fx-push { animation: sz-push .55s cubic-bezier(.7, 0, .2, 1) both, sz-drift 2.6s linear .55s both; }
#opening .reel-stills.sizzle img.on.fx-rise { animation: sz-rise .5s cubic-bezier(.7, 0, .2, 1) both, sz-drift 2.6s linear .5s both; }
#opening .reel-stills.sizzle img.on.fx-diag { animation: sz-diag .55s cubic-bezier(.7, 0, .2, 1) both, sz-drift 2.6s linear .55s both; }
#opening .reel-stills.sizzle img.on.fx-tilt { animation: sz-tilt .6s cubic-bezier(.2, .9, .2, 1) both, sz-drift 2.6s linear .6s both; }

@keyframes sz-drift { from { transform: scale(1.0); } to { transform: scale(1.05); } }
@keyframes sz-punch { from { transform: scale(1.32); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes sz-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sz-wipe-r { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes sz-iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(80% at 50% 50%); } }
@keyframes sz-push { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sz-rise { from { clip-path: inset(100% 0 0 0); transform: scale(1.12); } to { clip-path: inset(0 0 0 0); transform: scale(1); } }
@keyframes sz-diag { from { clip-path: polygon(0 0, 0 0, 0 0, 0 0); } to { clip-path: polygon(0 0, 200% 0, 0 200%, 0 0); } }
@keyframes sz-tilt { from { transform: rotate(-5deg) scale(1.3); opacity: 0; } 35% { opacity: 1; } to { transform: rotate(0) scale(1); opacity: 1; } }

/* A soft light pop on some cuts (low contrast, never more than once a second) */
#opening .reel-stills.sizzle::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
#opening .reel-stills.sizzle.pop::after { animation: sz-pop .45s ease-out; }
@keyframes sz-pop { from { opacity: .28; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	#opening .reel-stills.sizzle img.on { animation: none !important; }
	#opening .reel-stills.sizzle::after { display: none; }
}
html.motion-off #opening .reel-stills.sizzle img.on { animation: none !important; }

/* Headline: wraps on every screen, balanced lines, nothing clipped once it
   has risen in (the frame only masks the entrance) */
#opening .d-hero .ln { white-space: normal !important; text-wrap: balance; }
#opening.in .d-hero .ln { animation: sz-unclip 0s 1.6s forwards; }
@keyframes sz-unclip { to { overflow: visible; } }
.no-js #opening .d-hero .ln { overflow: visible; }
#opening .d-hero .ln > span { text-wrap: balance; }


/* ==========================================================================
   Home hero — poster type and edge-to-edge frame (owner, 2026-11-05)
   The headline is the message: extra bold, tight, sized to the window
   (width and height, so short laptops never crowd it) and spanning the
   whole hero. The script line leans in over it. Body and button sit in one
   row underneath. The hero fills the live browser window on every device.
   ========================================================================== */

/* Frame: the dynamic viewport, so phones stay edge to edge as the toolbar moves */
html body #opening { height: 100vh !important; height: 100dvh !important; }
html body #opening .stage { height: 100% !important; min-height: 0 !important; }

/* A deeper floor under the type so it reads over every photo */
#opening .o-hero { padding-top: clamp(120px, 22vh, 260px); background: linear-gradient(to top, rgba(8, 6, 14, .72) 0%, rgba(8, 6, 14, .45) 45%, rgba(8, 6, 14, 0) 100%); }

/* Layout: headline across the hero, then body + button in a row */
#opening .hero-in { grid-template-columns: 1fr !important; row-gap: clamp(20px, 2.6vh, 34px) !important; }
#opening .o-side { flex-direction: row !important; flex-wrap: wrap; align-items: flex-end !important; justify-content: space-between; gap: 18px clamp(24px, 4vw, 64px) !important; padding-bottom: 0 !important; }
#opening .o-side .lead { max-width: 46ch; margin: 0; font-size: clamp(17px, 1.25vw, 22px) !important; line-height: 1.5; font-weight: 500; }
#opening .o-side .btns { flex: none; }

/* The headline */
html body #opening .d-hero {
	font-size: clamp(48px, min(10.5vw, 17vh), 230px) !important;
	font-weight: 800 !important;
	letter-spacing: -.052em !important;
	line-height: .88 !important;
	max-width: none;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
html body #opening .d-hero .ln + .ln { margin-top: -.12em !important; }
html.has-zooja body #opening .d-hero i {
	display: inline-block;
	font-size: 1.14em !important;
	line-height: 1 !important;
	-webkit-text-stroke: .012em currentColor !important;
	rotate: -4deg;
	transform-origin: 0 60%;
	padding: .06em .18em .14em .06em;
	margin-left: .04em;
}

@media (max-width: 900px) {
	html body #opening .d-hero { font-size: clamp(44px, min(16.5vw, 10vh), 110px) !important; letter-spacing: -.048em !important; }
	#opening .o-side { flex-direction: column !important; align-items: stretch !important; }
	#opening .o-side .lead { font-size: 17px !important; }
	#opening .o-hero { padding-top: 34vh; }
}
@media (prefers-reduced-motion: reduce) {
	html.has-zooja body #opening .d-hero i { rotate: none; }
}


/* Home hero, revised (owner, 2026-11-05): keep the poster type, but out of
   the middle of the photo. Headline bottom left, body and button bottom
   right, about a quarter smaller. */
#opening .hero-in { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important; align-items: end !important; column-gap: clamp(32px, 5vw, 96px) !important; }
#opening .o-side { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end; gap: clamp(18px, 2vw, 26px) !important; padding-bottom: .5em !important; }
#opening .o-side .lead { max-width: 40ch; font-size: clamp(16px, 1.15vw, 20px) !important; }
html body #opening .d-hero { font-size: clamp(44px, min(7.6vw, 13vh), 168px) !important; }
#opening .o-hero { padding-top: clamp(90px, 16vh, 200px); background: linear-gradient(to top, rgba(8, 6, 14, .7) 0%, rgba(8, 6, 14, .35) 50%, rgba(8, 6, 14, 0) 100%); }

@media (max-width: 900px) {
	#opening .hero-in { grid-template-columns: 1fr !important; }
	#opening .o-side { align-items: stretch !important; padding-bottom: 0 !important; }
	html body #opening .d-hero { font-size: clamp(42px, min(13.5vw, 8.4vh), 92px) !important; }
	#opening .o-hero { padding-top: 26vh; }
}

/* Script line tucked up under the first line; "our roots." in the rainbow.
   The padding (cancelled by an equal negative margin) keeps the script's
   swashes inside the gradient's paint box, so no letter is cut off. */
html body #opening .d-hero .ln + .ln { margin-top: -.34em !important; }
html.has-zooja body #opening .d-hero i .rb {
	display: inline-block;
	padding: .14em .32em .26em .1em;
	margin: -.14em -.32em -.26em -.1em;
	background: linear-gradient(90deg, #FF5C6C 0%, #FFA53D 20%, #FFE14D 38%, #5BE38A 56%, #5AA8FF 76%, #D08CFF 95%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 0 transparent !important;
	text-shadow: none !important;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}