/* DS1! — phoenix, arizona
   period-html landing site, scuzzy/crooked treatment
   palette: stark white + bright red + black contrast bands */

html, body { margin: 0; padding: 0; }
body {
  background: #ffffff;
  color: #222222;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: #ff0000; text-decoration: underline; }
a:visited { color: #aa0000; }
a:hover { color: #ffffff; background: #ff0000; }

img { display: inline-block; max-width: 100%; }

/* ─── DS1! brand mark (italic serif, red) ────────────────────── */
.brand {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: 900;
  color: #ff0000;
  letter-spacing: -0.03em;
  display: inline-block;
}
.brand--xl { font-size: 130px; line-height: 0.9; }
.brand--lg { font-size: 72px;  line-height: 1; }
.brand--md { font-size: 38px;  line-height: 1; }

/* inline DS1! mentions in body text */
.ds1 {
  color: #ff0000;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: bold;
}

/* ─── nate name treatments ───────────────────────────────────── */
/* the crayon gif — only used in nate's bio card */
.nate-gif {
  display: inline-block;
  height: 1.05em;
  vertical-align: -0.18em;
  margin: 0 2px;
}
.nate-gif--xl {
  height: 4em;
  vertical-align: -1.2em;
}
/* red text "Nate" — used on black sections where the gif would be invisible */
.nate-red {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: 900;
  color: #ff0000;
  font-size: 1.15em;
}

/* ─── scuzzy tilts ───────────────────────────────────────────── */
.tilt-l1 { transform: rotate(-1.2deg); }
.tilt-l2 { transform: rotate(-2.4deg); }
.tilt-l3 { transform: rotate(-3.6deg); }
.tilt-r1 { transform: rotate(1.4deg); }
.tilt-r2 { transform: rotate(2.6deg); }
.tilt-r3 { transform: rotate(3.8deg); }
/* small base tilts so headlines and inline elements don't sit perfectly straight */
.tilt-1 { transform: rotate(-0.8deg); }
.tilt-2 { transform: rotate(0.6deg); }
.tilt-3 { transform: rotate(-1.6deg); }

/* ─── lineup cards ───────────────────────────────────────────── */
.lineup-card {
  box-shadow: 4px 4px 0 #ff0000;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* ─── featured release art (sticker overlay) ─────────────────── */
.cover-frame { position: relative; }
.sticker {
  position: absolute;
  top: -18px;
  right: -18px;
  max-width: 110px;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.5));
}

/* ─── placeholders ──────────────────────────────────────────── */
.placeholder {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ff0000;
  background: #ffffff;
  border: 1px dashed #ff0000;
  padding: 8px 14px;
  display: inline-block;
}
.placeholder--big {
  font-size: 15px;
  padding: 16px 24px;
  letter-spacing: 0.18em;
}
.placeholder--light {
  background: #000000;
  border-color: #ff0000;
  color: #ff0000;
}

/* ─── missing cover marker ───────────────────────────────────── */
.cover-missing {
  width: 110px; height: 110px;
  border: 1.5px dashed #ff0000;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ff0000;
  text-align: center;
  line-height: 1.4;
}

/* ─── tracklist details ──────────────────────────────────────── */
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details > summary > font::before { content: '+ '; color: #ff0000; }
details[open] > summary > font::before { content: '− '; }

/* ─── inline gif sizing ──────────────────────────────────────── */
.inline-gif { vertical-align: middle; height: 1.1em; }