/* Artwork gallery - fit-to-screen viewer */

.artwork-empty{
	margin:20px auto;
	padding:24px;
	border:1px dashed rgba(230,201,141,.55);
	border-radius:16px;
	background:linear-gradient(180deg,rgba(68,24,32,.72),rgba(32,10,17,.82));
	color:#ffe8ac;
	text-align:center;
	font-size:18px;
}

.artwork-viewer{
	margin-top:12px;
}

.media-panel{
	padding-top:26px !important;
	padding-bottom:26px !important;
}

.media-panel > .eyebrow{
	margin-bottom:4px;
}

.media-panel > h1{
	margin-top:0;
	margin-bottom:8px;
	font-size:48px;
	line-height:1;
}

.media-panel > .page-note{
	margin-top:0;
	margin-bottom:14px;
	font-size:17px;
	line-height:1.35;
}

.artwork-info{
	max-width:820px;
	margin:0 auto 10px;
	text-align:center;
	color:#ffe8ac;
}

.artwork-info h2{
	margin:0 0 4px;
	color:#fff1bd;
	font-size:28px;
	line-height:1.15;
	text-shadow:0 2px 4px rgba(0,0,0,.5);
}

.artwork-info p{
	margin:0 auto;
	font-size:16px;
	line-height:1.3;
	color:#ffe8ac;
}

.art-count{
	margin-top:6px !important;
	color:#e6c98d !important;
	font-size:14px !important;
	font-weight:bold;
}

.artwork-stage{
	display:grid;
	grid-template-columns:56px minmax(0,760px) 56px;
	align-items:center;
	justify-content:center;
	gap:14px;
	margin-top:10px;
}

.artwork-preview-button{
	width:760px;
	max-width:100%;
	height:480px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:10px;
	background:
		radial-gradient(circle at center,rgba(110,24,37,.42),rgba(20,7,12,.88)),
		linear-gradient(180deg,rgba(68,24,32,.72),rgba(32,10,17,.82));
	border:1px solid rgba(190,140,74,.52);
	border-radius:18px;
	box-shadow:0 14px 34px rgba(0,0,0,.28);
	cursor:pointer;
	overflow:hidden;
	box-sizing:border-box;
}

.artwork-preview-button:hover{
	border-color:rgba(255,226,157,.86);
	box-shadow:0 16px 38px rgba(0,0,0,.32),0 0 16px rgba(255,216,133,.12);
}

.artwork-preview-button img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
	border-radius:10px;
	box-shadow:0 8px 24px rgba(0,0,0,.32);
	background:#fff;
}

.art-nav{
	width:48px;
	height:64px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid rgba(230,201,141,.72);
	border-radius:14px;
	background:linear-gradient(180deg,rgba(166,37,53,.92),rgba(72,14,24,.94));
	color:#fff0c2;
	font-family:Georgia,"Times New Roman",serif;
	font-size:42px;
	line-height:1;
	cursor:pointer;
	box-shadow:0 8px 20px rgba(0,0,0,.30);
	transition:transform .16s ease,filter .16s ease;
}

.art-nav:hover{
	filter:brightness(1.12);
	transform:scale(1.04);
}

.art-nav.hidden{
	visibility:hidden;
	pointer-events:none;
}

.art-thumb-row{
	max-width:760px;
	margin:14px auto 0;
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:10px;
}

.art-thumb{
	height:70px;
	padding:4px;
	border:1px solid rgba(190,140,74,.42);
	border-radius:10px;
	background:rgba(32,10,17,.72);
	cursor:pointer;
	overflow:hidden;
	transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;
}

.art-thumb:hover{
	transform:translateY(-2px);
	border-color:rgba(255,226,157,.76);
}

.art-thumb.active{
	border-color:rgba(255,226,157,.98);
	box-shadow:0 0 14px rgba(255,216,133,.18);
}

.art-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:7px;
	display:block;
	background:#fff;
}

.art-lightbox{
	display:none;
	position:fixed;
	inset:0;
	z-index:10000;
	background:rgba(0,0,0,.88);
	padding:48px;
	align-items:center;
	justify-content:center;
}

.art-lightbox.show{
	display:flex;
}

.art-lightbox img{
	display:block;
	max-width:96vw;
	max-height:92vh;
	width:auto;
	height:auto;
	border-radius:10px;
	box-shadow:0 24px 80px rgba(0,0,0,.72);
	background:#fff;
}

.art-lightbox-close{
	position:fixed;
	top:18px;
	right:24px;
	border:0;
	background:transparent;
	color:#fff0c2;
	font-family:Georgia,"Times New Roman",serif;
	font-size:44px;
	line-height:1;
	cursor:pointer;
	padding:0;
}

.art-lightbox-close:hover{
	color:white;
}

@media(max-height:820px) and (min-width:900px){
	.page-shell{
		padding-top:22px !important;
		padding-bottom:22px !important;
	}

	.media-panel{
		padding-top:22px !important;
		padding-bottom:22px !important;
	}

	.media-panel > h1{
		font-size:42px;
	}

	.media-panel > .page-note{
		margin-bottom:10px;
	}

	.artwork-info h2{
		font-size:25px;
	}

	.artwork-preview-button{
		height:430px;
	}

	.art-thumb{
		height:62px;
	}
}

@media(max-width:980px){
	.artwork-stage{
		grid-template-columns:48px minmax(0,1fr) 48px;
		gap:10px;
	}

	.artwork-preview-button{
		width:100%;
		height:440px;
	}

	.art-nav{
		width:44px;
		height:58px;
		font-size:40px;
	}

	.art-thumb-row{
		max-width:100%;
		gap:8px;
	}
}

@media(max-width:760px){
	.media-panel > h1{
		font-size:38px;
	}

	.artwork-stage{
		grid-template-columns:40px minmax(0,1fr) 40px;
		gap:8px;
	}

	.artwork-preview-button{
		height:340px;
		padding:8px;
	}

	.art-nav{
		width:36px;
		height:48px;
		font-size:34px;
		border-radius:10px;
	}

	.artwork-info h2{
		font-size:24px;
	}

	.artwork-info p{
		font-size:15px;
	}

	.art-thumb-row{
		grid-template-columns:repeat(5,1fr);
	}

	.art-thumb{
		height:54px;
	}

	.art-lightbox{
		padding:28px;
	}
}