:root{--bg:#0b0f14;--panel:#111827;--soft:#1f2937;--text:#e5e7eb;--muted:#9ca3af;--accent:#22d3ee;--accent-2:#a78bfa;--ok:#34d399;--warn:#f59e0b;--br:18px;--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:radial-gradient(1200px 700px at 80% -20%, rgba(34,211,238,.12), transparent),linear-gradient(180deg,#0b0f14,#0a0d12 40%,#0b0f14);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:20px}
/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--panel);
  border-bottom: 1px solid #263142;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.brand{display:flex;gap:18px;align-items:center}
.logo {
  display: block;
  width: 64px;
  height: 64px;
}
.logo img {
  width: 80px;
  height: auto;
  display: block;
}
.site-title{font-size:clamp(20px,3vw,28px);letter-spacing:.4px;margin:0;font-weight:800}
.strap{color:var(--muted);font-size:14px;margin:2px 0 0}
.nav{display:flex;gap:16px;padding:10px 0}
.nav-link{color:var(--muted)}.nav-link:hover{color:var(--text)}
.search{margin-left:auto;background:var(--panel);border:1px solid #263142;border-radius:14px;padding:6px 10px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow)}
.search input{all:unset;color:var(--text);width:220px}
/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:22px 0 80px}
.card{position:relative;background:linear-gradient(180deg, var(--panel), #0f1520);border:1px solid #263142;border-radius:var(--br);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.thumb{aspect-ratio:16/9;display:block;background:#0e1622;object-fit:cover;width:100%}
.badge{position:absolute;top:14px;left:14px;background:rgba(0,0,0,.5);padding:6px 10px;border-radius:999px;border:1px solid #263142;color:var(--text);font-size:12px}
.card .body{padding:16px}
.card h3{margin:0 0 8px;font-size:18px}
.meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px}
.meta .dot { display:inline-block; width:auto; margin:0 6px; }
.excerpt{margin:12px 0;color:#cbd5e1;line-height:1.5}
.read-more{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border-radius:12px;background:linear-gradient(180deg,#15aabf,#1098ad);border:0;color:#031317;font-weight:700}
/* post */
.post{max-width:1100px;margin:0 auto}
.post-hero{border-radius:22px;overflow:hidden;border:1px solid #263142;box-shadow:var(--shadow);margin:18px 0}
.post h2{font-size:clamp(26px,5vw,40px);margin:12px 0}
.byline{color:var(--muted);font-size:14px}
.audio{background:var(--soft);border:1px solid #263142;padding:12px;border-radius:14px;display:flex;align-items:center;gap:10px;margin:14px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.chip{font-size:12px;padding:6px 10px;border-radius:999px;background:#0e1622;border:1px solid #263142;color:var(--muted)}
.site-footer{border-top:1px solid #263142;color:var(--muted);padding:24px 0 60px}
/* utilities */
.figure{margin:18px 0}
.figure img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid #263142;box-shadow:var(--shadow)}
.caption{color:var(--muted);font-size:13px;margin-top:6px}
.embed{position:relative;width:100%;aspect-ratio:16/9;border:1px solid #263142;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:#000}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-embed-fb{position:relative;width:100%;max-width:560px;margin:1rem 0 1.5rem}.video-embed-fb iframe{width:100%;height:auto;aspect-ratio:9/16}
blockquote{position:relative;font-size:1.4rem;line-height:1.55;font-weight:400;padding:1.8rem 2.4rem;margin:2.5rem 0;border-radius:18px;background:rgba(255,255,255,0.03);border-left:6px solid var(--accent);border-right:6px solid var(--accent);box-shadow:0 15px 40px rgba(0,0,0,0.25)}blockquote::before{content:none}blockquote cite{display:block;margin-top:1rem;font-size:1rem;color:var(--muted);text-align:right;font-style:normal}
.discography-table{width:100%;border-collapse:collapse;margin:2em 0;font-size:1rem;line-height:1.5}.discography-table th,.discography-table td{text-align:left;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}.discography-table th{font-weight:600;color:var(--text)}.discography-table tbody tr:hover{background:rgba(255,255,255,.04)}

/* --- Responsive mobile header layout --- */
@media (max-width: 700px) {
  .brand {
    flex-direction: column;       /* Stack vertically */
    align-items: center;          /* Center logo + text */
    text-align: center;
  }

  .logo {
    order: 1;
    margin-bottom: 10px;
  }

  .site-title {
    order: 2;
    font-size: 22px;
  }

  .strap {
    order: 3;
    font-size: 13px;
    margin-bottom: 10px;
  }

  .search {
    order: 4;
    margin: 10px 0;
    width: 100%;
    justify-content: center;
  }

  .nav {
    order: 5;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    border-top: 1px solid #263142;
    padding-top: 8px;
  }

  .nav-link {
    padding: 8px;
    font-size: 14px;
  }
}


/* Tag results heading */
.tag-header{color:var(--text);font-size:24px;margin:20px 0 10px;text-transform:capitalize}

/* Badge link behavior */
.badge{ text-decoration:none; cursor:pointer; transition:background .15s,color .15s }
.badge:hover{ background:var(--accent); color:#031317 }


/* Meta tag link next to date */
.meta-tag{color:var(--muted);text-decoration:none;transition:color .15s}
.meta-tag:hover{color:var(--accent)}


/* v1.5.1: ensure card click works and badge is decorative */
.card{ position: relative; }
.open{ display: block; }
.badge{ pointer-events: none; } /* overlay won't block clicks */
.meta-tag{ color: var(--muted); text-decoration: none; transition: color .15s; }
.meta-tag:hover{ color: var(--accent); }


/* v1.6 fix: separate Read More link */
.card { position: relative; }
.open { display: block; }
.badge { pointer-events: none; }
.read-more-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg,#15aabf,#1098ad);
  color: #031317;
  font-weight: 700;
  text-decoration: none;
  margin: 12px 16px 16px;
  border: 0;
}
.read-more-link:hover { filter: brightness(1.05); }
.meta-tag { color: var(--muted); text-decoration: none; transition: color .15s; }
.meta-tag:hover{ color: var(--accent); }


/* v1.7: focus style for chip links */
.chip:focus { outline: 2px solid var(--accent); outline-offset: 2px; }



/* === Chairkickers v1.8.x – Dark Background & Heading Hierarchy === */

/* Background */
body {
  background-color: #000;
  background-image: none;
  color: #fff;
}

/* Headings */
h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.6em;
}

.post h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
}

/* Links for dark background */
a {
  color: #4ec7ff;
}
a:hover {
  color: #74eaff;
}



/* === Chairkickers v1.8.x – Dot spacing fix for post cards === */
.dot::before {
  content: "";
  margin: 0 6px;
  opacity: 0;
}
.dot { display:inline-block; width:auto; margin:0 6px; }



/* Sidebar layout: outer card + 300px inner content */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

.post-sidebar .card.sidebar-inner {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-content {
  width: 300px;
  box-sizing: content-box;
}

.sidebar-logo {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* Responsive: stack sidebar under content on smaller screens */
@media (max-width: 980px) {
  .post-layout {
    grid-template-columns: 1fr;
  }
}