/* RICHEY Country -- RICHEY fm palette (richeyfm.com includes/header.php) */
:root {
  --richey-blue: #125DAA;
  --navy: #062B5C;
  --navy-deep: #031630;
  --teal: #168E92;
  --gold: #F4C400;
  --gold-2: #fedc33;
  --cyan: #15ECFF;
  --ink: #1a1a2e;
  --gray-light: #E8ECEB;
  --paper: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: var(--paper); color: var(--ink); overflow-x: hidden; }
a { color: inherit; }
.word, .sub, h1, h2, .btn, .status { font-family: 'Oswald', Arial, sans-serif; }

/* header */
.top { background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 12px 20px; }
/* same lockup as the hero: "country" on end against the Y, as tall as the caps */
.brand { --b: 54px; text-decoration: none; display: inline-flex; align-items: flex-end; gap: 2px; line-height: 1; }
.brand .word { color: var(--cyan); font-weight: 700; font-size: var(--b); line-height: .82; letter-spacing: .5px; }
.brand .sub { color: var(--gold); font-weight: 700; font-size: calc(var(--b) * .25); line-height: .8;
  writing-mode: vertical-rl; transform: rotate(180deg); }
.sister { color: #cfe0f5; text-decoration: none; font-size: .9em; }
.sister strong { color: var(--gold); }
.sister:hover { text-decoration: underline; }

/* hero */
.hero { background: radial-gradient(ellipse at 50% 30%, var(--richey-blue) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: #fff; text-align: center; padding: 56px 16px 64px; }
.stars { color: var(--gold); font-size: 1.6em; letter-spacing: 14px; }
.stars .big { font-size: 1.4em; }
/* "country" stands on end against the Y, reading bottom to top, as tall as the caps */
.hero h1 { --s: clamp(64px, 24vw, 230px); display: flex; justify-content: center; align-items: flex-end;
  gap: calc(var(--s) * .03); line-height: 1; margin: 8px 0 14px; }
.hero h1 .word { color: var(--cyan); font-weight: 700; font-size: var(--s); line-height: .82; letter-spacing: 1px; }
.hero h1 .sub { color: var(--gold); font-weight: 700; font-size: calc(var(--s) * .25); line-height: .8;
  writing-mode: vertical-rl; transform: rotate(180deg); }
.lost h1 .sub { writing-mode: horizontal-tb; transform: none; font-size: clamp(1.6em, 6vw, 3.3em); }
.tag { font-size: 1.25em; color: #e6eefa; margin-bottom: 32px; }

/* player */
.player { margin: 0 auto; max-width: 520px; display: flex; align-items: center; gap: 16px; text-align: left;
  background: rgba(3, 22, 48, .55); border: 1px solid rgba(255, 255, 255, .15); border-radius: 60px; padding: 10px 24px 10px 10px; }
.play { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--gold); display: grid; place-items: center; box-shadow: 0 4px 18px rgba(244, 196, 0, .35); }
.play:hover { background: var(--gold-2); }
.play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.play svg { width: 34px; height: 34px; fill: var(--navy); }
.play .i-stop, .player.on .play .i-play { display: none; }
.player.on .play .i-stop { display: block; }
.meta { flex: 1; min-width: 0; }
.status { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 1em; }
.np { color: #fff; font-size: 1.05em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq { display: flex; gap: 3px; align-items: flex-end; height: 26px; }
.eq i { width: 4px; height: 6px; background: var(--cyan); border-radius: 2px; }
.player.on .eq i { animation: bounce .9s ease-in-out infinite; }
.player.on .eq i:nth-child(2) { animation-delay: .15s; }
.player.on .eq i:nth-child(3) { animation-delay: .3s; }
.player.on .eq i:nth-child(4) { animation-delay: .45s; }
.player.on .eq i:nth-child(5) { animation-delay: .6s; }
@keyframes bounce { 0%, 100% { height: 6px; } 50% { height: 26px; } }
@media (prefers-reduced-motion: reduce) { .player.on .eq i { animation: none; height: 16px; } }

/* cards */
.cards { max-width: 1000px; margin: 0 auto; padding: 48px 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card { border: 1px solid var(--gray-light); border-top: 5px solid var(--richey-blue); border-radius: 10px; padding: 24px; }
.card:nth-child(2) { border-top-color: var(--gold); }
.card h2 { color: var(--navy); font-size: 1.5em; margin-bottom: 8px; }
.card p { line-height: 1.55; }

/* sister band */
.sister-band { background: var(--teal); color: #fff; text-align: center; padding: 44px 16px; }
.sister-band h2 { font-size: 1.9em; margin-bottom: 8px; }
.sister-band p { max-width: 620px; margin: 0 auto 20px; line-height: 1.55; }
.btn { display: inline-block; background: var(--gold); color: var(--navy); font-weight: 700; text-decoration: none;
  padding: 12px 28px; border-radius: 30px; letter-spacing: .5px; font-size: 1.1em; }
.btn:hover { background: var(--gold-2); }

.foot { background: var(--navy-deep); color: #9fb4d0; text-align: center; padding: 22px 16px; font-size: .85em; }

/* 404 */
.lost { padding: 80px 16px; }
.lost p { margin-bottom: 26px; font-size: 1.15em; }

@media (max-width: 640px) {
  .top { justify-content: center; text-align: center; }
  .cards { grid-template-columns: 1fr; padding: 32px 16px; }
  .player { border-radius: 20px; padding: 10px 16px 10px 10px; gap: 12px; }
  .play { width: 60px; height: 60px; }
  .eq { display: none; }
}