/*
Theme Name: JK Artist
Theme URI: https://jk-deng.com/
Author: JK Studio
Description: Visual-preservation theme for the J.K. Deng official website.
Version: 1.0.8
Text Domain: jk-artist
*/

/* Filmography reference alignment: retain the original left grey panel, its
 * television image and shadow overlay, but remove the unrelated full-panel portrait. */
.recognitionHolder .imgrecognition { background-image: none; }

/* A quiet gallery finish: cover and hover content share one subtle edge. */
#Discography .portfolio .item { border-radius: 6px; overflow: hidden; }
#Discography .jk-created-produced-section { clear: both; margin-top: 60px; }
#Discography .portfolio .item { aspect-ratio: 1 / 1; position: relative; }
#Discography .portfolio .item > img { display: block; height: 100%; object-fit: cover; width: 100%; }
#Discography .portfolio .itemDesc { align-items: center !important; box-sizing: border-box; display: flex !important; inset: 0; justify-content: center !important; padding: 18px; }
#Discography .portfolio .itemDesc .itemDescInner { align-items: center !important; display: flex !important; flex-direction: column; justify-content: center !important; margin: 0 !important; max-height: 100%; text-align: center; width: 100%; }
#Discography .itemDescInner h3 { margin: 0; }
#Discography .itemDescInner .itemBtn { margin: 12px 0 0; }

/* Muted wine visual system: keep white text readable while replacing the legacy accent
 * controls, headings, and the loading animation without changing the layout. */
:root {
	--jk-wine: #8f4b5a;
	--jk-wine-light: #b97984;
	--jk-wine-dark: #65313c;
}

/* Preserve the complete artwork at every viewport width. The legacy fixed
 * height cut off the sides of the wide hero image on narrower screens. */
.profileTeaser .slides li {
	aspect-ratio: 1842 / 518;
	height: auto !important;
	background: #111;
}

.profileTeaser .slides li > img.slide {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

/* Mobile layout safeguards: retain the desktop visual system while preventing
 * fixed legacy widths from overflowing narrow touch screens. */
@media only screen and (max-width: 767px) {
	/* The compact fixed header otherwise covers the upper half of the banner. */
	body.home #wrapper { padding-top: 69px; }
	/* FlexSlider keeps an inline viewport height after it converts the image to a
	 * background. Preserve the banner's source ratio instead of collapsing it. */
	.profileTeaser .flexslider { height: clamp(90px, 28.12vw, 216px) !important; }
	.profileTeaser .flex-viewport { height: clamp(90px, 28.12vw, 216px) !important; }
	.profileTeaser .slides li { height: clamp(90px, 28.12vw, 216px) !important; }
	.profileTeaser .slides li { background-position: center center !important; background-size: cover !important; }
	.one-third.column.intro, .one-third.column.info { text-align: center; }
	.one-third.column.info ul { display: inline-block; max-width: 100%; }
	.one-third.column.info li { white-space: normal; }
	.filterNav { padding-left: 12px; padding-right: 12px; }
	.rcgIntro { text-align: center; }
	.rcgDetails .rcgDet { max-width: calc(100% - 58px); }
	/* The desktop left-panel illustration becomes an oversized empty grey field
	 * on phones. Keep the film list clean and compact at this breakpoint. */
	#Filmography .recognitionHolder { background: #f5f5f5; }
	#Filmography .imgrecognition, #Filmography .rcgIntro { display: none; }
	#Filmography .rcgDetails.margHTop { margin-top: 48px !important; }
	.education .det { box-sizing: border-box; max-width: calc(100% - 64px); }
	.education .det h3 span { overflow-wrap: anywhere; }
}

/* Branded gallery 404: use the owner-supplied J.K. mark without artist photography. */
.jk-404 {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	min-height: 100vh;
	overflow: hidden;
	padding: 48px 24px;
	position: relative;
	text-align: center;
}

.jk-404__content { max-width: 680px; position: relative; width: 100%; z-index: 2; }
.jk-404__logo { display: block; height: auto; margin: 0 auto 30px; max-width: 130px; width: 32%; }
.jk-404__eyebrow { font-family: 'open_sanslight', Arial, sans-serif; font-size: 12px; letter-spacing: .14em; margin: 0 0 14px; text-transform: uppercase; }
.jk-404__number { font-family: 'RobotoBoldCondensed', Arial, sans-serif; font-size: clamp(130px, 28vw, 280px); font-weight: 700; letter-spacing: -.08em; line-height: .7; margin-left: -.08em; pointer-events: none; }
.jk-404 h1 { font-family: 'RobotoBoldCondensed', Arial, sans-serif; font-size: clamp(26px, 4vw, 42px); line-height: 1.1; margin: 28px auto 14px; text-transform: none; }
.jk-404__body { font-family: 'open_sanslight', Arial, sans-serif; font-size: 16px; line-height: 1.65; margin: 0 auto 28px; max-width: 440px; }
.jk-404__home { display: inline-block; font-family: 'RobotoBoldCondensed', Arial, sans-serif; font-size: 13px; letter-spacing: .08em; padding: 13px 22px; text-transform: uppercase; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.jk-404__home:hover { transform: translateY(-2px); }

.jk-404--gallery { background: #f3f3f3; color: #343434; }
.jk-404--gallery:before { border: 1px solid rgba(143, 75, 90, .22); content: ''; inset: 24px; pointer-events: none; position: absolute; }
.jk-404--gallery .jk-404__logo { mix-blend-mode: multiply; }
.jk-404--gallery .jk-404__eyebrow { color: #8f4b5a; }
.jk-404--gallery .jk-404__number { color: rgba(143, 75, 90, .13); }
.jk-404--gallery .jk-404__home { background: #8f4b5a; color: #fff; }
.jk-404--gallery .jk-404__home:hover { background: #65313c; }

@media only screen and (max-width: 767px) {
	.jk-404 { min-height: 100svh; padding: 38px 20px; }
	.jk-404--gallery:before { inset: 14px; }
	.jk-404__logo { max-width: 102px; }
	.jk-404__number { font-size: clamp(112px, 35vw, 180px); }
}
.createdProducedArtist { margin: 8px 0 0; font-size: 12px; line-height: 1.45; letter-spacing: .03em; opacity: .84; }