.vr-videoteca{
	--vr-wine:#8f2c2c;
	--vr-gold:#c39b58;
	--vr-cream:#f7f1e6;
	--vr-ink:#171717;
	--vr-muted:#746b5d;
	--vr-line:#e7ded0;
	--vr-columns:4;
	font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:var(--vr-ink);
	background:#fff;
	padding:clamp(20px,3vw,34px);
	border-radius:24px;
	box-shadow:0 16px 45px rgba(0,0,0,.08);
}
.vr-videoteca *{box-sizing:border-box}
.vr-header{
	padding-bottom:18px;
	margin-bottom:20px;
	border-bottom:1px solid var(--vr-line);
}
.vr-kicker{
	margin:0 0 4px;
	text-transform:uppercase;
	letter-spacing:.14em;
	font-weight:800;
	font-size:.82rem;
	color:var(--vr-wine);
}
.vr-header h2{
	margin:0;
	font-family:Georgia,"Times New Roman",serif;
	font-size:clamp(2rem,4vw,3.25rem);
	line-height:1.05;
}
.vr-toolbar{margin-bottom:20px}
.vr-search{
	width:min(100%,360px);
	padding:13px 15px;
	border:1px solid #bcae99;
	border-radius:12px;
	background:#fff;
	font:inherit;
}
.vr-search:focus{
	outline:3px solid rgba(143,44,44,.18);
	border-color:var(--vr-wine);
}
.vr-grid{
	display:grid;
	grid-template-columns:repeat(var(--vr-columns),minmax(0,1fr));
	gap:22px;
}
.vr-card{
	overflow:hidden;
	display:flex;
	flex-direction:column;
	min-width:0;
	border:1px solid var(--vr-line);
	border-radius:18px;
	background:#fff;
	box-shadow:0 8px 24px rgba(0,0,0,.05);
	transition:transform .2s ease,box-shadow .2s ease;
}
.vr-card:hover{
	transform:translateY(-4px);
	box-shadow:0 14px 34px rgba(0,0,0,.09);
}
.vr-thumb{
	position:relative;
	aspect-ratio:16/9;
	overflow:hidden;
	background:#eee;
}
.vr-thumb img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.vr-play{
	position:absolute;
	inset:50% auto auto 50%;
	transform:translate(-50%,-50%);
	display:flex;
	align-items:center;
	justify-content:center;
	width:58px;
	height:58px;
	border:0;
	border-radius:50%;
	background:rgba(255,255,255,.95);
	color:var(--vr-ink);
	text-decoration:none;
	cursor:pointer;
	box-shadow:0 10px 30px rgba(0,0,0,.2);
	font-size:1.2rem;
}
.vr-body{
	display:flex;
	flex:1;
	flex-direction:column;
	padding:18px;
}
.vr-card h3{
	margin:0 0 10px;
	font-family:Georgia,"Times New Roman",serif;
	font-size:1.15rem;
	line-height:1.35;
}
.vr-card h3 a{
	color:var(--vr-ink);
	text-decoration:none;
}
.vr-card h3 a:hover{text-decoration:underline}
.vr-card time{
	margin-bottom:18px;
	color:var(--vr-muted);
	font-size:.9rem;
}
.vr-watch{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:46px;
	margin-top:auto;
	padding:10px 16px;
	border:0;
	border-radius:999px;
	background:var(--vr-ink);
	color:#fff;
	text-decoration:none;
	font:inherit;
	font-weight:800;
	cursor:pointer;
}
.vr-card:first-child .vr-watch{background:var(--vr-gold)}
.vr-status{min-height:1.5em}
.vr-empty{grid-column:1/-1;padding:20px;border-radius:14px;background:var(--vr-cream)}
.vr-modal{
	position:fixed;
	inset:0;
	z-index:999999;
	display:grid;
	place-items:center;
	padding:20px;
}
.vr-modal[hidden]{display:none}
.vr-backdrop{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.78);
}
.vr-dialog{
	position:relative;
	z-index:2;
	width:min(1100px,96vw);
	aspect-ratio:16/9;
	background:#000;
	border-radius:18px;
	overflow:hidden;
	box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.vr-frame,.vr-frame iframe{
	width:100%;
	height:100%;
	border:0;
}
.vr-close{
	position:absolute;
	top:10px;
	right:10px;
	z-index:3;
	width:42px;
	height:42px;
	border:0;
	border-radius:50%;
	background:#fff;
	color:#111;
	font-size:1.7rem;
	cursor:pointer;
}
body.vr-modal-open{overflow:hidden}
.vr-error{padding:14px;border-left:4px solid #b32d2e;background:#fff1f1}
@media(max-width:1200px){
	.vr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
	.vr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
	.vr-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
	.vr-card{transition:none}
}