/* =====================================================================
	responsive.css — The Cleo Store Option A combined responsive fix
	Purpose:
		Preserve the legacy one-page / one-panel-at-a-time template.
		Do NOT convert #pages panels into stacked normal-flow sections.
		Do NOT make every .box visible at once.
		Desktop behavior remains owned by style.css + switcher.js.
	
	Changed-file contract:
		index.html re-enables this file.
		responsive.css only scales/simplifies the existing legacy layout.
		main.js keeps same-origin legacy JS loading and corrected page_ENTER hash.
	===================================================================== */

/* ---------------------------------------------------------------------
	0. Global responsive-safe helpers that do not change panel ownership
	--------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
	0A. Persistent navigation safety patch
	---------------------------------------------------------------------
	The legacy script animates .menu off-screen on the splash screen and
	back on-screen after Enter. During responsive repair/testing this made
	it hard to return to the Enter screen or open other panels if the menu
	state was left at marginTop:-52. Keep the menu available at all times.
	This does not change #pages panel ownership or stack hidden panels.
	--------------------------------------------------------------------- */

.menu {
	position: fixed !important;
	left: 0 !important;
	top: 0 !important;
	margin-top: 0 !important;
	z-index: 10050 !important;
}

#menu {
	z-index: 10051 !important;
}


html,
body {
	min-width: 0 !important;
}

.mobile-logo,
.mobile-submenu-item,
.hamburger-btn {
	display: none;
}

img {
	max-width: 100%;
}

/* ---------------------------------------------------------------------
	1. Narrow desktop / tablet: scale the legacy stage, do not restack it
	--------------------------------------------------------------------- */

@media (max-width: 999px) {
	body {
		overflow: hidden !important;
	}

	.extra {
		min-width: 0 !important;
		overflow: hidden !important;
	}

	.main2 {
		transform: scale(0.92);
		transform-origin: top center;
	}
}

@media (max-width: 920px) {
	.main2 {
		transform: scale(0.84);
	}
}

@media (max-width: 840px) {
	.main2 {
		transform: scale(0.78);
	}
}

/* ---------------------------------------------------------------------
	2. Mobile/tablet menu mode: hamburger menu without changing pages stack
	--------------------------------------------------------------------- */

@media (max-width: 768px) {
	body {
		overflow: hidden !important;
	}

	.extra {
		min-width: 0 !important;
		overflow: hidden !important;
	}

	/* Keep the legacy stage intact, just move/scale it below fixed nav. */
	.main2 {
		position: absolute !important;
		left: 50% !important;
		top: 92px !important;
		margin-left: -500px !important;
		margin-top: 0 !important;
		width: 1000px !important;
		height: 670px !important;
		transform: scale(0.72);
		transform-origin: top center;
		overflow: visible !important;
	}

	/* Critical Option A guardrails: never restack panels. */
	#content {
		position: absolute !important;
		left: 14px !important;
		top: 70px !important;
		width: auto !important;
		height: auto !important;
		overflow: visible !important;
		padding: 0 !important;
	}

	#content > ul > li {
		position: absolute !important;
		width: 972px !important;
		height: 601px !important;
		overflow: hidden !important;
	}

	.box {
		width: 840px !important;
		height: 540px !important;
		position: relative !important;
		padding: 61px 60px 0 72px !important;
		background: url(../images/content_bg.png) 0 0 no-repeat !important;
		overflow: hidden !important;
		box-sizing: content-box !important;
	}

	.scroll-pane {
		overflow: auto;
	}

	/* Fixed mobile nav. The normal menu opens only when JS adds .menu-open. */
	.menu {
		position: fixed !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 82px !important;
		z-index: 9999 !important;
		background: rgba(19, 13, 5, 0.97) !important;
		text-align: center !important;
		white-space: normal !important;
		box-sizing: border-box !important;
	}

	.mobile-logo {
		display: block !important;
		padding: 8px 56px 9px 10px;
		text-align: center;
		text-decoration: none;
		line-height: 1.25;
	}

	.mobile-logo-txt1 {
		display: block;
		font-family: 'metamorphousregular', serif;
		font-size: 20px;
		line-height: 24px;
		color: #ebb780 !important;
		text-shadow: 0 1px 3px rgba(0,0,0,0.8);
		white-space: nowrap;
	}

	.mobile-logo-txt2 {
		display: block;
		font-family: 'metamorphousregular', serif;
		font-size: 11px;
		line-height: 16px;
		color: #ebb780 !important;
		text-shadow: 0 1px 3px rgba(0,0,0,0.8);
		white-space: nowrap;
	}

	header {
		display: none !important;
	}

	.hamburger-btn {
		display: block !important;
		position: absolute !important;
		right: 18px !important;
		top: 26px !important;
		z-index: 10001 !important;
		width: 34px !important;
		height: 28px !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		cursor: pointer;
	}

	.hamburger-btn span,
	.hamburger-btn span::before,
	.hamburger-btn span::after {
		display: block;
		width: 28px;
		height: 3px;
		background: #ebb780;
		border-radius: 2px;
		position: relative;
		transition: all 0.25s ease;
	}

	.hamburger-btn span::before,
	.hamburger-btn span::after {
		content: '';
		position: absolute;
		left: 0;
	}

	.hamburger-btn span::before {
		top: -9px;
	}

	.hamburger-btn span::after {
		top: 9px;
	}

	.hamburger-btn.is-active span {
		background: transparent;
	}

	.hamburger-btn.is-active span::before {
		top: 0;
		transform: rotate(45deg);
	}

	.hamburger-btn.is-active span::after {
		top: 0;
		transform: rotate(-45deg);
	}

	#menu {
		display: none !important;
		width: 100% !important;
		height: auto !important;
		padding: 0 0 8px !important;
		margin: 0 !important;
		white-space: normal !important;
	}

	.menu.menu-open #menu {
		display: block !important;
	}

	#menu > li {
		display: block !important;
		float: none !important;
		width: 100% !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		background: none !important;
		border-top: 1px solid rgba(255,255,255,0.08);
	}

	#menu > li > a {
		display: block !important;
		height: auto !important;
		padding: 11px 16px !important;
		box-sizing: border-box !important;
	}

	#menu > li > a .over {
		display: none !important;
	}

	#menu > li > a .txt1 {
		font-size: 15px !important;
		line-height: 1.35 !important;
		color: #ebb780 !important;
	}

	#menu li.with_ul .submenu {
		display: none !important;
	}

	#menu .mobile-submenu-item {
		display: block !important;
	}

	footer {
		position: fixed !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 54px !important;
		overflow: hidden !important;
		z-index: 9998 !important;
	}

	.bot1 {
		display: none !important;
	}

	.bot2 {
		height: 54px !important;
		line-height: 54px !important;
		font-size: 11px !important;
		padding: 0 8px !important;
		box-sizing: border-box !important;
	}

	/* Decorative splash fan is too wide on mobile. The main splash card remains. */
	#menu_splash {
		display: none !important;
	}
}

@media (max-width: 620px) {
	.main2 {
		transform: scale(0.58);
		top: 96px !important;
	}
}

@media (max-width: 500px) {
	.main2 {
		transform: scale(0.46);
		top: 100px !important;
	}

	.mobile-logo-txt1 {
		font-size: 18px;
	}

	.mobile-logo-txt2 {
		font-size: 10px;
	}
}

@media (max-width: 390px) {
	.main2 {
		transform: scale(0.37);
	}

	.mobile-logo-txt1 {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------------
	3. Desktop menu readability / hover-state stabilization
	---------------------------------------------------------------------
	The legacy script animates #menu > li > a .over and .txt1 on hover.
	After keeping the menu permanently visible, the text could appear too
	dark against the navigation background and the hover state could feel
	inconsistent. These rules keep the original structure but provide a
	CSS fallback for readable text, visible active state, and hover underline.
	--------------------------------------------------------------------- */

@media (min-width: 769px) {
	.menu {
		background: rgba(17, 11, 5, 0.86) url(../images/nav.png) 0 0 repeat-x !important;
	}

	#menu > li > a {
		overflow: hidden !important;
	}

	#menu > li > a .txt1 {
		color: #b99767 !important;
		text-shadow: 0 1px 3px rgba(0,0,0,0.85) !important;
		transition: color 0.22s ease, text-shadow 0.22s ease !important;
	}

	#menu > li:hover > a .txt1,
	#menu > li.sfHover > a .txt1,
	#menu > li.active > a .txt1,
	#menu > li > a:hover .txt1 {
		color: #f0d49a !important;
		text-shadow: 0 1px 5px rgba(0,0,0,0.95) !important;
	}

	#menu > li > a .over {
		top: -52px !important;
		background: #955015 !important;
		transition: top 0.24s ease !important;
	}

	#menu > li:hover > a .over,
	#menu > li.sfHover > a .over,
	#menu > li.active > a .over,
	#menu > li > a:hover .over {
		top: 46px !important;
	}

	.submenu {
		z-index: 10070 !important;
	}

	.submenu ul > li > a {
		color: #c8a978 !important;
		text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
	}

	.submenu ul > li > a:hover {
		color: #f0d49a !important;
	}
}


/* ---------------------------------------------------------------------
	4. Desktop nav row / submenu cleanup patch
	---------------------------------------------------------------------
	The legacy #menu was overflowing into a second visible row because
	mobile-only submenu items had higher selector specificity from style.css
	and were leaking into desktop. That second row overlapped the header logo.
	This section keeps the intended desktop top menu to one row, restores
	Party Costumes as a real desktop top-level button, and keeps the mobile
	duplicate Gallery/Party links hidden until hamburger mode.
	--------------------------------------------------------------------- */

@media (min-width: 769px) {
	.menu {
		height: 52px !important;
		min-height: 52px !important;
		overflow: visible !important;
	}

	#menu {
		display: inline-flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: center !important;
		height: 52px !important;
		max-width: 100vw !important;
		white-space: nowrap !important;
	}

	#menu > li {
		float: none !important;
		display: inline-flex !important;
		align-items: stretch !important;
		height: 52px !important;
		vertical-align: top !important;
		white-space: nowrap !important;
		padding-left: 9px !important;
		padding-right: 0 !important;
	}

	#menu > li > a {
		display: inline-block !important;
		height: 52px !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		white-space: nowrap !important;
	}

	#menu > li > a .txt1 {
		font-size: 15px !important;
		line-height: 52px !important;
		white-space: nowrap !important;
	}

	/* Hide hamburger-only direct submenu links on desktop. */
	#menu > li.mobile-submenu-item {
		display: none !important;
		visibility: hidden !important;
	}

	/* This is the real desktop Party Costumes top-level link. */
	#menu > li.desktop-party-menu-item {
		display: inline-flex !important;
		visibility: visible !important;
	}

	/* Keep dropdowns above header/title artwork and away from blended text. */
	#menu > li.with_ul > .submenu {
		top: 52px !important;
		left: 12px !important;
		z-index: 10100 !important;
	}

	header {
		z-index: 4 !important;
		pointer-events: none !important;
	}
}

@media (max-width: 1220px) and (min-width: 769px) {
	#menu > li {
		padding-left: 6px !important;
	}

	#menu > li > a {
		padding-left: 7px !important;
		padding-right: 7px !important;
	}

	#menu > li > a .txt1 {
		font-size: 13px !important;
	}
}

@media (max-width: 768px) {
	/* In hamburger mode, use the mobile sub-items and avoid duplicate Party Costumes. */
	#menu > li.desktop-party-menu-item {
		display: none !important;
	}

	#menu > li.mobile-submenu-item {
		display: block !important;
		visibility: visible !important;
	}
}

/* ---------------------------------------------------------------------
	5. Desktop menu hover/dropdown refinement patch
	---------------------------------------------------------------------
	Fixes visible-but-confusing menu states after Option A:
	- Non-dropdown items should not appear to open an empty dropdown.
	- Only li.with_ul items display dropdown panels.
	- The hover/active marker is a thin underline, not a large blank panel.
	- Dropdowns sit above header/title art and have readable text/background.
	--------------------------------------------------------------------- */

@media (min-width: 769px) {
	/* Prevent the legacy hover overlay from looking like an empty dropdown. */
	#menu > li > a {
		position: relative !important;
		overflow: visible !important;
	}

	#menu > li > a .over {
		display: block !important;
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		bottom: -4px !important;
		width: 100% !important;
		height: 4px !important;
		background: #955015 !important;
		z-index: 2 !important;
		opacity: 0 !important;
		transition: opacity 0.18s ease, bottom 0.18s ease !important;
	}

	#menu > li:hover > a .over,
	#menu > li.sfHover > a .over,
	#menu > li.active > a .over,
	#menu > li > a:hover .over {
		top: auto !important;
		bottom: 0 !important;
		opacity: 1 !important;
	}

	/* Hide all dropdown containers unless the parent is an actual dropdown item. */
	#menu > li:not(.with_ul) > .submenu {
		display: none !important;
		visibility: hidden !important;
	}

	#menu > li.with_ul > .submenu {
		display: none !important;
		visibility: hidden !important;
		position: absolute !important;
		top: 52px !important;
		left: 10px !important;
		z-index: 20000 !important;
		min-width: 220px !important;
		background: rgba(15, 9, 4, 0.94) !important;
		box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45) !important;
		padding: 0 !important;
		pointer-events: auto !important;
	}

	#menu > li.with_ul:hover > .submenu,
	#menu > li.with_ul.sfHover > .submenu {
		display: block !important;
		visibility: visible !important;
	}

	#menu > li.with_ul > .submenu > ul {
		background: transparent !important;
		padding: 8px 0 !important;
		margin: 0 !important;
		min-width: 220px !important;
	}

	#menu > li.with_ul > .submenu ul > li {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 31px !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	#menu > li.with_ul > .submenu ul > li > a {
		display: block !important;
		min-height: 31px !important;
		line-height: 31px !important;
		padding: 0 16px !important;
		color: #e4c78d !important;
		background: transparent !important;
		text-decoration: none !important;
		white-space: nowrap !important;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
	}

	#menu > li.with_ul > .submenu ul > li > a:hover {
		color: #fff0c4 !important;
		background: rgba(149, 80, 21, 0.35) !important;
	}

	/* Keep the decorative header/title behind the menu and dropdowns. */
	header,
	.logo,
	.logo .txt1,
	.logo .txt2 {
		z-index: 1 !important;
		pointer-events: none !important;
	}

	.menu,
	#menu,
	#menu > li,
	#menu > li > a,
	#menu > li.with_ul > .submenu {
		pointer-events: auto !important;
	}
}


/* =====================================================================
	Cleo Store CSS/JS owner normalization
	Built from the uploaded original/source files.

	Contract:
		>=660 ENTER/HOME: legacy fan/stage
		>=660 content: legacy content panel
		<660 ENTER/HOME: single-card entry
		<660 content: normal-flow responsive content
	===================================================================== */

@media (min-width: 660px) {
	html,
	body {
		height: 100% !important;
		overflow: hidden !important;
		min-width: 660px !important;
	}

	body.pc-cleo-stage .extra {
		position: relative !important;
		height: 100% !important;
		min-height: 100% !important;
		overflow: hidden !important;
	}

	body.pc-cleo-stage .main2 {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		margin-left: -500px !important;
		margin-top: -335px !important;
		width: 1000px !important;
		height: 670px !important;
		transform: none !important;
		-webkit-transform: none !important;
	}

	body.pc-cleo-stage.pc-cleo-enter .splash {
		display: block !important;
		position: absolute !important;
		left: 327px !important;
		top: 70px !important;
		margin-top: 0 !important;
		width: 346px !important;
		height: 601px !important;
	}

	body.pc-cleo-stage.pc-cleo-enter #menu_splash {
		display: block !important;
	}

	body.pc-cleo-stage.pc-cleo-content .splash,
	body.pc-cleo-stage.pc-cleo-content #menu_splash {
		display: none !important;
	}

	body.pc-cleo-stage header {
		display: block !important;
		visibility: visible !important;
	}

	body.pc-cleo-stage.pc-cleo-enter header {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}

	body.pc-cleo-stage .menu {
		display: block !important;
		position: fixed !important;
		top: 0 !important;
		margin-top: 0 !important;
		z-index: 10050 !important;
	}

	body.pc-cleo-stage footer {
		display: block !important;
		visibility: visible !important;
		position: absolute !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 90px !important;
		overflow: visible !important;
		z-index: 10040 !important;
	}
}

@media (max-width: 659px) {
	html,
	body {
		min-width: 0 !important;
		height: auto !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}

	body.pc-cleo-small .extra {
		position: relative !important;
		min-width: 0 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 100vh !important;
		overflow: visible !important;
		padding: 92px 0 0 !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-small .main2 {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		margin: 0 auto !important;
		width: 100% !important;
		max-width: 520px !important;
		height: auto !important;
		min-height: 0 !important;
		transform: none !important;
		-webkit-transform: none !important;
		overflow: visible !important;
	}

	body.pc-cleo-small header {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	body.pc-cleo-small .menu {
		margin-top: 0 !important;
	}

	body.pc-cleo-small.pc-cleo-enter .splash {
		display: block !important;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 346px !important;
		max-width: calc(100vw - 24px) !important;
		height: 601px !important;
		margin: 0 auto 18px !important;
	}

	body.pc-cleo-small.pc-cleo-enter #menu_splash {
		display: none !important;
	}

	body.pc-cleo-small.pc-cleo-content .splash,
	body.pc-cleo-small.pc-cleo-content #menu_splash {
		display: none !important;
	}

	body.pc-cleo-small.pc-cleo-content #content {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
		padding: 0 12px 18px !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-small.pc-cleo-content #content > ul,
	body.pc-cleo-small.pc-cleo-content #content > ul > li {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
	}

	body.pc-cleo-small.pc-cleo-content .box {
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 22px 16px !important;
		margin: 0 auto !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-small.pc-cleo-content .scroll-pane,
	body.pc-cleo-small.pc-cleo-content .jspContainer,
	body.pc-cleo-small.pc-cleo-content .jspPane {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	body.pc-cleo-small.pc-cleo-content [class^="col"],
	body.pc-cleo-small.pc-cleo-content [class*=" col"] {
		float: none !important;
		width: auto !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		margin-left: 0 !important;
	}

	body.pc-cleo-small.pc-cleo-content img {
		max-width: 100% !important;
		height: auto !important;
	}

	body.pc-cleo-small footer {
		position: relative !important;
		left: auto !important;
		bottom: auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 90px !important;
		overflow: visible !important;
		margin-top: 18px !important;
	}
}


/* =====================================================================
	Route-owner DOM order correction
	ENTER splash is outside article#content in the legacy template.
	On ENTER routes, article#content must collapse; otherwise mobile/normal-flow
	layout shows a blank hidden page stack before the splash card.
	===================================================================== */

body.pc-cleo-enter #content {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

body.pc-cleo-content #content {
	display: block !important;
}

body.pc-cleo-small.pc-cleo-enter #content {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

body.pc-cleo-small.pc-cleo-content #content {
	display: block !important;
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
}


/* =====================================================================
	Main1 flow owner correction

	Root cause:
		.main1 is a legacy decorative/background layer before .main2.
		In style.css it has height:810px. When small routes use normal flow,
		that empty 810px layer pushes real content/splash down the page.

	Contract:
		Small routes: .main1 must not consume flow height.
		Stage routes: .main1 is restored for the legacy desktop/tablet stage.
	===================================================================== */

body.pc-cleo-small .main1 {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

body.pc-cleo-stage .main1 {
	display: block !important;
	width: 100% !important;
	height: 810px !important;
	position: relative !important;
	z-index: 1 !important;
}


/* =====================================================================
	Small content chrome + page-flow owner correction

	Root cause:
		Under pc-cleo-small pc-cleo-content, .main1 is now collapsed and
		.main2 is normal-flow, but legacy desktop chrome still renders:
			- .main2 > header/logo overlays the active content image/text
			- footer/music overlaps the content card
			- desktop columns and jScrollPane wrappers still constrain flow

	Contract:
		<660 content routes use browser/page scroll.
		The bright content panel expands with content.
		No internal jScrollPane/mobile content window.
		Footer/music are desktop-wide chrome only.
	===================================================================== */

@media (max-width: 659px) {
	body.pc-cleo-small {
		padding: 0 !important;
	}

	body.pc-cleo-small .menu {
		display: block !important;
		position: fixed !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
		min-height: 82px !important;
		z-index: 10050 !important;
		background: rgba(19, 13, 5, 0.97) !important;
		margin-top: 0 !important;
	}

	body.pc-cleo-small .mobile-logo {
		display: block !important;
	}

	body.pc-cleo-small .hamburger-btn {
		display: block !important;
	}

	body.pc-cleo-small .extra {
		padding-top: 92px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 0 !important;
	}

	/* The fixed mobile menu is the small-screen header. Hide the legacy
	   in-stage header so its logo/title cannot repeat over content. */
	body.pc-cleo-small .main2 > header {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		height: 0 !important;
		min-height: 0 !important;
		overflow: hidden !important;
	}

	/* Footer/music are desktop-wide chrome only. On small routes they
	   overlap content and reduce readable viewport. */
	body.pc-cleo-small footer,
	body.pc-cleo-small #jp_container,
	body.pc-cleo-small #jp_container_disabled,
	body.pc-cleo-small .jp-audio,
	body.pc-cleo-small .jp-jplayer,
	body.pc-cleo-small #jquery_jplayer {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		min-height: 0 !important;
		overflow: hidden !important;
	}

	body.pc-cleo-small.pc-cleo-content .main2 {
		width: 100% !important;
		max-width: 560px !important;
		margin: 0 auto !important;
		padding: 0 10px 24px !important;
		box-sizing: border-box !important;
		overflow: visible !important;
	}

	body.pc-cleo-small.pc-cleo-content #content {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 auto !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-small.pc-cleo-content #content > ul {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		list-style: none !important;
	}

	body.pc-cleo-small.pc-cleo-content #content > ul > li {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-small.pc-cleo-content #content > ul > li[style*="display: none"] {
		display: none !important;
	}

	body.pc-cleo-small.pc-cleo-content .box,
	body.pc-cleo-small.pc-cleo-content .box2 {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 auto 18px !important;
		padding: 18px 14px 24px !important;
		overflow: visible !important;
		box-sizing: border-box !important;
		background: #e7bd79 url(../images/content_bg.png) top center repeat-y !important;
		background-size: 100% auto !important;
		box-shadow: 0 4px 18px rgba(0,0,0,0.45) !important;
	}

	body.pc-cleo-small.pc-cleo-content [class^="col"],
	body.pc-cleo-small.pc-cleo-content [class*=" col"] {
		float: none !important;
		clear: both !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
		overflow: visible !important;
	}

	body.pc-cleo-small.pc-cleo-content .pad_left5,
	body.pc-cleo-small.pc-cleo-content .pad_left4,
	body.pc-cleo-small.pc-cleo-content .pad_left3,
	body.pc-cleo-small.pc-cleo-content .pad_left2,
	body.pc-cleo-small.pc-cleo-content .pad_left1 {
		padding-left: 0 !important;
	}

	body.pc-cleo-small.pc-cleo-content .scroll-pane,
	body.pc-cleo-small.pc-cleo-content .jspContainer,
	body.pc-cleo-small.pc-cleo-content .jspPane {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-small.pc-cleo-content .jspVerticalBar,
	body.pc-cleo-small.pc-cleo-content .jspHorizontalBar,
	body.pc-cleo-small.pc-cleo-content .jspTrack,
	body.pc-cleo-small.pc-cleo-content .jspDrag,
	body.pc-cleo-small.pc-cleo-content .jspArrow {
		display: none !important;
		visibility: hidden !important;
	}

	body.pc-cleo-small.pc-cleo-content .line1,
	body.pc-cleo-small.pc-cleo-content .col0 {
		display: none !important;
	}

	body.pc-cleo-small.pc-cleo-content h1,
	body.pc-cleo-small.pc-cleo-content h2,
	body.pc-cleo-small.pc-cleo-content h3 {
		max-width: 100% !important;
		white-space: normal !important;
		word-wrap: break-word !important;
		line-height: 1.15 !important;
	}

	body.pc-cleo-small.pc-cleo-content h2 {
		font-size: 28px !important;
		margin: 0 0 14px !important;
		padding: 0 !important;
	}

	body.pc-cleo-small.pc-cleo-content p,
	body.pc-cleo-small.pc-cleo-content .text,
	body.pc-cleo-small.pc-cleo-content strong.text {
		max-width: 100% !important;
		white-space: normal !important;
		word-wrap: break-word !important;
	}

	body.pc-cleo-small.pc-cleo-content img {
		display: block !important;
		max-width: 100% !important;
		height: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.pc-cleo-small.pc-cleo-content .button1,
	body.pc-cleo-small.pc-cleo-content .enter {
		max-width: 100% !important;
		white-space: normal !important;
	}
}


/* =====================================================================
	Stage content footer-clearance owner correction

	Root cause:
		Desktop/tablet content pages use the legacy fixed .box panel.
		style.css gives .box a large 60px top padding plus fixed height.
		The footer/music bar is separate desktop chrome at the bottom of
		the stage, so the content panel crowds/overlaps the footer area.

	Contract:
		>=660 content routes keep the legacy desktop stage, but the content
		panel must reserve enough lower visual space for the footer/music bar.
		This does not affect ENTER/fan layout and does not affect <660 mobile.
	===================================================================== */

@media (min-width: 660px) {
	body.pc-cleo-stage.pc-cleo-content #content .box {
		padding-top: 18px !important;
		height: 470px !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box > .scroll-pane,
	body.pc-cleo-stage.pc-cleo-content #content .box .scroll-pane {
		max-height: 380px !important;
	}
}


/* =====================================================================
	Desktop scroll-pane + mobile parchment internal-scroll owner repair

	Root causes:
		1. Desktop/tablet content pages still need the legacy jScrollPane
		   wrapper to have real fixed heights. max-height alone can leave
		   the generated .jspContainer/.jspPane clipped or visually blank.

		2. Mobile content pages should not let the parchment .box grow
		   endlessly with repeat-y background. That creates tiled parchment.
		   Mobile content should use one parchment panel and scroll inside it.

	Contract:
		>=660 content routes:
			legacy content stage remains
			.box remains fixed
			.scroll-pane/.jspContainer get real fixed height
			.jspPane and .jspVerticalBar remain visible

		<660 content routes:
			mobile menu/header remains fixed
			footer/music remains hidden
			one parchment .box fits the viewport
			.box background stretches once, no tiling
			.box owns native internal vertical scroll
			jScrollPane chrome stays hidden/neutralized
	===================================================================== */

@media (min-width: 660px) {
	body.pc-cleo-stage.pc-cleo-content #content .box .scroll-pane,
	body.pc-cleo-stage.pc-cleo-content #content .box .jspContainer {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: 380px !important;
		max-height: 380px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .jspPane {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		min-height: 380px !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .jspVerticalBar {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .col2 .scroll-pane,
	body.pc-cleo-stage.pc-cleo-content #content .box .col4 .scroll-pane,
	body.pc-cleo-stage.pc-cleo-content #content .box .col6 .scroll-pane,
	body.pc-cleo-stage.pc-cleo-content #content .box .col8 .scroll-pane {
		width: 100% !important;
	}
}

@media (max-width: 659px) {
	body.pc-cleo-small.pc-cleo-content {
		height: 100vh !important;
		min-height: 100vh !important;
		overflow: hidden !important;
	}

	body.pc-cleo-small.pc-cleo-content .extra {
		height: 100vh !important;
		min-height: 100vh !important;
		overflow: hidden !important;
		padding-top: 92px !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-small.pc-cleo-content .main2 {
		height: calc(100vh - 92px) !important;
		max-height: calc(100vh - 92px) !important;
		overflow: hidden !important;
		padding: 0 10px 10px !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-small.pc-cleo-content #content,
	body.pc-cleo-small.pc-cleo-content #content > ul,
	body.pc-cleo-small.pc-cleo-content #content > ul > li {
		height: 100% !important;
		max-height: 100% !important;
		min-height: 0 !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-small.pc-cleo-content #content .box,
	body.pc-cleo-small.pc-cleo-content #content .box2 {
		height: 100% !important;
		max-height: 100% !important;
		min-height: 0 !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		background-repeat: no-repeat !important;
		background-position: center top !important;
		background-size: 100% 100% !important;
		margin: 0 auto !important;
		padding: 16px 14px 24px !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-small.pc-cleo-content #content .scroll-pane,
	body.pc-cleo-small.pc-cleo-content #content .jspContainer,
	body.pc-cleo-small.pc-cleo-content #content .jspPane {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-small.pc-cleo-content #content .jspVerticalBar,
	body.pc-cleo-small.pc-cleo-content #content .jspHorizontalBar,
	body.pc-cleo-small.pc-cleo-content #content .jspTrack,
	body.pc-cleo-small.pc-cleo-content #content .jspDrag,
	body.pc-cleo-small.pc-cleo-content #content .jspArrow {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}

	body.pc-cleo-small.pc-cleo-content #content .col1,
	body.pc-cleo-small.pc-cleo-content #content .col2,
	body.pc-cleo-small.pc-cleo-content #content .col3,
	body.pc-cleo-small.pc-cleo-content #content .col4,
	body.pc-cleo-small.pc-cleo-content #content .col5,
	body.pc-cleo-small.pc-cleo-content #content .col6,
	body.pc-cleo-small.pc-cleo-content #content .col7,
	body.pc-cleo-small.pc-cleo-content #content .col8 {
		float: none !important;
		clear: both !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 18px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}
}


/* =====================================================================
	Desktop scroll gutter + ENTER footer-clearance owner fix

	Root causes:
		1. Desktop/tablet content pages now show the right scroll panes,
		   but text can run under or too close to the jScrollPane scrollbar.

		2. Desktop/tablet ENTER route allows footer/music chrome, but the
		   splash/fan stage sits too low and overlaps the footer/play area.

	Contract:
		>=660 content routes:
			keep legacy content stage and jScrollPane
			add readable right gutter inside scrollable text panes

		>=660 ENTER route:
			keep legacy fan/stage
			keep footer/music visible
			raise ENTER splash/fan slightly to clear footer/play bar

		No mobile, cache, WordPress, script, or HTML changes.
	===================================================================== */

@media (min-width: 660px) {
	body.pc-cleo-stage.pc-cleo-content #content .box .scroll-pane {
		padding-right: 18px !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .jspContainer {
		padding-right: 18px !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .jspPane {
		padding-right: 24px !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .jspPane > div {
		padding-right: 12px !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .jspVerticalBar {
		right: 0 !important;
		z-index: 5 !important;
	}

	body.pc-cleo-stage.pc-cleo-enter .splash {
		top: 44px !important;
	}

	body.pc-cleo-stage.pc-cleo-enter #menu_splash {
		transform: translateY(-28px) !important;
	}

	body.pc-cleo-stage.pc-cleo-enter footer {
		bottom: 0 !important;
		z-index: 30 !important;
	}
}


/* =====================================================================
	Desktop scroll-pane width + paragraph readability owner fix

	Root causes:
		1. Desktop/tablet scroll panes are visible, but the readable text
		   line is too narrow because the scrollbar gutter and generated
		   jScrollPane wrapper reduce the inner text width.

		2. Full justification on every text element would look poor in this
		   narrow legacy panel. Only long paragraph copy should receive soft
		   justification; headings, intro strong text, buttons, and links
		   should remain left aligned.
	===================================================================== */

@media (min-width: 660px) {
	body.pc-cleo-stage.pc-cleo-content #content .box .col2,
	body.pc-cleo-stage.pc-cleo-content #content .box .col4,
	body.pc-cleo-stage.pc-cleo-content #content .box .col6,
	body.pc-cleo-stage.pc-cleo-content #content .box .col8 {
		width: 340px !important;
		max-width: 340px !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .scroll-pane,
	body.pc-cleo-stage.pc-cleo-content #content .box .jspContainer {
		width: 340px !important;
		max-width: 340px !important;
		padding-right: 0 !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .jspPane {
		width: calc(100% - 34px) !important;
		max-width: calc(100% - 34px) !important;
		padding-right: 10px !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .jspPane > div {
		padding-right: 4px !important;
		box-sizing: border-box !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .jspVerticalBar {
		right: 6px !important;
		width: 18px !important;
		z-index: 6 !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .scroll-pane p,
	body.pc-cleo-stage.pc-cleo-content #content .box .jspPane p {
		text-align: justify !important;
		text-align-last: left !important;
		hyphens: auto !important;
		-webkit-hyphens: auto !important;
	}

	body.pc-cleo-stage.pc-cleo-content #content .box .scroll-pane h2,
	body.pc-cleo-stage.pc-cleo-content #content .box .scroll-pane h3,
	body.pc-cleo-stage.pc-cleo-content #content .box .scroll-pane strong,
	body.pc-cleo-stage.pc-cleo-content #content .box .scroll-pane .button1,
	body.pc-cleo-stage.pc-cleo-content #content .box .scroll-pane a,
	body.pc-cleo-stage.pc-cleo-content #content .box .jspPane h2,
	body.pc-cleo-stage.pc-cleo-content #content .box .jspPane h3,
	body.pc-cleo-stage.pc-cleo-content #content .box .jspPane strong,
	body.pc-cleo-stage.pc-cleo-content #content .box .jspPane .button1,
	body.pc-cleo-stage.pc-cleo-content #content .box .jspPane a {
		text-align: left !important;
	}
}


/* =====================================================================
	Sponsors page safe text-width alignment micro-fix

	Root cause:
		The contained-gutter scroll geometry patch over-constrained the
		jScrollPane system and could hide the scrollbar. This patch is based
		on the prior readable-scrollpane version and changes only Sponsors
		left-copy width plus the right-column gap.

	Contract:
		keep the prior visible-scrollbar scrollpane behavior
		do not tune jScrollPane geometry here
		do not touch mobile, ENTER/fan, JS, HTML, cache, or WordPress
	===================================================================== */

@media (min-width: 660px) {
	body.pc-cleo-stage.pc-cleo-content #page_SPONSORS .col5 p.text {
		max-width: 450px !important;
	}

	body.pc-cleo-stage.pc-cleo-content #page_SPONSORS .col5 strong.text,
	body.pc-cleo-stage.pc-cleo-content #page_SPONSORS .col5 .button1 {
		max-width: 450px !important;
	}

	body.pc-cleo-stage.pc-cleo-content #page_SPONSORS .col6.pad_left5 {
		padding-left: 30px !important;
	}
}


/* =====================================================================
	Desktop ENTER/fan stage scale + footer-clearance owner fix

	Root cause:
		On the desktop ENTER route, the central splash card and side fan
		cards still occupy too much vertical space and run into the valid
		desktop footer/music bar.

	Contract:
		>=660 ENTER route only:
			footer/music remains visible at bottom
			ENTER splash/fan artwork is slightly smaller and higher
			content pages, mobile, scroll panes, JS, HTML, cache, and WP are
			not changed
	===================================================================== */

@media (min-width: 660px) {
	body.pc-cleo-stage.pc-cleo-enter .splash {
		top: 30px !important;
		transform: scale(0.94) !important;
		transform-origin: top center !important;
	}

	body.pc-cleo-stage.pc-cleo-enter #menu_splash {
		transform: translateY(-42px) scale(0.94) !important;
		transform-origin: top center !important;
	}

	body.pc-cleo-stage.pc-cleo-enter footer {
		bottom: 0 !important;
		z-index: 40 !important;
	}
}


/* =====================================================================
	Desktop ENTER/fan conservative scale-tighten owner fix

	Root cause:
		The previous ENTER/fan footer-clearance patch made the footer safer,
		but the artwork can still sit close enough to the top header that
		the top of the image/fan feels clipped.

	Contract:
		>=660 ENTER route only:
			make the artwork slightly smaller
			do not materially lower it toward the footer
			reduce the harsh upward fan pull
			do not touch content pages, mobile, scroll panes, JS, HTML,
			cache, WordPress, or .htaccess
	===================================================================== */

@media (min-width: 660px) {
	body.pc-cleo-stage.pc-cleo-enter .splash {
		top: 30px !important;
		transform: scale(0.92) !important;
		transform-origin: top center !important;
	}

	body.pc-cleo-stage.pc-cleo-enter #menu_splash {
		transform: translateY(-36px) scale(0.92) !important;
		transform-origin: top center !important;
	}

	body.pc-cleo-stage.pc-cleo-enter footer {
		bottom: 0 !important;
		z-index: 40 !important;
	}
}


/* =====================================================================
	Desktop ENTER/fan balanced top/footer clearance owner fix

	Root cause:
		Manual testing showed top: 50px / scale(.92) clears the header,
		but keeps the bottom too close to the footer. The balanced owner
		needs a slightly higher position with a smaller scale.

	Contract:
		>=660 ENTER route only:
			clear the top header
			preserve footer clearance
			do not touch content pages, mobile, scroll panes, JS, HTML,
			cache, WordPress, or .htaccess
	===================================================================== */

@media (min-width: 660px) {
	body.pc-cleo-stage.pc-cleo-enter .splash {
		top: 46px !important;
		transform: scale(0.90) !important;
		transform-origin: top center !important;
	}

	body.pc-cleo-stage.pc-cleo-enter #menu_splash {
		transform: translateY(-28px) scale(0.90) !important;
		transform-origin: top center !important;
	}

	body.pc-cleo-stage.pc-cleo-enter footer {
		bottom: 0 !important;
		z-index: 40 !important;
	}
}


/* =====================================================================
	Desktop ENTER/fan scale-only clearance owner fix

	Root cause:
		The ENTER/fan artwork is still slightly too large for the visible
		desktop viewport. Continuing to tune top values by a few pixels risks
		a patch loop and can trade header clipping for footer clipping.

	Contract:
		>=660 ENTER route only:
			do not keep chasing top offsets
			scale the artwork down more
			use center transform origin so top and bottom both gain clearance
			do not touch content pages, mobile, scroll panes, JS, HTML,
			cache, WordPress, or .htaccess
	===================================================================== */

@media (min-width: 660px) {
	body.pc-cleo-stage.pc-cleo-enter .splash {
		transform: scale(0.86) !important;
		transform-origin: center center !important;
	}

	body.pc-cleo-stage.pc-cleo-enter #menu_splash {
		transform: translateY(-28px) scale(0.86) !important;
		transform-origin: center center !important;
	}

	body.pc-cleo-stage.pc-cleo-enter footer {
		bottom: 0 !important;
		z-index: 40 !important;
	}
}