/* Tokens lifted from acethemadrapper.com so the book pages read as part of the site.
   Every font has a real fallback: these pages have to still work when Google Fonts
   is a memory. Shared by song.html, index.html, archive.html and 404.html — edit here,
   not in four places. */
:root{
  --ink:#0A0908; --ink-2:#100E0C; --panel:#16130F; --panel-2:#1E1A15;
  --bone:#E9E1D3; --bone-dim:#A2988A; --bone-fade:#6E665C;
  --blood:#8C1F14; --blood-hi:#C4321F; --blood-glow:rgba(196,50,31,.28);
  --line:rgba(233,225,211,.10); --line-2:rgba(233,225,211,.18);
  --r-sm:6px; --r-md:12px; --r-lg:20px; --wrap:44rem;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--bone);
  font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.68;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:1.5rem 1.25rem 5rem}

a{color:var(--blood-hi)}
.back{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--bone-fade);margin-bottom:2.5rem}
.back:hover{color:var(--blood-hi)}

.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blood-hi);margin-bottom:.75rem}
h1{font-family:'Anton',Impact,'Haettenschweiler',sans-serif;font-weight:400;
  font-size:clamp(2.4rem,9vw,4rem);line-height:.95;letter-spacing:.01em;
  text-transform:uppercase;margin:0 0 .6rem}
.sub{font-size:1rem;color:var(--bone-dim);margin:0 0 .35rem}
.meta{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bone-fade);margin:0 0 2.25rem}

/* ---------- players ---------- */
.track{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.1rem 1.1rem 1rem;margin:0 0 1rem}
.track h2{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blood-hi);margin:0 0 .75rem}
audio{width:100%;display:block;border-radius:var(--r-sm)}
.dl{display:inline-block;margin-top:.85rem;font-size:.78rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bone-dim);text-decoration:none;
  border-bottom:1px solid var(--line-2);padding-bottom:2px}
.dl:hover{color:var(--blood-hi);border-color:var(--blood-hi)}

/* ---------- lyrics ---------- */
.lyrics{margin:2.5rem 0;padding:1.5rem 1.35rem;background:var(--ink-2);
  border-left:3px solid var(--blood);border-radius:0 var(--r-md) var(--r-md) 0}
.stanza{margin:0 0 1.5rem}
.stanza:last-child{margin-bottom:0}
.line{display:block;font-size:.94rem;line-height:1.62;color:var(--bone);
  padding-left:1.2em;text-indent:-1.2em}
.note{display:block;font-size:.8rem;line-height:1.6;color:var(--bone-fade);font-style:italic}

/* ---------- prose ---------- */
.body{margin:2.5rem 0 0;padding-top:2rem;border-top:1px solid var(--line)}
.body h2,.gallery h2,.links h2,.entries h2{font-size:.72rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blood-hi);margin:0 0 1.25rem}
.body p{margin:0 0 1.15rem;color:var(--bone)}
.body p:last-child{margin-bottom:0}

/* ---------- photos ---------- */
.gallery{margin:3rem 0 0;padding-top:2rem;border-top:1px solid var(--line)}
.gallery figure{margin:0 0 1.75rem}
.gallery img{width:100%;display:block;border-radius:var(--r-sm);border:1px solid var(--line)}
.gallery figcaption{font-size:.85rem;color:var(--bone-dim);margin-top:.6rem}

/* ---------- streaming ---------- */
.links{margin:3rem 0 0;padding-top:2rem;border-top:1px solid var(--line)}
.ext{display:inline-block;margin:0 .5rem .5rem 0;padding:.55rem 1rem;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line-2);color:var(--bone);
  font-size:.82rem;font-weight:600;letter-spacing:.04em;text-decoration:none}
.ext:hover{border-color:var(--blood-hi);color:var(--blood-hi)}
.links-note{font-size:.78rem;line-height:1.6;color:var(--bone-fade);margin:.9rem 0 0}

/* ---------- entry list (lander / archive) ---------- */
.entries{margin:3rem 0 0;padding-top:2rem;border-top:1px solid var(--line)}
.entry-card{display:block;text-decoration:none;color:inherit;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.15rem;margin:0 0 .7rem}
.entry-card:hover{border-color:var(--blood-hi)}
.entry-card .t{display:block;font-family:'Anton',Impact,sans-serif;font-size:1.35rem;line-height:1.1;
  text-transform:uppercase;letter-spacing:.01em;color:var(--bone)}
.entry-card:hover .t{color:var(--blood-hi)}
.entry-card .d{display:block;font-size:.82rem;color:var(--bone-dim);margin-top:.2rem}
.entry-card .n{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bone-fade);margin-top:.45rem}
.unlisted{font-size:.82rem;line-height:1.65;color:var(--bone-fade);margin:1.1rem 0 0;
  padding-left:.9rem;border-left:2px solid var(--line-2)}

/* ---------- colophon prose ---------- */
.colophon{margin:3rem 0 0;padding-top:2rem;border-top:1px solid var(--line)}
.colophon h2{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blood-hi);margin:0 0 1.25rem}
.colophon p{margin:0 0 1.15rem}
.colophon dl{margin:1.5rem 0 0;font-size:.9rem}
.colophon dt{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-fade);margin-top:1.1rem}
.colophon dd{margin:.25rem 0 0;color:var(--bone)}
.colophon code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  color:var(--bone-dim)}

footer{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--bone-fade)}
footer a{color:var(--bone-dim)}
footer em{color:var(--bone-dim)}

@media (max-width:30rem){ .wrap{padding:1.25rem 1rem 4rem} .line{font-size:.88rem} }