/* ============================================================
   Radio Lepanto 101.4 FM — Editorial / professional redesign
   ============================================================ */

:root {
	/* Brand */
	--blue:       #014A97;
	--blue-dark:  #0A1628;
	--blue-deep:  #061122;
	--blue-mid:   #1F66B8;
	--blue-light: #6CC4F4;
	--blue-50:    #F1F5FB;
	--blue-100:   #DEEAF7;

	/* Accent */
	--red:        #E11D48;

	/* Neutrals */
	--ink:        #0A1019;
	--ink-2:      #1F2937;
	--ink-3:      #4B5563;
	--ink-4:      #9CA3AF;
	--ink-5:      #D1D5DB;
	--line:       #E5E7EB;
	--line-soft:  #F3F4F6;
	--bg:         #FFFFFF;
	--bg-soft:    #FAFAFB;
	--bg-section: #F8F9FB;

	/* Typography */
	--font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-serif: 'Fraunces', 'Source Serif 4', Georgia, serif;

	/* Layout */
	--max:        1280px;
	--player-h:   76px;

	--shadow-xs:  0 1px 2px rgba(10, 16, 25, 0.04);
	--shadow-sm:  0 2px 8px rgba(10, 16, 25, 0.06);
	--shadow:     0 8px 24px rgba(10, 16, 25, 0.08);
	--shadow-lg:  0 20px 60px rgba(10, 16, 25, 0.16);

	--ease:       cubic-bezier(0.16, 1, 0.3, 1);
	--t:          280ms var(--ease);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-2);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'cv11', 'ss01';
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: var(--blue); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--blue-mid); }
::selection { background: var(--blue); color: #fff; }

.skiplink {
	position: absolute; left: -9999px; top: 8px;
	padding: 8px 16px; background: var(--ink); color: #fff;
	z-index: 10000; border-radius: 4px;
}
.skiplink:focus { left: 8px; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.text-center { text-align: center; }

/* Reveal-on-scroll animation */
[data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   STICKY PLAYER BAR — refined dark
   ============================================================ */
.player-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--blue-dark);
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.player-bar-inner {
	display: grid;
	grid-template-columns: auto 1fr auto auto auto;
	gap: 20px;
	align-items: center;
	min-height: var(--player-h);
	padding: 12px 28px;
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo {
	height: 48px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	border-radius: 6px;
}

.player-bar-info {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

/* Audio visualizer (4 bars, animate when playing) */
.visualizer {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 22px;
	flex-shrink: 0;
}
.visualizer span {
	display: block;
	width: 3px;
	height: 6px;
	background: var(--blue-light);
	border-radius: 2px;
	transition: height 200ms ease;
}
.player-bar.is-playing .visualizer span {
	animation: viz 1.1s ease-in-out infinite;
}
.player-bar.is-playing .visualizer span:nth-child(1) { animation-delay: 0s; }
.player-bar.is-playing .visualizer span:nth-child(2) { animation-delay: 0.2s; }
.player-bar.is-playing .visualizer span:nth-child(3) { animation-delay: 0.4s; }
.player-bar.is-playing .visualizer span:nth-child(4) { animation-delay: 0.1s; }
@keyframes viz {
	0%, 100% { height: 6px; }
	50%      { height: 20px; }
}

.np-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.np-label {
	font-size: 10px; font-weight: 700;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--red);
	line-height: 1;
}
.np-show {
	font-size: 14px; font-weight: 600;
	color: rgba(255,255,255,0.92);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 320px;
	letter-spacing: 0.005em;
}

.play-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 22px;
	background: #fff;
	color: var(--blue-dark);
	border: 0;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.01em;
	transition: transform 220ms var(--ease), box-shadow var(--t);
	flex-shrink: 0;
	box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.play-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.play-btn:active { transform: translateY(0); }
.play-btn-icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
	background: var(--blue-dark);
	color: #fff;
	border-radius: 50%;
}
.play-btn-icon svg { width: 12px; height: 12px; }
.play-btn .pause-icon { display: none; }
.play-btn.is-playing .play-icon { display: none; }
.play-btn.is-playing .pause-icon { display: inline-block; }

.freq-badge {
	display: flex;
	align-items: baseline;
	gap: 4px;
	color: rgba(255,255,255,0.92);
	padding: 8px 14px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 6px;
	font-weight: 700;
	flex-shrink: 0;
}
.freq-num { font-size: 17px; font-family: var(--font-serif); letter-spacing: -0.01em; }
.freq-unit { font-size: 11px; letter-spacing: 0.1em; opacity: 0.7; }

.nav-toggle {
	display: none;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	color: #fff;
	width: 42px; height: 42px;
	border-radius: 6px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background var(--t);
}
.nav-toggle:hover { background: rgba(255,255,255,0.12); }

/* ============================================================
   MAIN NAV
   ============================================================ */
.nav-main {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: var(--player-h);
	z-index: 99;
}
.nav-main ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.nav-main a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 16px 22px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-3);
	letter-spacing: 0.01em;
	border-bottom: 2px solid transparent;
	transition: color var(--t), border-color var(--t);
}
.nav-main a:hover {
	color: var(--blue);
	border-bottom-color: var(--blue);
}
.nav-main .nav-ext a { color: var(--ink-4); }
.nav-main .nav-ext a:hover { color: var(--ink); }
.nav-main .nav-ext a svg { opacity: 0.6; }

/* ============================================================
   HERO — full-bleed photo with overlay
   ============================================================ */
.hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(540px, 80vh, 760px);
	display: flex;
	align-items: center;
	background: var(--blue-deep);
	color: #fff;
}
.hero-photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 30%;
	opacity: 0;
	transition: opacity 800ms var(--ease);
	transform: scale(1.04);
	filter: blur(2px);
}
.hero-photo.is-loaded { opacity: 0.55; }
.hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(6, 17, 34, 0.4) 0%, rgba(6, 17, 34, 0.85) 70%, var(--blue-deep) 100%),
		radial-gradient(circle at 70% 40%, rgba(108, 196, 244, 0.15), transparent 60%);
}
.hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 80px 28px;
}

/* Anemoyiannis monument PNG — black lines flipped to white via CSS filter.
   invert(1)        : black→white, white→black
   mix-blend-mode   : 'screen' lifts the now-black background to transparent
                      over the dark hero, leaving only the white lines visible. */
.hero-harbor {
	position: absolute;
	right: 20px;
	bottom: 0;
	width: clamp(320px, 42vw, 600px);
	height: auto;
	pointer-events: none;
	z-index: 1;
	opacity: 0.65;
	filter:
		invert(1)
		drop-shadow(0 0 18px rgba(255, 255, 255, 0.3))
		drop-shadow(0 0 48px rgba(108, 196, 244, 0.22));
	mix-blend-mode: screen;
	animation: harbor-float 9s ease-in-out infinite;
}
@keyframes harbor-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}
@media (max-width: 768px) {
	.hero-harbor {
		right: 10px;
		bottom: 0;
		width: 280px;
		opacity: 0.45;
	}
}
@media (prefers-reduced-motion: reduce) {
	.hero-harbor { animation: none; }
}
.hero-content {
	max-width: 760px;
}
.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	margin-bottom: 24px;
}
.live-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	background: var(--red);
	color: #fff;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
}
.live-dot {
	width: 7px; height: 7px;
	background: #fff;
	border-radius: 50%;
	animation: pulse 1.6s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.7); }
}
.hero-eyebrow-divider {
	width: 24px; height: 1px;
	background: rgba(255,255,255,0.4);
}

.hero-title {
	font-family: var(--font-serif);
	font-size: clamp(2.25rem, 1.6rem + 3.5vw, 5rem);
	font-weight: 700;
	margin: 0 0 24px;
	color: #fff;
	letter-spacing: -0.025em;
	line-height: 1.05;
}
.hero-title-pre {
	display: block;
	font-size: 0.45em;
	font-weight: 500;
	color: rgba(255,255,255,0.7);
	letter-spacing: 0;
	margin-bottom: 8px;
	font-style: italic;
}
.hero-title-show {
	display: block;
	font-weight: 900;
}

.hero-meta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	color: rgba(255,255,255,0.75);
	margin-bottom: 36px;
	letter-spacing: 0.02em;
}
.hero-meta-time {
	font-family: var(--font-serif);
	font-size: 17px;
	font-weight: 600;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.hero-meta-divider {
	width: 4px; height: 4px;
	background: rgba(255,255,255,0.4);
	border-radius: 50%;
}

.hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 15px;
	border: 0;
	transition: transform 220ms var(--ease), background var(--t), border-color var(--t), color var(--t);
	letter-spacing: 0.01em;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary {
	background: #fff;
	color: var(--blue-dark);
}
.btn-primary:hover { background: #f0f4f8; color: var(--blue-dark); }
.btn-ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.3);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--ink-5);
}
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-big { padding: 16px 32px; font-size: 16px; font-weight: 700; }
.btn-icon {
	display: inline-flex;
	width: 24px; height: 24px;
	align-items: center;
	justify-content: center;
	background: var(--blue-dark);
	color: #fff;
	border-radius: 50%;
}
.btn-icon svg { width: 12px; height: 12px; }
.btn .pause-icon { display: none; }
.btn.is-playing .play-icon { display: none; }
.btn.is-playing .pause-icon { display: inline-block; }

/* Scroll indicator */
.hero-scroll {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: rgba(255,255,255,0.55);
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 50%;
	transition: color var(--t), border-color var(--t), transform var(--t);
	animation: bounce 2.5s ease-in-out infinite;
}
.hero-scroll:hover {
	color: #fff;
	border-color: rgba(255,255,255,0.4);
	animation: none;
}
@keyframes bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, -8px); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 96px 0; }
.section-alt { background: var(--bg-section); }
.section-schedule { background: var(--bg-soft); }
.section-news { background: var(--bg-section); }
.section-contact { background: var(--blue-deep); color: rgba(255,255,255,0.9); }

.section-head {
	max-width: 720px;
	margin: 0 auto 64px;
	text-align: center;
}
.section-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--blue);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 16px;
	position: relative;
	padding: 0 24px;
}
.section-eyebrow::before,
.section-eyebrow::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 16px;
	height: 1px;
	background: currentColor;
	opacity: 0.4;
}
.section-eyebrow::before { right: 100%; }
.section-eyebrow::after  { left: 100%; }
.section-contact .section-eyebrow { color: var(--blue-light); }

.section-title {
	font-family: var(--font-serif);
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 16px;
	letter-spacing: -0.025em;
	line-height: 1.1;
}
.section-contact .section-title { color: #fff; }
.section-desc {
	color: var(--ink-3);
	font-size: 17px;
	margin: 0;
	line-height: 1.65;
}
.section-contact .section-desc { color: rgba(255,255,255,0.7); }

/* ============================================================
   DAY TABS — refined
   ============================================================ */
.day-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 48px;
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	scrollbar-width: thin;
	justify-content: center;
}
.day-tab {
	padding: 14px 26px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	color: var(--ink-3);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--t), border-color var(--t);
	position: relative;
}
.day-tab:hover { color: var(--ink); }
.day-tab.is-active {
	color: var(--blue);
	border-bottom-color: var(--blue);
	font-weight: 700;
}
.day-tab.is-today::after {
	content: '';
	position: absolute;
	top: 8px;
	right: 12px;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--red);
}

/* ============================================================
   SCHEDULE — photo-driven cards
   ============================================================ */
.schedule {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
}
.show {
	background: var(--bg);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: var(--shadow-xs);
	transition: transform 320ms var(--ease), box-shadow var(--t);
	position: relative;
	display: flex;
	flex-direction: column;
}
.show:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}
.show.is-now {
	box-shadow: 0 0 0 2px var(--red), var(--shadow);
}
.show.is-now::before {
	content: 'On air';
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	background: var(--red);
	color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.show-photo {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ink);
}
.show-photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}
.show:hover .show-photo img { transform: scale(1.06); }
.show-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(10, 16, 25, 0.45) 100%);
	pointer-events: none;
}

.show-photo-music,
.show-photo-livedj {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--blue-dark), var(--blue-deep));
	color: rgba(255,255,255,0.7);
}
.show-photo-music svg,
.show-photo-livedj svg { width: 48px; height: 48px; }
.show-photo-music::after,
.show-photo-livedj::after { display: none; }

.show-body {
	padding: 22px 22px 26px;
	flex: 1;
}
.show-time {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	color: var(--blue);
	letter-spacing: 0.08em;
	margin-bottom: 8px;
	font-variant-numeric: tabular-nums;
}
.show-name {
	font-family: var(--font-serif);
	font-size: 19px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 8px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.show-desc {
	color: var(--ink-3);
	font-size: 14px;
	margin: 0;
	line-height: 1.55;
}
.show-tag-live {
	display: inline-block;
	background: var(--red);
	color: #fff;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 10px;
	margin-right: 10px;
}

/* ============================================================
   PRODUCERS — editorial portrait cards with hover overlay
   ============================================================ */
.producer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}
.producer-card {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 4 / 5;
	background: var(--ink);
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: transform 320ms var(--ease), box-shadow var(--t);
}
.producer-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}
.producer-photo {
	position: absolute;
	inset: 0;
}
.producer-photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 20%;
	transition: transform 800ms var(--ease), filter var(--t);
}
.producer-card:hover .producer-photo img {
	transform: scale(1.08);
	filter: brightness(0.85);
}
.producer-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px;
	background: linear-gradient(180deg, transparent 30%, rgba(6, 17, 34, 0.95) 100%);
	color: #fff;
	transition: padding var(--t);
}
.producer-card:hover .producer-overlay { padding-bottom: 32px; }
.producer-time {
	font-size: 11px;
	font-weight: 700;
	color: var(--blue-light);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 8px;
	font-variant-numeric: tabular-nums;
}
.producer-name {
	font-family: var(--font-serif);
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 4px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.producer-show {
	font-size: 13px;
	color: rgba(255,255,255,0.72);
	margin: 0;
	font-weight: 500;
}

/* ============================================================
   NEWS — editorial cards
   ============================================================ */
.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 28px;
}
.news-card {
	background: var(--bg);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: var(--shadow-xs);
	transition: transform 320ms var(--ease), box-shadow var(--t);
	display: flex;
	flex-direction: column;
}
.news-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}
.news-card-thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bg-soft);
	display: block;
}
.news-card-thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}
.news-card:hover .news-card-thumb img { transform: scale(1.05); }
.news-card-body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.news-card-date {
	font-size: 11px;
	font-weight: 700;
	color: var(--blue);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}
.news-card-title {
	font-family: var(--font-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	flex: 1;
	letter-spacing: -0.01em;
}
.news-card-title a { color: var(--ink); }
.news-card-title a:hover { color: var(--blue); }

.news-skeleton {
	height: 320px;
	background: linear-gradient(90deg, var(--bg-soft) 25%, var(--line-soft) 50%, var(--bg-soft) 75%);
	background-size: 200% 100%;
	border-radius: 4px;
	animation: shimmer 1.6s infinite linear;
}
@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.news-error {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 4px;
	color: var(--ink-3);
}

/* ============================================================
   CONTACT — dark section
   ============================================================ */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-bottom: 64px;
}
.contact-card {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 4px;
	padding: 32px 28px;
	transition: border-color var(--t), background var(--t), transform var(--t);
}
.contact-card:hover {
	border-color: rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.06);
	transform: translateY(-2px);
}
.contact-icon {
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--blue-light);
	margin-bottom: 18px;
	border: 1px solid rgba(108, 196, 244, 0.25);
	border-radius: 50%;
}
.contact-icon svg { width: 18px; height: 18px; }
.contact-label {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255,255,255,0.55);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.contact-value {
	color: #fff;
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.55;
}
.contact-value a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.3); }
.contact-value a:hover { border-bottom-color: var(--blue-light); color: var(--blue-light); }
.contact-note {
	color: rgba(255,255,255,0.5);
	font-size: 13px;
	margin: 4px 0 0;
}

.socials {
	display: flex;
	gap: 12px;
	justify-content: center;
}
.social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.7);
	transition: all var(--t);
}
.social svg { width: 18px; height: 18px; }
.social:hover {
	background: var(--blue-light);
	border-color: var(--blue-light);
	color: var(--blue-deep);
	transform: translateY(-2px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
	background: #04101F;
	color: rgba(255,255,255,0.65);
	padding: 64px 0 28px;
	border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 48px;
}
.footer-logo {
	height: 56px;
	width: auto;
	max-width: 220px;
	margin-bottom: 18px;
	background: #fff;
	padding: 8px 12px;
	border-radius: 4px;
}
.footer-brand p {
	font-size: 14px;
	line-height: 1.65;
	color: rgba(255,255,255,0.55);
	max-width: 280px;
}
.footer-nav h4,
.footer-stream h4 {
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 18px;
}
.footer-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-nav li { margin-bottom: 10px; }
.footer-nav a {
	color: rgba(255,255,255,0.65);
	font-size: 14px;
}
.footer-nav a:hover { color: #fff; }
.footer-stream p { margin: 0 0 6px; }
.footer-freq {
	font-family: var(--font-serif);
	font-size: 32px;
	color: #fff;
	letter-spacing: -0.02em;
	line-height: 1;
}
.footer-freq strong { font-weight: 800; }
.footer-freq-note {
	font-size: 13px;
	color: rgba(255,255,255,0.45);
}
.footer-bottom {
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,0.06);
	text-align: center;
	color: rgba(255,255,255,0.35);
	font-size: 12px;
	letter-spacing: 0.04em;
}

/* ============================================================
   MOBILE / RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.player-bar-inner { gap: 14px; padding: 10px 20px; }
	.np-show { max-width: 200px; }
	.brand-logo { height: 42px; }
	.section { padding: 72px 0; }
}

@media (max-width: 768px) {
	.container { padding: 0 20px; }
	.player-bar-inner { grid-template-columns: auto 1fr auto auto; gap: 10px; }
	.player-bar-info { display: none; }
	.freq-badge { display: none; }
	.play-btn-text { display: none; }
	.play-btn { padding: 10px 14px; }
	.play-btn-icon { width: 28px; height: 28px; }
	.play-btn-icon svg { width: 14px; height: 14px; }

	.nav-toggle { display: inline-flex; }
	.nav-main {
		position: fixed;
		top: var(--player-h);
		left: 0; right: 0; bottom: 0;
		background: var(--bg);
		transform: translateX(100%);
		transition: transform 320ms var(--ease);
		z-index: 98;
		overflow-y: auto;
	}
	.nav-main.is-open { transform: translateX(0); }
	.nav-main ul { flex-direction: column; padding: 20px; }
	.nav-main a { padding: 18px 12px; border-bottom: 1px solid var(--line); }

	.hero { min-height: 580px; }
	.hero-inner { padding: 72px 20px; }
	.hero-scroll { display: none; }

	.section { padding: 64px 0; }
	.section-head { margin-bottom: 40px; }

	.schedule { grid-template-columns: 1fr; gap: 16px; }
	.show { display: grid; grid-template-columns: 130px 1fr; }
	.show-photo { aspect-ratio: 1 / 1; }
	.show-body { padding: 16px 18px; }
	.show-name { font-size: 16px; }
	.show-desc { font-size: 13px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
	.show.is-now::before { top: 8px; left: 8px; padding: 3px 7px; font-size: 9px; }

	.producer-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.producer-overlay { padding: 14px; }
	.producer-name { font-size: 15px; }
	.producer-show { font-size: 12px; }
	.producer-time { font-size: 10px; margin-bottom: 4px; }

	.news-grid { gap: 20px; }

	.footer-inner { grid-template-columns: 1fr; gap: 36px; text-align: center; }
	.footer-brand p { max-width: 100%; }
	.footer-logo { margin-left: auto; margin-right: auto; }
}

@media (max-width: 480px) {
	.brand-logo { height: 34px; max-width: 160px; }
	.show { grid-template-columns: 100px 1fr; }
	.producer-grid { grid-template-columns: 1fr; }
	.section-eyebrow::before, .section-eyebrow::after { display: none; }
	.section-eyebrow { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}