/* Ruff Ryders Radio - main stylesheet. Mobile first. */
:root {
	--bg: #0b0b0c;
	--charcoal: #161617;
	--panel: #1d1d1f;
	--line: #2e2e32;
	--text: #f4f4f4;
	--muted: #b6b6bc;
	--red: #d5101f;
	--red-hi: #ff4d5a;
	--wrap: 1200px;
	--header-h: 76px;
	--player-h: 76px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display: "Arial Narrow", "Roboto Condensed", Impact, "Haettenschweiler", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	line-height: 1.6;
	padding-bottom: calc(var(--player-h) + 16px);
	overflow-x: hidden;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--red-hi); text-underline-offset: 3px; }
a:hover { color: #fff; }
h1, h2, h3, h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1.08; margin: 0 0 .5em; overflow-wrap: anywhere; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--red); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.rrr-skip { position: absolute; left: -999px; top: 0; z-index: 200; background: #fff; color: #000; padding: 12px 16px; }
.rrr-skip:focus { left: 8px; top: 8px; }

.rrr-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.rrr-main:focus { outline: none; }

/* The Ruff Ryders "R", ghosted into the background. It is fixed to the screen, so it stays
   put on every page while the content scrolls over it. The hero has its own artwork, so the
   R shows up from the first section after the hero (and from the top on inner pages). */
body::before { content: ""; position: fixed; left: 50%; top: 50%; width: min(125vw, 1000px); height: min(125vh, 1120px); transform: translate(-50%, -50%); background: url("../img/r-silhouette.png") center / contain no-repeat; opacity: .16; z-index: 0; pointer-events: none; }
.rrr-main, .rrr-footer { position: relative; z-index: 1; }
.rrr-notice { background: var(--panel); border-left: 4px solid var(--red); padding: 12px 16px; margin-top: 16px; }

/* ---------- Header ---------- */
.rrr-header { position: sticky; top: 0; z-index: 100; background: rgba(11, 11, 12, .96); border-bottom: 1px solid var(--line); }
.rrr-header__bar { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.rrr-brand { display: flex; align-items: center; text-decoration: none; color: #fff; flex: 0 1 auto; min-width: 0; }
.rrr-brand__logo { max-height: 62px; width: auto; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .18)); }
@media (min-width: 900px) { :root { --header-h: 98px; } .rrr-brand__logo { max-height: 82px; } }
.rrr-brand__text { font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.rrr-header__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.rrr-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--charcoal); border-bottom: 1px solid var(--line); max-height: calc(100vh - var(--header-h) - var(--player-h)); overflow-y: auto; }
.is-open .rrr-nav { display: block; }
.rrr-menu { list-style: none; margin: 0; padding: 8px 0; }
.rrr-menu a { display: block; padding: 14px 20px; color: var(--text); text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; min-height: 44px; }
.rrr-menu a:hover, .rrr-menu .current-menu-item > a { color: var(--red-hi); }
.rrr-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0 16px; }

.rrr-icon-btn { background: none; border: 1px solid var(--line); color: var(--text); width: 44px; height: 44px; border-radius: 8px; display: inline-grid; place-items: center; cursor: pointer; }
.rrr-icon-btn:hover { border-color: #fff; }

.rrr-search { padding: 12px 0; border-top: 1px solid var(--line); background: var(--charcoal); }
.rrr-searchform { display: flex; gap: 8px; max-width: 640px; }
.rrr-searchform input { flex: 1; min-width: 0; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 8px; font-size: 1rem; }

@media (max-width: 479px) {
	.rrr-header__bar { gap: 8px; }
	.rrr-brand__text { font-size: 1rem; line-height: 1.05; }
	.rrr-header__tools { gap: 6px; }
	.rrr-header__tools .rrr-btn--live { padding: 8px 10px; font-size: .75rem; letter-spacing: .03em; }
}
@media (max-width: 359px) { .rrr-brand__text { font-size: .85rem; } }
.rrr-header__tools .rrr-btn--live { white-space: nowrap; }

@media (min-width: 1200px) {
	.rrr-brand { flex: none; }
	.rrr-menu-toggle { display: none; }
	.rrr-nav { display: block; position: static; background: none; border: 0; max-height: none; overflow: visible; flex: 1; min-width: 0; }
	.rrr-nav > .rrr-menu { display: flex; flex-wrap: nowrap; padding: 0; justify-content: center; }
	.rrr-menu a { padding: 8px 9px; font-size: .74rem; letter-spacing: .03em; min-height: 0; white-space: nowrap; }
	.rrr-menu li { position: relative; }
	.rrr-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--charcoal); border: 1px solid var(--line); padding: 6px 0; }
	.rrr-menu li:hover > .sub-menu, .rrr-menu li:focus-within > .sub-menu { display: block; }
}
@media (max-width: 1299px) { .rrr-hide-sm { display: none !important; } }

/* ---------- Buttons ---------- */
.rrr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; background: var(--red); color: #fff; border: 2px solid var(--red); border-radius: 999px; font: 700 .85rem var(--font); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.rrr-btn:hover { background: #fff; color: #000; border-color: #fff; }
.rrr-btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.rrr-btn--ghost:hover { background: #fff; color: #000; }
.rrr-btn--lg { min-height: 52px; padding: 12px 28px; font-size: .95rem; }
.rrr-btn--live { padding-inline: 14px; }
.rrr-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: rrr-pulse 1.6s infinite; }
@keyframes rrr-pulse { 50% { opacity: .35; } }
.rrr-more { color: #fff; font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.rrr-more:hover { color: var(--red-hi); }
.rrr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.rrr-loadmore { display: flex; margin: 28px auto; }

/* ---------- Hero ---------- */
.rrr-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(11, 11, 12, .22), rgba(11, 11, 12, .5)), url("../img/hero-skyline.jpg") center 62% / cover no-repeat, var(--charcoal); border-bottom: 1px solid var(--line); padding: 32px 0; }
/* City lights: the bright points of the skyline (windows, towers, the red horizon glow) are a
   separate transparent layer that pulses. Two layers on different rhythms make the lights
   shimmer instead of all blinking together. Only opacity animates, so it stays smooth. */
.rrr-hero::before, .rrr-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("../img/hero-lights.png") center 62% / cover no-repeat; will-change: opacity; }
.rrr-hero::before { animation: rrr-lights-a 3.4s ease-in-out infinite; }
.rrr-hero::after { filter: blur(3px) brightness(1.5); mix-blend-mode: screen; animation: rrr-lights-b 5.1s ease-in-out infinite; animation-delay: -1.7s; }
@keyframes rrr-lights-a { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes rrr-lights-b { 0%, 100% { opacity: 0; } 45% { opacity: .85; } 70% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .rrr-hero::before { opacity: .7; } .rrr-hero::after { opacity: 0; } }

/* The sky area the drifting clouds live in. */
.rrr-hero__sky { position: absolute; left: 0; right: 0; top: 0; height: 48%; z-index: 0; pointer-events: none; overflow: hidden; }
/* Storm clouds: two layers of generated fractal noise (an inline SVG, so there is no image file)
   drifting across the sky at different speeds. Each tile repeats seamlessly, so the drift loops
   forever. Only transform animates, which keeps it smooth. They fade out toward the skyline. */
.rrr-clouds { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent 100%); mask-image: linear-gradient(#000 55%, transparent 100%); }
.rrr-cloud { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 1200px); background-repeat: repeat-x; will-change: transform; }
.rrr-cloud--far { opacity: .5; background-size: 1100px 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='360'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0038 0.011' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .57 0 0 0 0 .66 2.2 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); animation: rrr-drift-far 16s linear infinite; }
.rrr-cloud--near { opacity: .42; background-size: 800px 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='360'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0055 0.017' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .68 0 0 0 0 .66 0 0 0 0 .72 2.4 0 0 0 -.82'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); animation: rrr-drift-near 9s linear infinite; }
@keyframes rrr-drift-far { from { transform: translateX(0); } to { transform: translateX(-1100px); } }
@keyframes rrr-drift-near { from { transform: translateX(0); } to { transform: translateX(-800px); } }

.rrr-hero__tag, .rrr-hero__np { text-shadow: 0 1px 10px rgba(0, 0, 0, .95); }
.rrr-hero__tag { color: #e9e9ee; }

/* No featured item: the logo and buttons stand alone. Centered on phones, left on desktop so the skyline shows on the right. */
.rrr-hero--solo .rrr-hero__grid { grid-template-columns: 1fr; }
.rrr-hero--solo .rrr-hero__copy { text-align: center; margin-inline: auto; }
.rrr-hero--solo .rrr-hero__tag { margin-inline: auto; max-width: 42ch; }
.rrr-hero--solo .rrr-actions { justify-content: center; }

/* Hero buttons: spread well apart and given room. Stacked on narrow phones, side by side from 520px. */
.rrr-hero .rrr-actions { flex-direction: column; align-items: center; gap: 18px; margin: 26px 0 24px; }
.rrr-hero .rrr-actions .rrr-btn { width: min(100%, 300px); }
.rrr-hero__np { margin-top: 6px; }
@media (min-width: 520px) {
	.rrr-hero .rrr-actions { flex-direction: row; justify-content: center; gap: 40px; margin: 24px 0 14px; }
	.rrr-hero .rrr-actions .rrr-btn { width: auto; min-width: 230px; }
}
.rrr-hero__grid { position: relative; z-index: 1; display: grid; gap: 28px; align-items: center; }

/* 3D logo as the hero centrepiece: faces straight ahead, with a soft red glow behind it. */
.rrr-hero__3d { position: relative; isolation: isolate; display: grid; place-items: center; height: clamp(310px, 90vw, 500px); margin: 0 0 6px; pointer-events: none; }
.rrr-hero__3d::before { content: ""; position: absolute; inset: 6% 4%; border-radius: 50%; background: radial-gradient(circle, rgba(213, 16, 31, .45) 0%, rgba(213, 16, 31, .17) 45%, rgba(213, 16, 31, 0) 70%); filter: blur(14px); z-index: -1; }
.rrr-sway { perspective: 1200px; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .6)); }
/* The shadow sits on the parent: a filter on the 3D element itself would flatten its layers. */
.rrr-logo3d { position: relative; width: min(84vw, 470px); aspect-ratio: 1; transform-style: preserve-3d; transform: none; /* faces straight at the viewer */ }
.rrr-logo3d img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: translateZ(calc(34px - var(--i) * 5px)); filter: brightness(calc(1 - var(--i) * .045)); backface-visibility: visible; }
@media (min-width: 900px) {
	/* Sized by width and by screen height so the buttons stay on screen. */
	.rrr-hero__3d { height: clamp(340px, min(37vw, 50vh), 560px); margin-bottom: 12px; }
	.rrr-logo3d { width: min(35vw, 48vh, 520px); }
	.rrr-hero.rrr-hero--solo { padding-top: 30px; }
	.rrr-hero--solo .rrr-hero__copy { max-width: 820px; }
}
.rrr-hero__title { font-size: clamp(2.6rem, 9vw, 5.5rem); margin: .1em 0 .2em; }
.rrr-hero__tag { font-size: clamp(1.15rem, 2.3vw, 1.5rem); line-height: 1.4; color: var(--muted); max-width: 36ch; }
.rrr-hero__np { color: var(--muted); font-size: .95rem; }
.rrr-label { display: inline-block; margin: 0 0 8px; color: var(--red-hi); font: 700 .72rem var(--font); letter-spacing: .14em; text-transform: uppercase; }
.rrr-feature { position: relative; background: var(--panel); border-radius: 12px; overflow: hidden; }
.rrr-feature__media { display: block; aspect-ratio: 16 / 9; background: var(--bg); }
.rrr-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.rrr-feature__body { padding: 18px 20px 22px; }
.rrr-feature__title { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.rrr-feature__title a { color: #fff; text-decoration: none; }
@media (min-width: 900px) { .rrr-hero { padding: 56px 0; } .rrr-hero__grid { grid-template-columns: 1fr 1.1fr; } }

/* ---------- Sections & grids ---------- */
.rrr-section { padding-top: 40px; padding-bottom: 40px; }
.rrr-section--alt { background: rgba(22, 22, 23, .55); border-block: 1px solid var(--line); }
.rrr-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rrr-section__title { font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin-bottom: 20px; }
.rrr-page-title { font-size: clamp(2rem, 7vw, 3.6rem); margin-top: 8px; }
.rrr-lede { color: var(--muted); max-width: 70ch; }

.rrr-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 12px 0; }
@media (min-width: 900px) { .rrr-grid--feature { grid-template-columns: repeat(4, 1fr); } .rrr-grid--feature > .rrr-card:first-child { grid-column: span 2; grid-row: span 2; } .rrr-grid--feature > .rrr-card:first-child .rrr-card__title { font-size: 1.8rem; } }

.rrr-card { background: var(--panel); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .2s, box-shadow .2s; }
.rrr-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.rrr-card__media { display: block; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.rrr-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Flyers are shown whole (letterboxed), never cropped. */
.type-rrr_show .rrr-card__media, .type-rrr_event .rrr-card__media { aspect-ratio: 4 / 5; background: #000; }
.type-rrr_show .rrr-card__media img, .type-rrr_event .rrr-card__media img { object-fit: contain; }
/* Back button: a slim bar that stays under the header while the page scrolls. */
.rrr-backbar { position: sticky; top: calc(var(--header-h) - 1px); z-index: 90; background: rgba(11, 11, 12, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.rrr-backbar .rrr-wrap { display: flex; align-items: center; min-height: 48px; }
.rrr-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: -8px; padding: 6px 16px 6px 10px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; transition: background .15s, color .15s; }
.rrr-back svg { flex: none; }
.rrr-back small { color: var(--muted); font-weight: 500; font-size: .85rem; letter-spacing: 0; text-transform: none; }
.rrr-back:hover { background: var(--red); color: #fff; }
.rrr-back:hover small { color: #fff; }

/* Team photos: portrait frame, face-first crop. */
.type-rrr_team .rrr-card__media { aspect-ratio: 4 / 5; background: #000; }
.type-rrr_team .rrr-card__media img { object-fit: cover; object-position: center top; }
.rrr-single__image--flyer img { max-width: 560px; margin: 0 auto; border-radius: 12px; }
.rrr-card__ph { display: grid; place-items: center; height: 100%; font: 700 3rem var(--font-display); color: var(--line); }
.rrr-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.rrr-card__title { font-size: 1.25rem; margin-bottom: .3em; }
.rrr-card__title a { color: #fff; text-decoration: none; }
.rrr-card__title a:hover { color: var(--red-hi); }
.rrr-card__meta { color: var(--muted); font-size: .85rem; margin-bottom: .5em; }
.rrr-card__excerpt { color: var(--muted); font-size: .95rem; }
.rrr-card .rrr-more { margin-top: auto; align-self: flex-start; }

/* Spotlight: a soft red glow follows the pointer over cards (position set in site.js). */
.rrr-card, .rrr-feature { position: relative; }
.rrr-card::after, .rrr-feature::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(213, 16, 31, .26), transparent 70%); }
.rrr-card:hover::after, .rrr-feature:hover::after { opacity: 1; }

/* Shine sweep on the Listen Live buttons. */
.rrr-btn--live { position: relative; overflow: hidden; }
.rrr-btn--live::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s; pointer-events: none; }
.rrr-btn--live:hover::after, .rrr-btn--live:focus-visible::after { left: 130%; }

.rrr-split { display: grid; gap: 24px; }
@media (min-width: 800px) { .rrr-split { grid-template-columns: 1fr 1fr; } }
.rrr-panel { background: var(--panel); border-radius: 12px; padding: 22px; min-width: 0; }
.rrr-note { color: var(--muted); font-size: .85rem; }
.rrr-tracks { margin: 0; padding-left: 1.2em; }
ul.rrr-tracks { list-style: none; padding: 0; }
.rrr-tracks li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 12px; overflow-wrap: anywhere; }
.rrr-tracks span { color: var(--muted); }

/* ---------- Single & content ---------- */
.rrr-single__head { padding-top: 32px; }
.rrr-single__image { margin-bottom: 24px; }
.rrr-single__image img { width: 100%; border-radius: 12px; }
.rrr-single__body { max-width: 860px; padding-bottom: 48px; }
.rrr-content { font-size: 1.05rem; }
.rrr-content img { border-radius: 8px; }
.rrr-embed { margin: 20px 0; } .rrr-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.rrr-facts { display: grid; gap: 10px; margin: 0 0 20px; }
.rrr-facts div { background: var(--panel); border-radius: 8px; padding: 10px 14px; }
.rrr-facts dt { color: var(--red-hi); font: 700 .7rem var(--font); letter-spacing: .12em; text-transform: uppercase; }
.rrr-facts dd { margin: 0; }
.rrr-chips, .rrr-chips-wrap { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rrr-chips a { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: #fff; text-decoration: none; }
.rrr-chips a:hover { border-color: #fff; }
.pagination { margin: 28px 0; } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; color: #fff; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.pagination .current { background: var(--red); border-color: var(--red); }
.rrr-comments { margin-top: 32px; }
.rrr-comment-list { padding-left: 1.2em; }
.rrr-comments input[type="text"], .rrr-comments input[type="email"], .rrr-comments input[type="url"], .rrr-comments textarea { width: 100%; padding: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; }
.rrr-comments input[type="submit"] { background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: 12px 22px; font-weight: 700; cursor: pointer; min-height: 44px; }

/* ---------- Footer ---------- */
.rrr-footer { background: rgba(22, 22, 23, .85); border-top: 1px solid var(--line); padding-top: 40px; }
.rrr-footer__grid { display: grid; gap: 28px; }
@media (min-width: 800px) { .rrr-footer__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.rrr-footer__brand { font: 700 1.6rem var(--font-display); text-transform: uppercase; }
.rrr-footer__h { font-size: 1rem; color: var(--red-hi); }
.rrr-footer__social { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.rrr-footer a { color: var(--text); }
.rrr-menu--footer a { padding: 6px 0; min-height: 0; font-size: .85rem; }
.rrr-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 16px; padding-bottom: 24px; color: var(--muted); font-size: .85rem; }

/* ---------- Sticky player ---------- */
.rrr-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; min-height: var(--player-h); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "art info btn" "msg msg msg"; align-items: center; gap: 4px 12px; padding: 10px 16px; background: #000; border-top: 2px solid var(--red); }
.rrr-player__art { grid-area: art; width: 48px; height: 48px; border-radius: 8px; background: var(--panel); display: grid; place-items: center; overflow: hidden; font: 700 1.2rem var(--font-display); text-transform: uppercase; }
.rrr-player__art img { width: 100%; height: 100%; object-fit: contain; }
.rrr-player__info { grid-area: info; display: flex; flex-direction: column; min-width: 0; }
.rrr-player__status { color: var(--red-hi); font: 700 .7rem var(--font); letter-spacing: .14em; text-transform: uppercase; }
.rrr-player__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rrr-player__btn { grid-area: btn; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--red); color: #fff; display: grid; place-items: center; cursor: pointer; position: relative; }
.rrr-player__btn:hover:not(:disabled) { background: #fff; color: #000; }
.rrr-player__btn:disabled { opacity: .4; cursor: not-allowed; }
.rrr-player__btn .i-pause, .rrr-player__btn .rrr-spinner { display: none; }
[data-state="playing"] .i-play, [data-state="loading"] .i-play, [data-state="buffering"] .i-play { display: none; }
[data-state="playing"] .i-pause { display: block; }
[data-state="loading"] .rrr-spinner, [data-state="buffering"] .rrr-spinner { display: block; }
.rrr-spinner { width: 22px; height: 22px; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: rrr-spin .8s linear infinite; }
@keyframes rrr-spin { to { transform: rotate(360deg); } }
.rrr-player__vol { display: none; }
.rrr-player__vol input { width: 110px; accent-color: var(--red); }
.rrr-player__msg { grid-area: msg; margin: 0; font-size: .85rem; color: #ffb3b9; }
.rrr-player__msg:empty { display: none; }
@media (min-width: 640px) {
	.rrr-player { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "art info vol btn" "msg msg msg msg"; }
	.rrr-player__vol { display: block; grid-area: vol; }
}

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

/* =====================================================================
   Enhancements: button movement, card motion, entrance effects, graphics
   ===================================================================== */

/* ---- Buttons ---- */
.rrr-btn, .rrr-player__btn { position: relative; overflow: hidden; }
.rrr-btn--lg, .rrr-btn--live, .rrr-player__btn { transform: translate(var(--tx, 0px), var(--ty, 0px)); transition: transform .28s cubic-bezier(.2, .8, .2, 1), background .2s, color .2s, scale .12s; will-change: transform; }
.rrr-btn:active, .rrr-player__btn:active { scale: .94; }
.rrr-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .5); transform: scale(0); opacity: .9; pointer-events: none; animation: rrr-ripple .65s ease-out forwards; }
@keyframes rrr-ripple { to { transform: scale(1); opacity: 0; } }
/* Outline button fills from the left on hover. */
.rrr-btn--ghost { background: linear-gradient(#fff, #fff) no-repeat left center / 0% 100%; transition: background-size .35s ease, color .25s, transform .28s cubic-bezier(.2, .8, .2, 1), scale .12s; }
.rrr-btn--ghost:hover { background-size: 100% 100%; background-color: transparent; color: #000; }
/* A soft pulsing ring invites the first click on Listen Live, then stops once the radio is playing. */
@keyframes rrr-ring { 0% { box-shadow: 0 0 0 0 rgba(213, 16, 31, .6); } 70% { box-shadow: 0 0 0 14px rgba(213, 16, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(213, 16, 31, 0); } }
.rrr-btn--live { animation: rrr-ring 2.6s ease-out infinite; }
.rrr-player[data-state="idle"] .rrr-player__btn { animation: rrr-ring 2.6s ease-out infinite; }
html.rrr-is-playing .rrr-btn--live { animation: none; }
/* Arrows that move. */
.rrr-more::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .2s ease; }
.rrr-more:hover::after { transform: translateX(6px); }
.rrr-back svg { transition: transform .2s ease; }
.rrr-back:hover svg { transform: translateX(-4px); }
/* Menu links draw an underline. */
@media (min-width: 1200px) {
	.rrr-menu > li > a { background: linear-gradient(var(--red), var(--red)) no-repeat 9px calc(100% - 4px) / 0% 2px; transition: background-size .25s ease, color .15s; }
	.rrr-menu > li > a:hover, .rrr-menu > .current-menu-item > a { background-size: calc(100% - 18px) 2px; }
}

/* ---- Cards tilt toward the pointer (mouse devices only) ---- */
@media (hover: hover) and (pointer: fine) {
	.rrr-card:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); transition: transform .12s ease-out, box-shadow .2s; }
}
.rrr-card__fallback { width: 100%; height: 100%; object-fit: cover; }

/* ---- Entrance effects ---- */
.rrr-js .rrr-reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease var(--d, 0ms), transform .65s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.rrr-js .rrr-reveal.is-in { opacity: 1; transform: none; }
@keyframes rrr-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rrr-main.rrr-enter { animation: rrr-enter .45s ease both; }
.rrr-section__title::after, .rrr-page-title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 2px; background: var(--red); }

/* ---- Back to top ---- */
.rrr-top { position: fixed; right: 16px; bottom: calc(var(--player-h) + 18px); z-index: 140; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(11, 11, 12, .9); color: #fff; cursor: pointer; opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .25s, transform .25s, background .2s; }
.rrr-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.rrr-top:hover { background: var(--red); border-color: var(--red); }

/* ---- Equalizer in the player (moves only while the radio plays) ---- */
.rrr-player__row { display: flex; align-items: center; }
.rrr-eq { display: none; align-items: flex-end; gap: 2px; height: 13px; margin-right: 7px; }
.rrr-player[data-state="playing"] .rrr-eq, .rrr-player[data-state="buffering"] .rrr-eq { display: inline-flex; }
.rrr-eq i { width: 3px; height: 100%; border-radius: 1px; background: var(--red-hi); transform-origin: bottom; animation: rrr-eq 1s ease-in-out infinite; }
.rrr-eq i:nth-child(2) { animation-duration: .75s; animation-delay: -.3s; }
.rrr-eq i:nth-child(3) { animation-duration: 1.2s; animation-delay: -.6s; }
.rrr-eq i:nth-child(4) { animation-duration: .85s; animation-delay: -.15s; }
.rrr-eq i:nth-child(5) { animation-duration: 1.05s; animation-delay: -.45s; }
@keyframes rrr-eq { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }

/* ---- Show ticker ---- */
.rrr-ticker { position: relative; z-index: 1; overflow: hidden; background: #000; border-block: 1px solid var(--line); }
.rrr-ticker__track { display: flex; width: max-content; animation: rrr-marquee 110s linear infinite; }
.rrr-ticker:hover .rrr-ticker__track { animation-play-state: paused; }
.rrr-ticker__list { display: flex; list-style: none; margin: 0; padding: 0; }
.rrr-ticker__list li { white-space: nowrap; padding: 13px 0; font: 700 .8rem var(--font); letter-spacing: .12em; text-transform: uppercase; }
.rrr-ticker__list li::before { content: "\25C6"; margin: 0 24px; color: var(--red); font-size: .7rem; }
.rrr-ticker__list a { color: #fff; text-decoration: none; }
.rrr-ticker__list a:hover { color: var(--red-hi); }
@keyframes rrr-marquee { to { transform: translateX(-50%); } }

/* ---- Graphics (generated with OpenArt) ---- */
.rrr-footer { position: relative; overflow: hidden; isolation: isolate; }
/* 404 page. */
.rrr-404 { display: grid; gap: 28px; align-items: center; }
.rrr-404__art { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
.rrr-404__art img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; }
.rrr-lede { color: var(--muted); max-width: 52ch; }
@media (min-width: 900px) { .rrr-404 { grid-template-columns: 1.05fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
	.rrr-ticker { overflow-x: auto; }
	.rrr-ticker__track, .rrr-btn--live, .rrr-player[data-state="idle"] .rrr-player__btn { animation: none; }
	.rrr-js .rrr-reveal { opacity: 1; transform: none; }
}

/* ---- Social icons: real glyphs, linked to the networks set in Radio Settings ---- */
.rrr-social-list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.rrr-social { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--text); text-decoration: none; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.rrr-social svg { display: block; width: 20px; height: 20px; }
.rrr-social:hover, .rrr-social:focus-visible { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px) scale(1.07); }
.rrr-social-list--header { display: none; gap: 8px; }
@media (min-width: 1700px) { .rrr-social-list--header { display: flex; } }
.rrr-social-list--header .rrr-social { width: 36px; height: 36px; }
.rrr-social-list--header .rrr-social svg { width: 18px; height: 18px; }
.rrr-social-list--footer .rrr-social { width: 46px; height: 46px; }
.rrr-social-list--footer .rrr-social svg { width: 22px; height: 22px; }
.rrr-footer__follow { margin: 14px 0 10px; color: var(--muted); font: 700 .72rem var(--font); letter-spacing: .14em; text-transform: uppercase; }
.rrr-social-list--drawer { padding: 14px 20px 22px; }
@media (min-width: 1200px) { .rrr-social-list--drawer { display: none; } }
/* Side strip: on desktops too narrow for icons in the header, a slim column along the left edge. */
.rrr-social-list--rail { display: none; position: fixed; left: 14px; top: 50%; z-index: 95; flex-direction: column; gap: 10px; transform: translateY(-50%); }
.rrr-social-list--rail .rrr-social { width: 38px; height: 38px; background: rgba(11, 11, 12, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (min-width: 1330px) and (max-width: 1699px) { .rrr-social-list--rail { display: flex; } }

/* ---- Generated graphics: five images, each used once per page (chosen in functions.php, rrr_page_art) ---- */
/* Banner behind the title on inner pages. */
body:not(.home) .rrr-main::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(360px, 48vh); z-index: -1; pointer-events: none; background-size: cover; background-repeat: no-repeat; background-position: center 35%; }
.rrr-banner-studio .rrr-main::before { background-image: linear-gradient(180deg, rgba(11, 11, 12, .3), var(--bg) 96%), url("../img/page-head.jpg"); }
.rrr-banner-skyline .rrr-main::before { background-image: linear-gradient(180deg, rgba(11, 11, 12, .25), var(--bg) 96%), url("../img/footer-skyline.jpg"); background-position: center 88%; }
.rrr-banner-vinyl .rrr-main::before { background-image: linear-gradient(180deg, rgba(11, 11, 12, .35), var(--bg) 96%), url("../img/texture.jpg"); }
.rrr-banner-dial .rrr-main::before { background-image: linear-gradient(180deg, rgba(11, 11, 12, .45), var(--bg) 96%), url("../img/radio-dial.jpg"); }
.rrr-banner-phones .rrr-main::before { background-image: linear-gradient(180deg, rgba(11, 11, 12, .4), var(--bg) 96%), url("../img/card-fallback.jpg"); background-position: center 45%; }
/* Footer backdrop. */
.rrr-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 280px; z-index: -1; pointer-events: none; background-size: cover; background-repeat: no-repeat; background-position: center bottom; opacity: .5; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 40%, #000 62%, transparent 100%); }
.rrr-footer-skyline .rrr-footer::before { background-image: url("../img/footer-skyline.jpg"); opacity: .55; }
.rrr-footer-studio .rrr-footer::before { background-image: url("../img/page-head.jpg"); background-position: center; }
.rrr-footer-vinyl .rrr-footer::before { background-image: url("../img/texture.jpg"); background-position: center; }
.rrr-footer-dial .rrr-footer::before { background-image: url("../img/radio-dial.jpg"); background-position: center 40%; }
.rrr-footer-phones .rrr-footer::before { background-image: url("../img/card-fallback.jpg"); background-position: center; }
/* Section backdrops on the homepage: one image per section, none repeated. */
.rrr-art { position: relative; isolation: isolate; }
.rrr-art::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: cover; background-position: center; opacity: .24; -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); }
.rrr-art--studio::before { background-image: url("../img/page-head.jpg"); }
.rrr-art--skyline::before { background-image: url("../img/footer-skyline.jpg"); }
.rrr-art--vinyl::before { background-image: url("../img/texture.jpg"); opacity: .3; }
.rrr-art--dial::before { background-image: url("../img/radio-dial.jpg"); }
.rrr-art--phones::before { background-image: url("../img/card-fallback.jpg"); }
.rrr-card__ph { background: linear-gradient(135deg, #2a0b0f, #0b0b0c); }

/* ---- Hero buttons: Listen Live, Shop (to its right), Explore Shows ---- */
.rrr-btn--shop { background: #fff; border-color: #fff; color: #0b0b0c; }
.rrr-btn--shop:hover { background: var(--red); border-color: var(--red); color: #fff; }
.rrr-btn--shop svg { flex: none; }
.rrr-hero .rrr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(100%, 380px); margin: 26px auto 22px; }
.rrr-hero .rrr-actions .rrr-btn { width: 100%; min-width: 0; padding-inline: 12px; }
.rrr-hero .rrr-actions .rrr-btn:nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 640px) {
	.rrr-hero .rrr-actions { display: flex; flex-wrap: wrap; justify-content: center; width: auto; gap: 18px 26px; margin: 24px 0 14px; }
	.rrr-hero .rrr-actions .rrr-btn { width: auto; min-width: 190px; padding-inline: 26px; }
}

/* ---- Shop ---- */
.rrr-shophead { display: grid; gap: 28px; align-items: center; margin-bottom: 34px; }
.rrr-shophead__art { margin: 0; max-width: 400px; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
.rrr-shophead__art img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .rrr-shophead { grid-template-columns: 1.2fr .8fr; } .rrr-shophead__art { justify-self: end; } }
.rrr-shop__group { margin-top: 30px; }
.rrr-product__icon { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 12px; background: rgba(213, 16, 31, .16); color: var(--red-hi); }
.rrr-product__icon svg { width: 24px; height: 24px; }
.rrr-product__price { margin: 0 0 8px; font: 700 1.7rem var(--font-display); letter-spacing: .02em; color: #fff; }
.rrr-product__opts { color: var(--muted); font-size: .88rem; }
.rrr-product__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 14px; }
.rrr-product .rrr-card__excerpt { margin-bottom: 10px; }

/* ---- Footer: family sites ---- */
.rrr-footer__family ul { list-style: none; margin: 0; padding: 0; }
.rrr-footer__family li { margin-bottom: 6px; }

/* ---- WooCommerce pages (cart, checkout, product pages) in the dark theme ---- */
.rrr-woo a { color: var(--red-hi); }
.rrr-woo .price, .rrr-woo .amount { color: #fff; font-weight: 700; }
.rrr-woo .button, .rrr-woo button.button, .rrr-woo a.button, .rrr-woo .single_add_to_cart_button, .wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border: 0; border-radius: 999px; background: var(--red); color: #fff !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; text-decoration: none; }
.rrr-woo .button:hover, .rrr-woo .single_add_to_cart_button:hover { background: #fff; color: #000 !important; }
.rrr-woo input, .rrr-woo select, .rrr-woo textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); max-width: 100%; }
.rrr-woo table { width: 100%; border-collapse: collapse; }
.rrr-woo th, .rrr-woo td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }
.rrr-woo .woocommerce-message, .rrr-woo .woocommerce-info, .rrr-woo .woocommerce-error { margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid var(--red); background: var(--panel); list-style: none; }
.rrr-woo img { border-radius: 10px; }

/* ---- Shop enhancements ---- */
.rrr-product { position: relative; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.rrr-product::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--red), transparent); transform: scaleX(0); transition: transform .45s ease; }
.rrr-product:hover::after, .rrr-product:focus-within::after { transform: scaleX(1); }
.rrr-product:hover { box-shadow: 0 18px 44px rgba(213, 16, 31, .22); border-color: rgba(213, 16, 31, .5); }
.rrr-product:hover .rrr-product__icon { background: var(--red); color: #fff; transform: rotate(-8deg) scale(1.08); }
.rrr-product__icon { transition: background .3s ease, color .3s ease, transform .3s ease; }
.rrr-product__price { background: linear-gradient(90deg, #fff 40%, #ff6a74 50%, #fff 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: background-position .8s ease; }
.rrr-product:hover .rrr-product__price { background-position: -100% 0; }
.rrr-product .rrr-btn { position: relative; overflow: hidden; }
.rrr-product .rrr-btn::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); }
.rrr-product:hover .rrr-btn::before { left: 130%; transition: left .7s ease; }
.rrr-btn--shop svg { transition: transform .3s ease; }
.rrr-btn--shop:hover svg { transform: translateY(-2px) rotate(-10deg); }
@keyframes rrr-bag-nudge { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-12deg); } 96% { transform: rotate(10deg); } }
.rrr-hero .rrr-btn--shop svg { animation: rrr-bag-nudge 6s ease-in-out 3s infinite; }
.rrr-shophead__art { transition: transform .5s ease; }
.rrr-shophead__art:hover { transform: rotate(-1.5deg) scale(1.03); }
.rrr-footer__family a { display: inline-block; transition: transform .2s ease, color .2s ease; }
.rrr-footer__family a:hover { transform: translateX(4px); color: #fff; }
@media (prefers-reduced-motion: reduce) {
	.rrr-hero .rrr-btn--shop svg { animation: none; }
	.rrr-product, .rrr-product *, .rrr-shophead__art { transition: none !important; }
}

/* ---- Mobile friendliness: 44px tap targets and 12px minimum text ---- */
.rrr-label, .rrr-footer__follow, .rrr-player__status, .rrr-btn--live { font-size: max(.75rem, 12px); }
@media (max-width: 899px) {
	.rrr-more { display: inline-flex; align-items: center; min-height: 44px; }
	.rrr-card__title a { display: inline-block; padding: 10px 0; }
	.rrr-footer li a, .rrr-footer__family a, .rrr-footer .menu a { display: inline-flex; align-items: center; min-height: 44px; }
	.rrr-footer p a { display: inline-block; padding: 12px 0; }
	.rrr-ticker__list a { display: inline-flex; align-items: center; min-height: 44px; }
	.rrr-chips a { display: inline-flex; align-items: center; min-height: 44px; }
}