/* 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{
  /* PYRITE X — “more alien” (cool teal blacks + acid highlights) */
  --bg:#01080A;        /* deep blue-green space */
  --panel:#0E2326;     /* cold suit/console teal */
  --border:#2B4B4A;    /* oxidized teal outline */
  --muted:#89A6A0;     /* cool faded print tone */
  --text:#D7FFF1;      /* pale mint light */
  --warm:#BFEFE1;      /* readable “warm” but still teal-leaning */

  --accent:#FFF575;    /* title yellow-gold */
  --accent2:#7DFF6A;   /* acid-lime */

  /* RGB helpers for rgba() glows */
  --accent-rgb: 255,245,117;
  --accent2-rgb: 125,255,106;

  /* Fonts */
  --pixel: "Press Start 2P", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --body: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }

/* Pixel vibe on UI + headings */
.brand,
.nav a,
.btn,
h1, h2, h3,
.song-title,
.postdate,
.badge{
  font-family: var(--pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Press Start runs small, but we can still nudge overall UI down */
.nav a{ font-size: 11px; }
.btn{ font-size: 11px; padding: 10px 11px; }
.brand{ font-size: 12px; }

/* Optional: headings slightly smaller too */
h1{ font-size: 36px; }
h2{ font-size: 18px; }
h3{ font-size: 16px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: var(--body);
  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(--accent);
  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(--accent2);
}

.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(var(--accent2-rgb), .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(var(--accent-rgb), .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);
}

/* Bandcamp (always-on outline + glow, like the rest of the Info buttons) */
.btn-bandcamp{
  border-color: rgba(30, 190, 215, .65);
  box-shadow: 0 0 0 3px rgba(30, 190, 215, .12), 0 0 26px rgba(30, 190, 215, .10);
}

.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 (PYRITE X cover-world: gold + acid-lime) */
.btn-pyrite{
  border-color: rgba(var(--accent-rgb), .70);
  box-shadow: 0 0 0 3px rgba(var(--accent2-rgb), .12), 0 0 26px rgba(var(--accent2-rgb), .10);
}

.btn-pyrite:hover{
  background: rgba(var(--accent2-rgb), .16);
  border-color: rgba(var(--accent-rgb), .80);
  box-shadow: 0 0 0 3px rgba(var(--accent2-rgb), .22), 0 0 34px rgba(var(--accent2-rgb), .20);
}

/* Norman / Rozz (cool teal-lavender that fits the alien palette) */
.btn-norman{
  border-color: rgba(140, 170, 255, .55);
  box-shadow: 0 0 0 3px rgba(140, 170, 255, .10), 0 0 26px rgba(140, 170, 255, .08);
}

.btn-norman:hover{
  background: rgba(140, 170, 255, .18);
  border-color: rgba(140, 170, 255, .72);
  box-shadow: 0 0 0 3px rgba(140, 170, 255, .18), 0 0 34px rgba(140, 170, 255, .16);
}

/* JJ / Ford (neutral “spacesuit white” that still matches the site) */
.btn-jj{
  border-color: rgba(215, 255, 241, .55); /* uses --text vibe */
  box-shadow: 0 0 0 3px rgba(215, 255, 241, .10), 0 0 26px rgba(215, 255, 241, .08);
}

.btn-jj:hover{
  background: rgba(215, 255, 241, .16);
  border-color: rgba(215, 255, 241, .72);
  box-shadow: 0 0 0 3px rgba(215, 255, 241, .18), 0 0 34px rgba(215, 255, 241, .16);
}

/* Chesty / Zar (hot “bio-signal” magenta that pops against teal) */
.btn-chesty{
  border-color: rgba(255, 80, 190, .60);
  box-shadow: 0 0 0 3px rgba(255, 80, 190, .11), 0 0 26px rgba(255, 80, 190, .09);
}

.btn-chesty:hover{
  background: rgba(255, 80, 190, .18);
  border-color: rgba(255, 80, 190, .78);
  box-shadow: 0 0 0 3px rgba(255, 80, 190, .20), 0 0 34px rgba(255, 80, 190, .18);
}

/* Slandol (The Colour of Grey — soft mauve/grey from cover text) */
.btn-slandol{
  border-color: rgba(181, 176, 181, .65);
  box-shadow: 0 0 0 3px rgba(181, 176, 181, .12), 0 0 26px rgba(181, 176, 181, .10);
}

.btn-slandol:hover{
  background: rgba(181, 176, 181, .18);
  border-color: rgba(181, 176, 181, .78);
  box-shadow: 0 0 0 3px rgba(181, 176, 181, .20), 0 0 34px rgba(181, 176, 181, .18);
}

/* Physical (Bandcamp link, hover-only) — force override */
a.btn.btn-physical:hover{
  background: rgba(30, 190, 215, .22) !important;
  border-color: rgba(30, 190, 215, .75) !important;
  box-shadow: 0 0 0 3px rgba(30, 190, 215, .22), 0 0 34px rgba(30, 190, 215, .20) !important;
}

/* 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;
}

/* Fix ℗ sizing on iOS: force a symbol-friendly font just for the glyph */
.pcline .sym{
  font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols2", "Arial Unicode MS", sans-serif;
  font-size: 1em;
  line-height: 1;
  vertical-align: baseline;
}

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