/* Norsolia brand override on top of HTML5 UP "Massively".
   Scope: retint the template to warm charcoal + amber, and add the bottom
   player, episode rows, cover tiles, status tags and the downloads chart.
   Target: <=150 lines. Everything else is the template's own CSS. */

:root { --amber:#e4a93c; --amber-2:#f0bd5c; --ox:#2a1b1b; --warm:#171310; --bone:#efe7d7; }

/* --- retint: warm the template's blue-grey base and accent --- */
body { background-color: var(--warm); }
#bg:after { background-color: rgba(20,15,11,0.86) !important; }
a { color: var(--amber); }
a:hover { color: var(--amber-2); }
#main > .post header.major > .date:before,
#main > .post header.major > .date:after,
header.major .date:before, header.major .date:after { background-color: var(--amber) !important; }
#nav ul.links li a.active, #nav ul.links li.active a { box-shadow: inset 0 -2px 0 0 var(--amber); color:#fff; }
input[type="submit"].primary, input[type="button"].primary, .button.primary {
  background-color: var(--amber); color: #1a140d; box-shadow: none; }
input[type="submit"].primary:hover, .button.primary:hover { background-color: var(--amber-2) !important; color:#1a140d !important; }
.kicker { font-family:"Source Sans Pro",sans-serif; text-transform:uppercase; letter-spacing:0.22em;
  font-size:0.72em; font-weight:900; color:var(--amber); display:block; margin-bottom:0.5em; }
body { padding-bottom: 68px; } /* room for the fixed player */

/* --- status tags --- */
.tag { display:inline-block; font-family:"Source Sans Pro",sans-serif; font-weight:900; font-size:0.55em;
  letter-spacing:0.18em; text-transform:uppercase; padding:0.25em 0.7em; border:2px solid currentColor; }
.tag.ok,.tag.operational,.tag.published,.tag.resolved,.tag.on-air { color:var(--amber); }
.tag.degraded,.tag.scheduled,.tag.queued { color:#d6b36a; }
.tag.down,.tag.late,.tag.draft { color:#c56b5a; }

/* --- episode rows (Spotify/Apple-style list) --- */
.episodes { list-style:none; padding:0; margin:1.5em 0; }
.episodes li { display:grid; grid-template-columns:2.5em 1fr auto auto; gap:1em; align-items:center;
  padding:0.9em 0; border-top:solid 1px rgba(128,128,128,0.25); }
.episodes li .epn { font-family:"Source Sans Pro",sans-serif; font-weight:900; opacity:.45; }
.episodes li .ept { font-weight:700; }
.episodes li .ept small { display:block; font-weight:300; opacity:.7; font-size:0.8em; }
.episodes li .epd { font-variant-numeric:tabular-nums; opacity:.7; font-size:0.85em; }
.playbtn { background:none; border:2px solid var(--amber); color:var(--amber); width:2.4em; height:2.4em;
  border-radius:50%; cursor:pointer; font-size:0.9em; line-height:1; padding:0; }
.playbtn:hover { background:var(--amber); color:#1a140d; }

/* --- cover tiles grid --- */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; margin:1.5em 0;
  background:rgba(128,128,128,0.25); border:1px solid rgba(128,128,128,0.25); }
.tiles a { display:block; aspect-ratio:1/1; background-size:cover; background-position:center; position:relative;
  text-decoration:none; }
.tiles a span { position:absolute; left:0; right:0; bottom:0; padding:0.5em 0.6em; font-size:0.8em; font-weight:700;
  color:#fff; background:linear-gradient(transparent, rgba(20,15,11,0.92)); }

/* --- downloads chart --- */
.chart { width:100%; height:120px; display:block; margin:1em 0; }
.chart rect { fill:var(--amber); }
.chart .axis { stroke:rgba(128,128,128,0.4); stroke-width:1; }
.chart text { fill:rgba(128,128,128,0.9); font-size:10px; font-family:"Source Sans Pro",sans-serif; }

/* --- chapters list --- */
.chapters { list-style:none; padding:0; margin:1em 0; }
.chapters button { background:none; border:0; border-left:2px solid rgba(128,128,128,0.35); color:inherit;
  padding:0.4em 0 0.4em 0.9em; cursor:pointer; text-align:left; width:100%; font-family:inherit; }
.chapters button:hover, .chapters button.current { border-left-color:var(--amber); color:var(--amber); }
.chapters .ch-t { opacity:.55; font-variant-numeric:tabular-nums; margin-right:0.7em; }

/* --- the persistent bottom player --- */
#player { position:fixed; left:0; right:0; bottom:0; z-index:1000; display:flex; align-items:center; gap:0.9em;
  padding:0 1em; height:60px; background:#120e0a; border-top:2px solid var(--amber); color:var(--bone);
  font-family:"Source Sans Pro",sans-serif; }
#player[hidden] { display:none; }
#player .np-disc { width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:repeating-conic-gradient(#2a211a 0 12deg,#120e0a 12deg 24deg); border:2px solid var(--amber); }
#player.is-playing .np-disc { animation:np-spin 3s linear infinite; }
@keyframes np-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #player.is-playing .np-disc { animation:none; } }
#player .np-btn { background:none; border:0; color:var(--bone); cursor:pointer; font-size:1em; padding:0.3em 0.4em; font-weight:700; }
#player .np-btn:hover { color:var(--amber); }
#player .np-toggle { border:2px solid var(--amber); color:var(--amber); width:2.4em; height:2.4em; border-radius:50%; }
#player .np-meta { min-width:0; flex:0 1 auto; }
#player .np-title { display:block; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:30vw; }
#player .np-show { font-size:0.75em; color:rgba(239,231,215,0.55); text-transform:uppercase; letter-spacing:0.1em; }
#player .np-bar { flex:1 1 auto; height:4px; background:rgba(239,231,215,0.18); cursor:pointer; min-width:60px; }
#player .np-fill { height:100%; width:0; background:var(--amber); }
#player .np-time { font-variant-numeric:tabular-nums; font-size:0.78em; color:rgba(239,231,215,0.7); white-space:nowrap; }
#player .np-speed { font-variant-numeric:tabular-nums; min-width:2.6em; }
@media (max-width:736px){ #player .np-meta,#player .np-time{ display:none; } }

/* copyright line + misc */
#copyright a { color:rgba(239,231,215,0.6); }
.cover-hero { border:2px solid var(--amber); }