/* LMS Tune In: vintage receiver social block */
.lti {
	--lti-black: #0e0b0a;
	--lti-face: #1a1412;
	--lti-burgundy: #6e1423;
	--lti-burgundy-deep: #4a0c17;
	--lti-gold: #c9a24a;
	--lti-gold-soft: #e6c879;
	--lti-cream: #f3e6c8;
	--lti-glow: #ffb648;
	box-sizing: border-box;
	padding: 56px 16px;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(110, 20, 35, .55), transparent 65%),
		var(--lti-black);
	color: var(--lti-cream);
	font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
}
.lti *, .lti *::before, .lti *::after { box-sizing: border-box; }

.lti__receiver {
	max-width: 1120px;
	margin: 0 auto;
	padding: 28px 28px 22px;
	border-radius: 14px;
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #2a201c, var(--lti-face) 40%, #120d0c);
	border: 1px solid #3a2c22;
	box-shadow:
		inset 0 1px 0 rgba(230, 200, 121, .25),
		inset 0 0 0 6px #120d0c,
		inset 0 0 0 7px rgba(201, 162, 74, .45),
		0 30px 60px rgba(0, 0, 0, .55);
}

/* Head */
.lti__head {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
}
.lti__brand { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lti__badge {
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: 22px;
	color: var(--lti-black);
	background: var(--lti-gold);
	padding: 2px 14px 4px;
	border-radius: 999px;
	line-height: 1.1;
}
.lti__model {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lti-gold);
	opacity: .8;
}
.lti__titles { text-align: center; }
.lti__kicker {
	margin: 0 0 4px;
	font-size: 13px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--lti-gold);
}
.lti__title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.05;
	color: var(--lti-cream);
	text-shadow: 0 2px 0 var(--lti-burgundy-deep);
}
.lti__lamp {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--lti-gold-soft);
}
.lti__lamp span {
	width: 10px; height: 10px; border-radius: 50%;
	background: #ff5a3c;
	box-shadow: 0 0 10px 2px rgba(255, 90, 60, .7);
	animation: lti-pulse 2.4s ease-in-out infinite;
}
@keyframes lti-pulse { 50% { opacity: .45; box-shadow: 0 0 4px 1px rgba(255,90,60,.4); } }

/* Dial window */
.lti__dial {
	position: relative;
	height: 112px;
	margin-bottom: 22px;
	border-radius: 8px;
	overflow: hidden;
	background:
		radial-gradient(ellipse at var(--glow, 12%) 60%, rgba(255, 182, 72, .35), transparent 40%),
		linear-gradient(180deg, #2b1a0f, #1c120b);
	border: 2px solid #0a0706;
	box-shadow: inset 0 0 0 1px rgba(201,162,74,.35), inset 0 6px 18px rgba(0,0,0,.8);
	transition: background .5s ease;
}
.lti__dial::after { /* glass reflection */
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 45%);
	pointer-events: none;
}
.lti__scale {
	position: absolute; left: 4%; right: 4%; top: 14px;
	display: flex; justify-content: space-between; align-items: flex-start;
}
.lti__scale i { display: block; width: 1px; height: 9px; background: rgba(230, 200, 121, .55); }
.lti__scale i.is-major { height: 16px; width: 2px; background: var(--lti-gold-soft); }
.lti__freqs {
	position: absolute; left: 4%; right: 4%; top: 34px;
	display: flex; justify-content: space-between;
	font-size: 12px; letter-spacing: .08em; color: var(--lti-gold);
}
.lti__freqs span { width: 0; display: flex; justify-content: center; }
.lti__marks { position: absolute; inset: 0; }
.lti__mark {
	position: absolute; left: var(--pos); bottom: 14px;
	transform: translateX(-50%);
	font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
	color: rgba(243, 230, 200, .55);
	white-space: nowrap;
	transition: color .3s ease, text-shadow .3s ease;
}
.lti__mark.is-on { color: var(--lti-glow); text-shadow: 0 0 10px rgba(255, 182, 72, .8); }
.lti__needle {
	position: absolute; top: 6px; bottom: 6px; left: var(--pos);
	width: 3px; margin-left: -1.5px;
	background: linear-gradient(180deg, #ff6b4a, #d8321c);
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(255, 90, 60, .85);
	transition: left .7s cubic-bezier(.34, 1.4, .5, 1);
}

/* Stations */
.lti__stations {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
	gap: 14px;
}
.lti__stations li { margin: 0; padding: 0; }
.lti__station {
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start;
	height: 100%;
	padding: 18px 18px 16px;
	border-radius: 8px;
	background: linear-gradient(180deg, var(--lti-burgundy), var(--lti-burgundy-deep));
	border: 1px solid rgba(201, 162, 74, .4);
	color: var(--lti-cream) !important;
	text-decoration: none !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 0 #2a070d;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lti__station:hover, .lti__station:focus-visible, .lti__station.is-on {
	transform: translateY(-3px);
	border-color: var(--lti-gold-soft);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 9px 0 #2a070d, 0 0 24px rgba(255, 182, 72, .25);
}
.lti__station:focus-visible { outline: 2px solid var(--lti-gold-soft); outline-offset: 3px; }
.lti__freq {
	font-size: 11px; letter-spacing: .22em; color: var(--lti-gold);
	margin-bottom: 12px;
}
.lti__icon {
	display: grid; place-items: center;
	width: 46px; height: 46px; margin-bottom: 12px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #3b2e25, #0e0b0a 70%);
	border: 2px solid var(--lti-gold);
	box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.15);
}
.lti__icon svg { width: 20px; height: 20px; fill: var(--lti-gold-soft); }
.lti__room {
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic; font-weight: 700;
	font-size: 22px; line-height: 1.15;
	color: var(--lti-cream);
}
.lti__net {
	font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--lti-gold-soft);
	margin: 4px 0 10px;
}
.lti__blurb {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px; line-height: 1.5;
	color: rgba(243, 230, 200, .85);
	margin-bottom: 14px;
}
.lti__cta {
	margin-top: auto;
	font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--lti-black);
	background: var(--lti-gold);
	padding: 6px 12px; border-radius: 3px;
}
.lti__sticker {
	position: absolute; top: -10px; right: -8px;
	width: 62px; height: 62px;
	display: grid; place-items: center; text-align: center;
	border-radius: 50%;
	background: var(--lti-gold);
	color: var(--lti-black);
	font-size: 11px; line-height: 1.05; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
	transform: rotate(12deg);
	box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 3px rgba(14,11,10,.15);
}
.lti__also {
	margin: 18px 0 0;
	text-align: center;
	font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
	color: rgba(243, 230, 200, .6);
}
.lti__also a { color: var(--lti-gold) !important; text-decoration: none; border-bottom: 1px solid rgba(201,162,74,.4); }
.lti__also a:hover { color: var(--lti-gold-soft) !important; }

.lti .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* Compact (end of article) */
.lti--compact { padding: 0; background: none; margin: 40px 0; }
.lti--compact .lti__receiver { padding: 20px; }
.lti--compact .lti__head { margin-bottom: 14px; }
.lti--compact .lti__lamp, .lti--compact .lti__model { display: none; }
.lti--compact .lti__title { font-size: 28px; }
.lti--compact .lti__dial { height: 72px; margin-bottom: 14px; }
.lti--compact .lti__freqs { display: none; }
.lti--compact .lti__station { padding: 14px; }
.lti--compact .lti__icon { width: 38px; height: 38px; margin-bottom: 8px; }
.lti--compact .lti__room { font-size: 18px; }
.lti--compact .lti__cta { font-size: 11px; }

/* Tablet */
@media (max-width: 900px) {
	.lti__stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lti__head { grid-template-columns: 1fr; text-align: center; }
	.lti__brand { align-items: center; flex-direction: row; justify-content: center; }
	.lti__lamp { display: none; }
}

/* Phone */
@media (max-width: 560px) {
	.lti { padding: 36px 16px; }
	.lti__receiver { padding: 18px 14px; }
	.lti__model { display: none; }
	.lti__dial { height: 80px; }
	.lti__freqs { display: none; }
	.lti__mark { font-size: 9px; letter-spacing: .1em; bottom: 10px; }
	.lti__stations { grid-template-columns: 1fr; gap: 12px; }
	.lti__station {
		display: grid;
		grid-template-columns: 46px 1fr;
		column-gap: 14px;
		align-items: center;
		padding-right: 18px;
	}
	.lti__station--tiktok { padding-right: 58px; }
	.lti__icon { grid-row: 1 / span 3; margin: 0; }
	.lti__freq { display: none; }
	.lti__net { margin: 2px 0 6px; }
	.lti__blurb { display: none; }
	.lti__cta { grid-column: 2; justify-self: start; }
	.lti__sticker { width: 52px; height: 52px; font-size: 10px; top: -8px; right: -4px; }
}

@media (prefers-reduced-motion: reduce) {
	.lti__needle, .lti__station, .lti__dial { transition: none; }
	.lti__lamp span { animation: none; }
}