/* radio.kilambi.com - editorial data style: hairlines, tables, serif masthead */
:root { --ink: #141414; --rule: #c8c8c8; --rule-dark: #141414; --accent: #0b5394; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0 auto; max-width: 74rem; padding: 0 1rem 0; color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.45; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, audio:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Masthead */
.masthead { border-bottom: 2px solid var(--rule-dark); padding: 1rem 0 0.6rem; margin-bottom: 1rem; }
.kicker { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.15rem; }
.wordmark { font-family: Georgia, "Times New Roman", Times, serif; font-size: 2.4rem; line-height: 1; margin: 0; }
.wordmark a { color: var(--ink); text-decoration: none; }
nav.site { margin-top: 0.55rem; font-size: 0.95rem; }
nav.site a { color: var(--ink); }
nav.site .sep { color: #777; padding: 0 0.3rem; }

/* Headings and text */
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; font-size: 1.7rem; margin: 0.4rem 0 0.5rem; }
h2 { font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; font-size: 1.25rem;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.25rem; margin: 1.6rem 0 0.6rem; }
p { max-width: 68ch; }
.lede { font-size: 1.05rem; }
.small { font-size: 0.85rem; color: #333; }

/* Ruled stat strip */
.stats { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark); padding: 0.6rem 0; margin: 1rem 0; }
.stats div { padding: 0 1.4rem 0 0; margin-right: 1.4rem; }
.stats dt { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #444; }
.stats dd { margin: 0; font-size: 1.35rem; font-variant-numeric: tabular-nums; }

/* Tables */
table { border-collapse: collapse; width: 100%; margin: 0.5rem 0 1rem; }
caption { text-align: left; font-size: 0.85rem; color: #333; padding-bottom: 0.35rem; }
th { text-align: left; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: #444;
  border-bottom: 1px solid var(--rule-dark); padding: 0.3rem 0.5rem 0.3rem 0; }
td { border-bottom: 1px solid var(--rule); padding: 0.32rem 0.5rem 0.32rem 0; vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
td.name { overflow-wrap: anywhere; }
td.date { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.9rem; }

/* Play buttons */
button.play { font: inherit; font-size: 0.85rem; background: #fff; color: var(--ink);
  border: 1px solid var(--rule-dark); border-radius: 2px; padding: 0.18rem 0.7rem; cursor: pointer; white-space: nowrap; }
button.play[aria-pressed="true"] { background: var(--ink); color: #fff; }
button.play:hover { text-decoration: underline; }

/* Random station picker (home page) */
#random-btn { font: inherit; background: var(--ink); color: #fff;
  border: 1px solid var(--ink); border-radius: 2px; padding: 0.5rem 1rem; cursor: pointer; }
#random-btn:hover { text-decoration: underline; }

/* Pagination */
.pagination { margin: 0.8rem 0 1.4rem; font-size: 0.92rem; line-height: 2; }
.pagination a, .pagination .current { padding: 0.1rem 0.45rem; }
.pagination .current { border: 1px solid var(--rule-dark); font-weight: bold; }
.pagination .gap { color: #777; }

/* Provenance block */
.prov { border-top: 1px solid var(--rule); margin-top: 1.2rem; padding-top: 0.5rem; font-size: 0.85rem; color: #333; }
.prov p { margin: 0.15rem 0; }
.prov .lab { font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: #444; padding-right: 0.5rem; }

/* Search */
form.search { border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule);
  padding: 0.8rem 0; margin: 0.8rem 0; }
form.search label { display: block; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: #444; margin-bottom: 0.2rem; }
form.search input[type="search"], form.search select { font: inherit; padding: 0.35rem; border: 1px solid #888; border-radius: 2px; max-width: 100%; }
form.search .row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
form.search button { font: inherit; background: var(--ink); color: #fff; border: 1px solid var(--ink);
  border-radius: 2px; padding: 0.4rem 1.1rem; cursor: pointer; }
#search-status { font-size: 0.92rem; }
ul.results { list-style: none; padding: 0; margin: 0.5rem 0; }
ul.results li { border-bottom: 1px solid var(--rule); padding: 0.35rem 0; display: flex; gap: 0.8rem; align-items: baseline; }
ul.results .rname { overflow-wrap: anywhere; }
ul.results .rcountry { color: #444; font-size: 0.88rem; white-space: nowrap; }
.section-search-status { font-size: 0.92rem; }
.section-search-results .section-search-reset { font: inherit; font-size: 0.88rem; background: #fff;
  color: var(--ink); border: 1px solid var(--rule-dark); border-radius: 2px;
  padding: 0.3rem 0.8rem; cursor: pointer; }
.section-search-results .section-search-reset:hover { text-decoration: underline; }

/* Player bar: persistent region outside main content, sticky at foot of viewport */
.playerbar { position: sticky; bottom: 0; background: #fff; border-top: 2px solid var(--rule-dark);
  padding: 0.55rem 0 0.7rem; margin-top: 1.5rem; }
.player-inner { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.player-now { margin: 0; font-size: 0.92rem; min-width: 12rem; flex: 1 1 14rem; overflow-wrap: anywhere; }
.player-now .lab { font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: #444; display: block; }
.playerbar audio { width: 20rem; max-width: 100%; height: 2.2rem; }
#player-stop { font: inherit; font-size: 0.85rem; background: #fff; border: 1px solid var(--rule-dark);
  border-radius: 2px; padding: 0.3rem 0.8rem; cursor: pointer; }
.player-status { margin: 0; font-size: 0.85rem; color: #333; flex: 1 1 100%; }
.player-meta { margin: 0; font-size: 0.92rem; flex: 1 1 100%; overflow-wrap: anywhere; }
.player-meta .lab { font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: #444; padding-right: 0.5rem; }
footer.colophon { border-top: 1px solid var(--rule); margin-top: 0; padding: 0.6rem 0 1.2rem; font-size: 0.85rem; color: #333; }