/* --------------------
   THEME: POP URBAN (IG PALETTE)
   - Magenta/Purple base
   - Acid yellow highlight
   - Punch red accent
   - Black ink text
-------------------- */

:root{
  --bg: #B83CFF;          /* hot magenta/purple */
  --panel: rgba(0,0,0,0.10);
  --ink: #0b0b0b;         /* black */
  --paper: #fff3a6;       /* warm acid yellow */
  --yellow: #FFE84F;      /* strong yellow */
  --red: #FF2D2D;         /* punch red */
  --white: #ffffff;
  --line: rgba(0,0,0,0.18);
}

/* --------------------
   RESET & BASE
-------------------- */

*{ margin:0; padding:0; box-sizing:border-box; }

html{ font-size:16px; }

body{
  font-family: -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

/* --------------------
   LAYOUT
-------------------- */

.container{
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

section{ margin-bottom: 3.5rem; }

/* --------------------
   TYPOGRAPHY
-------------------- */

h1{
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--yellow);
  text-shadow:
    -2px -2px 0 var(--ink),
     2px -2px 0 var(--ink),
    -2px  2px 0 var(--ink),
     2px  2px 0 var(--ink);
  margin-bottom: 1.2rem;
}

h2{
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

p{
  font-size: 0.98rem;
  color: var(--ink);
}

/* --------------------
   PANELS (subtle structure)
-------------------- */

.hero p,
section p{
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--ink);
  padding: 0.9rem 1rem;
  box-shadow: 6px 6px 0 var(--ink);
  max-width: 68ch;
}

/* --------------------
   DIVIDERS
-------------------- */

hr{
  border: none;
  height: 2px;
  background: var(--ink);
  opacity: 0.25;
  margin: 2.5rem 0 3rem;
}

/* --------------------
   LINKS
-------------------- */

a{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  transition: transform 0.15s ease, background 0.15s ease;
}

a:hover{
  background: var(--yellow);
  transform: translateY(-1px);
}

/* --------------------
   LISTS (SECTIONS)
-------------------- */

ul{
  list-style: none;
  margin-top: 1.25rem;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}

li{
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}

li:last-child{ border-bottom: none; }

/* small red “tag” accent on list bullets vibe */
li::before{
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background: var(--red);
  border: 1px solid var(--ink);
  vertical-align: middle;
}

/* --------------------
   NOTICE IMAGE
-------------------- */

.notice-img img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 10px;
  border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  background: rgba(255,255,255,0.35);
}

/* --------------------
   FOOTER
-------------------- */

footer{
  margin-top: 4rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(0,0,0,0.75);
}

footer p{
  display:inline-block;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--ink);
  padding: 0.6rem 0.8rem;
  box-shadow: 6px 6px 0 var(--ink);
}

/* --------------------
   RESPONSIVE
-------------------- */

@media (max-width: 600px){
  .container{ padding: 3.2rem 1.2rem; }
  h1{ letter-spacing: 0.09em; }
}

/* --------------------
   NAV (simple)
-------------------- */
.nav{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 2.5rem;
}

/* --------------------
   MASONRY GALLERY (CSS columns)
   - Works great on mobile
-------------------- */
.gallery{
  column-count: 1;
  column-gap: 1.25rem;
}

@media (min-width: 700px){
  .gallery{ column-count: 2; }
}

@media (min-width: 980px){
  .gallery{ column-count: 3; }
}

.card{
  break-inside: avoid;
  margin: 0 0 1.25rem;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  border-radius: 10px;
  overflow: hidden;
}

.card img{
  width: 100%;
  height: auto;
  display: block;
}

.card figcaption{
  padding: 0.8rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink);
  background: rgba(255,255,255,0.65);
  border-top: 1px solid rgba(0,0,0,0.12);
}

.lyric-block{
  margin-bottom: 2.5rem;
}

.lyrics{
  white-space: pre-wrap;
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.credit{
  margin-top: 0.8rem;
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--yellow);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 0.45rem 0.6rem;
}

/* --------------------
   LYRICS PAGE ENHANCEMENTS
-------------------- */

/* Gold titles for tracks / verses */
.lyric-block h2{
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow); /* same gold as h1 */
  background: none;
  border: none;
  box-shadow: none;
  margin-bottom: 0.8rem;
}

/* --------------------
   PER-LYRIC COVER IMAGES
-------------------- */

.lyric-cover{
  margin: 1.2rem 0 1.6rem;
}

.lyric-cover img{
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  background: rgba(255,255,255,0.35);
}

.cover-caption{
  margin-top: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.7);
}

/* --------------------
   PROSE PAGE
-------------------- */

.prose-entry{
  margin-bottom: 3rem;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
}

.prose-entry h2{
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.4rem;
}

.meta{
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.65);
  margin-bottom: 1rem;
}

.prose-entry p{
  margin-bottom: 0.9rem;
  font-size: 0.98rem;
  line-height: 1.6;
}

.prose-entry em{
  font-style: italic;
}

.prose-entry .credit{
  margin-top: 1rem;
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--yellow);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 0.4rem 0.6rem;
}

/* --------------------
   RELEVANT CASES (CASE FILE FEEL)
-------------------- */

.case-file{
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  margin-bottom: 3rem;
}

.file-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.case-file h2{
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 0.35rem;
}

.file-meta{
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.65);
}

.file-stamp{
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--white);
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-2deg);
  white-space: nowrap;
}

.case{
  padding: 0.8rem 0;
}

.case-head h3{
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.case-meta{
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.65);
  margin-bottom: 0.9rem;
}

.quote{
  margin: 0 0 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px dashed rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.55);
  border-radius: 10px;
  font-size: 0.98rem;
  line-height: 1.55;
}

.note{
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}

.attribution{
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.6);
}

.case-divider{
  border: none;
  border-top: 1px dashed rgba(0,0,0,0.35);
  margin: 1.4rem 0;
}

.file-footer{
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(0,0,0,0.18);
}

.disclaimer{
  font-size: 0.78rem;
  color: rgba(0,0,0,0.75);
  margin-bottom: 0.9rem;
}

.case-file .credit{
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--yellow);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 0.45rem 0.6rem;
}

.poison-title{
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.footer-card{
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  margin: 2rem 0 0;
}

.footer-card p{
  margin: 0.5rem 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-card p + p{
  border-top: 1px solid rgba(0,0,0,0.18);
  padding-top: 0.7rem;
  margin-top: 0.7rem;
}