/* CDB TOKYO — page-specific styles (loaded after the main cirquedeboudoir.com stylesheet) */

:root {
	--cdb-pink: #ff2fb4;
	--cdb-pink-glow: rgba(255, 47, 180, .55);
	--cdb-teal: #3fc6c6;
	--cdb-night: #070d16;
}

/* Japanese text: Open Sans / Oswald have no kana or kanji, so fall back to good JP system fonts */
html:lang(ja) body,
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) h4 {
	font-family: "Open Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

/* ---------- Cover ---------- */
.cdb-cover {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Language selector (top nav) ---------- */
#mainNav .navbar-nav > li.cdb-navlang > a {
	padding-left: 7px;
	padding-right: 7px;
	opacity: .7;
}
#mainNav .navbar-nav > li.cdb-navlang > a:hover,
#mainNav .navbar-nav > li.cdb-navlang > a:focus {
	color: var(--cdb-pink);
	opacity: 1;
}
#mainNav .navbar-nav > li.cdb-navlang.active > a {
	color: var(--cdb-pink);
	opacity: 1;
	background: transparent;
}
/* Just above the collapse point, tighten the spacing so the longer French/Japanese labels
   still fit on one row beside the logo */
@media (min-width: 992px) and (max-width: 1199px) {
	#mainNav .navbar-nav > li > a {
		padding-left: 8px;
		padding-right: 8px;
	}
	#mainNav .navbar-nav > li.cdb-navlang > a {
		padding-left: 5px;
		padding-right: 5px;
	}
}
/* When the nav collapses (main stylesheet: max-width 991px), the language links move into the
   bar next to the hamburger button so they're visible without opening the menu */
#mainNav .cdb-navlang-xs {
	display: none;
}
@media (max-width: 991px) {
	#mainNav .navbar-nav > li.cdb-navlang {
		display: none;
	}
	#mainNav .cdb-navlang-xs {
		display: block;
	}
}
#mainNav .cdb-navlang-xs {
	float: right;
	margin: 0;
	padding: 0;
	list-style: none;
}
#mainNav .cdb-navlang-xs li {
	display: inline-block;
}
#mainNav .cdb-navlang-xs a {
	display: block;
	padding: 15px 6px;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	opacity: .7;
	text-decoration: none;
}
#mainNav .cdb-navlang-xs .active a {
	color: #F70663;
	opacity: 1;
}

/* ---------- Lineup ---------- */
.cdb-lineup {
	background: var(--cdb-night);
	color: #fff;
	padding: 60px 0 70px;
	scroll-margin-top: 60px;
}
.cdb-lineup-title,
.cdb-lineup-heading {
	font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}
.cdb-lineup-title {
	margin: 0 0 10px;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: .12em;
	text-shadow: 0 0 6px var(--cdb-pink), 0 0 22px var(--cdb-pink-glow);
}
.cdb-lineup-heading {
	margin: 50px 0 22px;
	font-size: 28px;
	font-weight: 400;
	letter-spacing: .2em;
	color: var(--cdb-pink);
	text-shadow: 0 0 14px var(--cdb-pink-glow);
}
.cdb-lineup-heading:after {
	content: "";
	display: block;
	width: 60px;
	height: 2px;
	margin: 12px auto 0;
	background: var(--cdb-teal);
}

/* Grid: 3 across, 2 on phones. No gaps or borders — photos sit edge to edge.
   An incomplete last row is centred. */
.cdb-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 1170px;
	margin: 0 auto;
}
.cdb-tile {
	position: relative;
	display: block;
	width: 33.3333%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	background: #111;
	color: #fff;
	text-decoration: none;
}
.cdb-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease, filter .4s ease;
}
a.cdb-tile:hover img,
a.cdb-tile:focus img {
	transform: scale(1.04);
	filter: brightness(1.1);
}
.cdb-tile-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px 14px 12px;
	background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
	line-height: 1.25;
	pointer-events: none;
}
.cdb-tile-name {
	display: block;
	font-family: "Oswald", "Arial Narrow", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.cdb-tile-note {
	display: block;
	font-size: 12px;
	color: var(--cdb-teal);
}
.cdb-tile-handle {
	display: inline-block;
	margin-right: 10px;
	font-size: 13px;
	color: #fff;
	opacity: .85;
}
a.cdb-tile-handle {
	pointer-events: auto;
	color: #fff;
}
a.cdb-tile:hover .cdb-tile-handle,
a.cdb-tile-handle:hover,
a.cdb-tile-handle:focus {
	color: var(--cdb-pink);
	opacity: 1;
	text-decoration: none;
}

/* Tiles with finished artwork: the name is in the image, so only show the Instagram handle */
.cdb-tile--art .cdb-tile-name,
.cdb-tile--art .cdb-tile-note {
	display: none;
}
.cdb-tile--art .cdb-tile-caption {
	padding-top: 24px;
	text-align: right;
	background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}
.cdb-tile--art .cdb-tile-handle {
	margin: 0 0 0 10px;
}

.cdb-lineup-cta {
	margin-top: 50px;
	text-align: center;
}
.cdb-ticket-btn {
	display: inline-block;
	padding: 14px 40px;
	background: var(--cdb-pink);
	color: #fff;
	font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
	font-size: 20px;
	letter-spacing: .15em;
	box-shadow: 0 0 18px var(--cdb-pink-glow);
	text-decoration: none;
}
.cdb-ticket-btn:hover,
.cdb-ticket-btn:focus {
	background: #fff;
	color: var(--cdb-pink);
	text-decoration: none;
}

@media (max-width: 767px) {
	/* The main stylesheet hangs the ticket graphic 50px past its column. On phones that widens the
	   whole page, which pushes the fixed nav's hamburger button off the right edge of the screen. */
	#sidebar .ticketImage {
		margin-right: 0;
	}
	.cdb-lineup {
		padding: 40px 0 50px;
	}
	.cdb-lineup-title {
		font-size: 34px;
	}
	.cdb-lineup-heading {
		margin-top: 36px;
		font-size: 22px;
	}
	.cdb-tile {
		width: 50%;
	}
	.cdb-tile-caption {
		padding: 30px 8px 8px;
	}
	.cdb-tile-name {
		font-size: 15px;
	}
	.cdb-tile-handle {
		font-size: 11px;
	}
	/* Duo tiles: two long handles don't fit on a phone-sized tile, so show just the icons */
	.cdb-tile--art .cdb-handle-text {
		display: none;
	}
	.cdb-tile--art a.cdb-tile-handle {
		font-size: 18px;
		margin-left: 12px;
	}
}