/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root{
  /* Cover palette (dark → light) */
  --bg:#060706;        /* darkest */
  --panel:#0c0c0c;     /* topbar / cards */
  --border:#35363b;    /* dividers / outlines */
  --muted:#616063;     /* subtle text / secondary */
  --text:#a09ba0;      /* MAIN neutral light */
  --warm:#b9aa9d;      /* warm highlight ALT (from title text) */
  --accent:#b9aa9d;    /* underline + link accent */
  --accent2:#555456;   /* optional secondary accent */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.55;
}

/* Top bar */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 22px;
  background:var(--panel);
  border-bottom:2px solid var(--border);
}

.brand{
  color:var(--warm);
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:none;
}

/* Nav */
.nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.nav a{
  color:var(--text);
  text-decoration:none;
  padding:6px 2px;
  border-bottom:3px solid transparent;
}

.nav a:hover{
  border-bottom-color:var(--accent);
}

.nav a[aria-current="page"]{
  border-bottom-color:var(--accent);
}

/* Layout container */
.container{
  max-width:980px;
  margin:0 auto;
  padding:34px 22px 60px;
}

/* Type */
h1{
  margin:0 0 10px;
  font-size:40px;
  letter-spacing:-0.02em;
}

p{ margin:0 0 18px; color:var(--warm); }

/* Info page section spacing */
.container h2{
  margin: 28px 0 8px;
}

.container h2:first-of-type{
  margin-top: 18px;
}

.container .subline{
  margin: 0 0 12px;
}

.container .btnrow{
  margin: 10px 0 0;
}

/* Grid utility (for Video page later) */
.grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card{
  background:var(--panel);
  border:2px solid var(--border);
  border-radius:18px;
  padding:14px;
}

/* Content links (always look like links) — but NOT buttons */
.container a:not(.btn){
  color: var(--warm);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
}

.container a:not(.btn):hover{
  color: var(--text);
  border-bottom-color: var(--accent2);
}

.container a:not(.btn):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Music page layout */
.release{
  display:grid;
  gap:22px;
  grid-template-columns: 320px 1fr;
  align-items:start;
}

@media (max-width: 760px){
  .release{ grid-template-columns: 1fr; }
}

.cover{
  width:100%;
  max-width:320px;
  border-radius:18px;
  border:2px solid var(--border);
  display:block;
}

.album-title{
  margin:14px 0 10px;
  font-size:22px;
  letter-spacing:-0.01em;
  color:var(--text);
}

.tracklist{
  margin:0;
  padding-left: 1.25em;
}

.tracklist li{
  padding:6px 0;
  color:var(--warm);
}

.artblock{
  margin-top:34px;
  padding-top:22px;
  border-top:2px solid var(--border);
}

.muted{
  color:var(--muted);
}

.art{
  width:100%;
  border-radius:18px;
  border:2px solid var(--border);
  display:block;
  margin-top:14px;
}

.release-media{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.backcover{
  opacity:0.96; /* tiny softening so it sits like printed art */
}

/* Collapsible Info posts (same as music page) */
details.post{
  margin: 0 0 14px;
}

details.post > summary.song-title{
  cursor: pointer;
  font-size: 20px; /* keep bigger title if you want */
}

/* Optional: a small date next to the title */
.post-date{
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-left: 10px;
}

/* Optional: space for the expanded content */
details.post .post-body{
  margin-top: 10px;
}

/* Custom caret */
details.post > summary.song-title::after{
  content: "▾";
  float: right;
  color: var(--muted);
  font-size: 14px;
  transform: translateY(1px);
}

details.post[open] > summary.song-title::after{
  content: "▴";
}

/* Make sure title isn’t bold */
summary.song-title{
  font-weight: 400;
}

/* Date style */
.postdate{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 10px;
}

/* Info posts: make the title a bit larger than song titles */
details.post > summary.song-title{
  font-size: 17px;      /* try 16–18 */
  letter-spacing: 0.04em; /* optional: slightly less “tight” */
}

/* Lyrics block: printed / lyric-sheet vibe */
.song-title{
  margin:22px 0 8px;
  padding-top:14px;
  border-top:1px solid var(--border);
  font-size:15px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text);
}

.lyrics{
  margin:0 0 12px;
  padding-left:14px;
  border-left:2px solid var(--border);
  color:var(--warm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:14px;
  line-height:1.7;
  white-space:pre-wrap; /* when you paste real lyrics later, line breaks will hold */
}

.postdate{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 10px;
}

/* Topbar baked grain background */
.topbar{
  background: var(--panel);
  background-image: url("/img/topbar-grain.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Video cards */
.vidcard{
  display:block;
  background: var(--panel);
  border:2px solid var(--border);
  border-radius:18px;
  text-decoration:none;
  color: var(--text);
  overflow:hidden;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.vidcard:hover{
  transform: translateY(-2px);
  border-color: rgba(185,170,157,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.thumb{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display:block;
  background: #000;
}

.vidmeta{
  padding:12px 14px 14px;
}

.vidtitle{
  font-weight:650;
  letter-spacing:0.02em;
  color: var(--warm);
}

.vidsub{
  margin-top:4px;
  font-size:13px;
  color: var(--muted);
}

/* Coming-soon video cards */
.vidcard.is-soon{
  cursor: default;
}

.vidcard.is-soon:hover{
  transform:none;
  box-shadow:none;
  border-color: var(--border);
}

.vidcard.is-soon .thumb{
  opacity:0.92;
}
.thumbwrap{
  position:relative;
}

.badge{
  position:absolute;
  top:10px;
  right:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.45);
  color: var(--text);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  backdrop-filter: blur(4px);
}

/* Only the featured "soon" card lifts on hover */
.vidcard.is-featured:hover{
  transform: translateY(-2px);
  border-color: rgba(185,170,157,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.idline{
  margin: 0 0 18px;
  color: var(--warm);
  font-size: 16px;
}

.bio-photo{
  width:100%;
  max-width:980px;
  border-radius:18px;
  border:2px solid var(--border);
  display:block;
  margin-top:18px;
}

/* BUTTON LAYOUT (used on Music + Info) */
.buttons,
.btnrow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 18px;
}

/* BASE BUTTON */
.btn{
  font-weight:650;
  display:inline-block;
  padding:10px 12px;
  border-radius:14px;
  border:2px solid var(--border);
  background:var(--panel);
  color:var(--text);
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.btn:hover{
  transform: translateY(-1px);
  color: var(--text);
}

/* ---------- MUSIC PAGE (color ONLY on hover) ---------- */
.btn-spotify:hover{
  background: rgba(30, 215, 96, .22);
  border-color: rgba(30, 215, 96, .75);
  box-shadow: 0 0 0 3px rgba(30, 215, 96, .22), 0 0 34px rgba(30, 215, 96, .20);
}

.btn-apple:hover{
  background: rgba(250, 60, 105, .22);
  border-color: rgba(250, 60, 105, .75);
  box-shadow: 0 0 0 3px rgba(250, 60, 105, .22), 0 0 34px rgba(250, 60, 105, .20);
}

.btn-elastic:hover{
  background: rgba(255, 153, 0, .22);
  border-color: rgba(255, 153, 0, .75);
  box-shadow: 0 0 0 3px rgba(255, 153, 0, .22), 0 0 34px rgba(255, 153, 0, .20);
}

.btn-bandcamp:hover{
  background: rgba(30, 190, 215, .22);
  border-color: rgba(30, 190, 215, .75);
  box-shadow: 0 0 0 3px rgba(30, 190, 215, .22), 0 0 34px rgba(30, 190, 215, .20);
}

/* DistroKid / HyperFollow (DistroKid green) */
.btn-hyperfollow:hover{
  background: rgba(0, 205, 120, .22);
  border-color: rgba(0, 205, 120, .75);
  box-shadow: 0 0 0 3px rgba(0, 205, 120, .22), 0 0 34px rgba(0, 205, 120, .20);
}

/* ---------- INFO PAGE (always-on outline + same hover fill strength) ---------- */

/* Elsewhere (slightly softer always-on) */
.btn-youtube{
  border-color: rgba(255, 0, 0, .65);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, .12), 0 0 26px rgba(255, 0, 0, .10);
}

.btn-youtube:hover{
  background: rgba(255, 0, 0, .22);
  border-color: rgba(255, 0, 0, .75);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, .22), 0 0 34px rgba(255, 0, 0, .20);
}

.btn-instagram{
  border-color: rgba(225, 48, 108, .65);
  box-shadow: 0 0 0 3px rgba(225, 48, 108, .12), 0 0 26px rgba(225, 48, 108, .10);
}

.btn-instagram:hover{
  background: rgba(225, 48, 108, .22);
  border-color: rgba(225, 48, 108, .75);
  box-shadow: 0 0 0 3px rgba(225, 48, 108, .22), 0 0 34px rgba(225, 48, 108, .20);
}

/* Other Projects (strong always-on) */
.btn-pyrite{
  border-color: rgba(156, 148, 23, .65);
  box-shadow: 0 0 0 3px rgba(156, 148, 23, .12), 0 0 26px rgba(156, 148, 23, .10);
}

.btn-pyrite:hover{
  background: rgba(156, 148, 23, .22);
  border-color: rgba(156, 148, 23, .75);
  box-shadow: 0 0 0 3px rgba(156, 148, 23, .22), 0 0 34px rgba(156, 148, 23, .20);
}

.btn-norman{
  border-color: rgba(114, 47, 159, .65);
  box-shadow: 0 0 0 3px rgba(114, 47, 159, .12), 0 0 26px rgba(114, 47, 159, .10);
}

.btn-norman:hover{
  background: rgba(114, 47, 159, .22);
  border-color: rgba(114, 47, 159, .75);
  box-shadow: 0 0 0 3px rgba(114, 47, 159, .22), 0 0 34px rgba(114, 47, 159, .20);
}

/* Collaborators (medium always-on, SAME hover fill strength) */
.btn-jj{
  border-color: rgba(227, 219, 208, .65);
  box-shadow: 0 0 0 3px rgba(227, 219, 208, .12), 0 0 26px rgba(227, 219, 208, .10);
}

.btn-jj:hover{
  background: rgba(227, 219, 208, .22);
  border-color: rgba(227, 219, 208, .75);
  box-shadow: 0 0 0 3px rgba(227, 219, 208, .22), 0 0 34px rgba(227, 219, 208, .20);
}

.btn-chesty{
  border-color: rgba(244, 86, 147, .65);
  box-shadow: 0 0 0 3px rgba(244, 86, 147, .12), 0 0 26px rgba(244, 86, 147, .10);
}

.btn-chesty:hover{
  background: rgba(244, 86, 147, .22);
  border-color: rgba(244, 86, 147, .75);
  box-shadow: 0 0 0 3px rgba(244, 86, 147, .22), 0 0 34px rgba(244, 86, 147, .20);
}

/* Music page credits block */
.release-credits{
  margin-top: 34px;
  padding-top: 22px;
  border-top: 2px solid var(--border);
}

/* The “written by” line (sits above the logo row) */
.creditline{
  margin: 0 0 12px;
  color: var(--warm);
  font-size: 14px;
}

/* Row that holds logo + P/C */
.music-footer{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.zlr-logo{
  display:block;
  width: 60px;     /* adjust this number smaller/larger */
  height:auto;
  opacity: 0.5;    /* adjust if needed */
}

.pcline{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 1.4;
}

.music-footer{
  align-items:center;
}