/* Lado Beco: preto e vermelho, tipografia punk, anotações manuscritas, clima de fanzine xerocado.
   Fontes: Rubik Dirt (OFL), Special Elite (Apache 2.0), Permanent Marker (Apache 2.0). */
@font-face {
	font-family: 'Rubik Dirt';
	font-display: swap;
	src: url('/temas/fontes/rubik-dirt-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Special Elite';
	font-display: swap;
	src: url('/temas/fontes/special-elite-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Permanent Marker';
	font-display: swap;
	src: url('/temas/fontes/permanent-marker-latin-400-normal.woff2') format('woff2');
}

body.tema-lado-beco {
	--preto: #0a0a0a;
	--preto-rgb: 10 10 10;
	--preto-2: #161616;
	--branco: #f4f1ea;
	--branco-rgb: 244 241 234;
	--papel: #e9e4d8;
	--azul: #ff2a1a;
	--azul-rgb: 255 42 26;
	--azul-base: #c80a00;
	--brilho-rgb: 225 6 0;
	--texto-2: #d4cec2;
	--cinza: #a19a8e;
	--cinza-papel: #3e3a33;
	--linha: rgb(244 241 234 / 0.2);
	--linha-papel: rgb(10 10 10 / 0.3);
	--f-nome: 'Rubik Dirt', Impact, sans-serif;
	--f-mono: 'Special Elite', 'Courier New', monospace;
	--f-slogan: 'Permanent Marker', cursive;
}

/* títulos: xerox desalinhado, com a sombra vermelha deslocada */
.tema-lado-beco :is(.nome-artista, .grande-texto, .player-botao strong, .troca-artista strong, .contatos strong) {
	font-weight: 400;
	letter-spacing: 0.01em;
}
.tema-lado-beco .nome-artista {
	text-shadow: 6px 4px 0 var(--azul-base);
	transform: rotate(-1.5deg);
	transform-origin: left bottom;
}
.tema-lado-beco .rev.on.nome-artista {
	transform: rotate(-1.5deg);
}
.tema-lado-beco .grande-texto {
	text-shadow: 3px 2px 0 var(--azul-base);
}

/* anotações à mão */
.tema-lado-beco .cab-meta,
.tema-lado-beco .rotulo {
	display: inline-block;
	font-family: 'Permanent Marker', cursive;
	font-size: clamp(18px, 2vw, 26px);
	letter-spacing: 0;
	text-transform: none;
	transform: rotate(-2.5deg);
	opacity: 1;
}
.tema-lado-beco .cab-meta {
	color: var(--azul);
	margin-top: 26px;
}
.tema-lado-beco .rotulo {
	color: var(--azul);
	padding: 0 6px;
	background: linear-gradient(transparent 58%, rgb(225 6 0 / 0.28) 58%);
}
.tema-lado-beco .papel .rotulo {
	color: var(--azul-base);
}
.tema-lado-beco .cab-artista .rotulo a {
	border: 0;
}

/* biografia datilografada, como fanzine */
.tema-lado-beco .bio-grande {
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: clamp(17px, 1.7vw, 22px);
	line-height: 1.6;
}
.tema-lado-beco .ficha-tecnica dt {
	color: var(--azul-base);
}

/* fundo sem vídeo: luz vermelha e grão pesado */
.tema-lado-beco .vid-vazio {
	background: radial-gradient(60% 80% at 75% 35%, rgb(225 6 0 / 0.45), transparent 65%), radial-gradient(50% 70% at 10% 100%, rgb(255 255 255 / 0.06), transparent 60%), #0a0a0a;
}
.tema-lado-beco .vid-vazio .luz {
	background: radial-gradient(40% 40% at 60% 50%, rgb(255 42 26 / 0.18), transparent 70%);
}
.tema-lado-beco .vid .grao {
	opacity: 0.32;
}
.tema-lado-beco .vid video,
.tema-lado-beco .cab-foto {
	filter: grayscale(1) contrast(1.45);
}

/* player e contatos com cara de colagem */
.tema-lado-beco .player-botao {
	background: #0a0a0a;
	border: 3px solid var(--azul);
	box-shadow: 8px 8px 0 var(--azul-base);
}
.tema-lado-beco .player-botao:hover {
	transform: translate(-2px, -2px);
	box-shadow: 10px 10px 0 var(--azul-base);
}
.tema-lado-beco .contatos a:hover strong {
	color: var(--azul);
	-webkit-text-stroke: 0;
}
.tema-lado-beco .rodape-slogan {
	transform: rotate(-1.5deg);
}