@import url("https://fonts.googleapis.com/css2?family=Finger+Paint&family=Oswald:wght@400;500;600;700&family=Sedgwick+Ave+Display&display=swap");

:root {
  --black: #0b0b0c;
  --bg: #0b0b0c;
  --panel: #151313;
  --panel2: #211b19;
  --ink: #f4ead4;
  --text: #f4ead4;
  --paper: #f4ead4;
  --red: #c9212f;
  --gold: #d6a928;
  --acid: #d6a928;
  --muted: #b9ad9b;
  --line: #d6a92838;
  --shadow: 0 28px 90px #000d;
}

html { background: var(--black); }
body {
  background:
    radial-gradient(circle at 88% 5%, #5d101b66 0, transparent 28rem),
    repeating-linear-gradient(165deg, transparent 0 43px, #f4ead405 44px 45px),
    var(--black);
  color: var(--ink);
  font-family: "Oswald", Arial, sans-serif;
  letter-spacing: .012em;
}

.site-nav {
  border-bottom: 2px solid var(--gold);
  background: linear-gradient(180deg, #0b0b0cf2, #0b0b0cba 75%, transparent);
}
.wordmark {
  color: var(--ink);
  font-family: "Finger Paint", cursive;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000, 4px 4px 0 var(--gold);
}
.wordmark span {
  color: var(--red);
  font-family: "Sedgwick Ave Display", cursive;
  font-weight: 400;
  letter-spacing: -.02em;
}
nav a {
  color: var(--muted);
  font-family: "Oswald", sans-serif;
  font-weight: 600;
}
nav a:hover,
nav a.active { color: var(--gold); }
nav a.active { text-decoration: underline 3px var(--red); text-underline-offset: 7px; }

.hero {
  background:
    radial-gradient(circle at 78% 38%, #c9212f38 0, transparent 31rem),
    linear-gradient(118deg, #080809 0, #151111 62%, #2b1115 100%);
}
.hero::after {
  content: "207";
  position: absolute;
  right: -2vw;
  top: 17%;
  z-index: 0;
  color: #d6a92816;
  font: 400 clamp(12rem, 31vw, 33rem)/.7 "Sedgwick Ave Display", cursive;
  transform: rotate(-9deg);
  pointer-events: none;
}
.kicker,
.section-label,
.eyebrow,
.date { color: var(--gold); font-family: "Oswald", sans-serif; }
.hero h1,
.archive-hero h1 {
  color: var(--ink);
  font-family: "Finger Paint", cursive;
  font-weight: 400;
  letter-spacing: -.055em;
  text-shadow:
    4px 4px 0 #0b0b0c,
    8px 8px 0 var(--red),
    12px 12px 0 var(--gold);
  -webkit-text-stroke: 1px #0b0b0c;
}
.hero h1 em {
  color: var(--red);
  font-family: "Sedgwick Ave Display", cursive;
  font-weight: 400;
  -webkit-text-stroke: 1px var(--ink);
  text-shadow: 6px 6px 0 #0b0b0c, 10px 10px 0 var(--gold);
  transform: rotate(-3deg);
  display: inline-block;
}
.intro,
.archive-hero p { color: #d2c5b2; }
.shoutout-feature {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(260px, 1.2fr);
  align-items: center;
  gap: 16px;
  width: min(650px, 100%);
  margin-top: 25px;
  padding: 15px 17px;
  border: 2px solid var(--gold);
  background: linear-gradient(110deg, #c9212f22, transparent 45%), #0b0b0ce8;
  box-shadow: 7px 8px 0 var(--red);
  transform: rotate(-.45deg);
}
.shoutout-feature::before {
  content: "▶";
  position: absolute;
  right: 12px;
  top: -18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--red);
  color: var(--ink);
  font-family: Arial, sans-serif;
  transform: rotate(5deg);
}
.shoutout-copy { display: flex; flex-direction: column; }
.shoutout-copy span {
  color: var(--gold);
  font: 500 .72rem/1.2 "Oswald", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.shoutout-copy strong {
  margin-top: 3px;
  color: var(--ink);
  font: 400 1.45rem/1 "Sedgwick Ave Display", cursive;
}
.shoutout-copy small { margin-top: 5px; color: var(--muted); font-family: "Oswald", sans-serif; }
.shoutout-feature audio { width: 100%; min-width: 0; margin: 0; filter: sepia(.35) saturate(.75); }
.cta,
.btn,
.pill,
input,
select {
  border-radius: 0;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cta { border: 2px solid var(--gold); transform: skew(-3deg); }
.cta.primary,
.btn.primary {
  border-color: var(--gold);
  background: var(--gold);
  color: #0b0b0c;
  box-shadow: 5px 5px 0 var(--red);
}
.ticker {
  left: 0;
  right: -4%;
  padding-left: clamp(34px, 5vw, 80px);
  background: var(--red);
  color: var(--ink);
  font-family: "Finger Paint", cursive;
  font-weight: 400;
}
.stamp { border-color: var(--gold); color: var(--gold); font-family: "Oswald", sans-serif; }

.graffiti-wall {
  border-color: var(--gold);
  background-color: #302d2b;
  background-image:
    linear-gradient(#09090966, #09090966),
    repeating-linear-gradient(92deg, #393634 0 3px, #292624 4px 8px);
}
.wall-copy strong,
.wall-copy em {
  font-family: "Finger Paint", cursive;
  font-weight: 400;
  color: var(--ink);
  text-shadow: 5px 5px 0 var(--red), 9px 9px 0 var(--gold);
}
.wall-copy em { color: var(--gold); }
.wall-copy span {
  color: #0808099c;
  font-family: "Sedgwick Ave Display", cursive;
  font-weight: 400;
  -webkit-text-stroke-color: #d6a92855;
}
.wall-copy { z-index: 7; }
.wall-copy strong {
  right: 2%;
  top: 3%;
  max-width: 46%;
  text-align: right;
}
.wall-copy em {
  left: 4%;
  bottom: 2%;
  max-width: 48%;
}
.logo-a { box-shadow: 8px 8px 0 var(--red), 12px 12px 0 var(--gold); }
.logo-turntable {
  left: 50%;
  right: auto;
  bottom: 34%;
  width: min(430px, 36%);
  max-width: none;
  transform: translateX(-50%) rotate(1deg);
  box-shadow: 11px 12px 0 #0d0d0d, 16px 17px 0 var(--red);
}
.polaroid { background: var(--ink); box-shadow: 10px 13px 0 #000a, 14px 17px 0 var(--red); }
.polaroid span { font-family: "Sedgwick Ave Display", cursive; font-weight: 400; }

.big-copy,
.show-copy h2,
.sources h2,
.timeline-row h3,
.moment span,
.modal-content h2,
.card h2 {
  font-family: "Sedgwick Ave Display", cursive;
  font-weight: 400;
}
.big-copy { color: var(--ink); }
.manifesto::after {
  color: var(--red);
  font-family: "Finger Paint", cursive;
  font-weight: 400;
}
.numbers { border-color: var(--gold); background: #100e0e; }
.numbers div { border-color: var(--line); }
.numbers strong {
  color: var(--red);
  font-family: "Finger Paint", cursive;
  font-weight: 400;
  text-shadow: 4px 4px 0 var(--gold);
}
.live-show { background: var(--ink); color: var(--black); }
.show-copy .section-label,
.text-link { color: #9d1724; }
.show-copy h2 { color: #0b0b0c; text-shadow: 3px 3px 0 #d6a928; }
.show-copy p { color: #4a3d36; }
.banner-img { box-shadow: 18px 18px 0 var(--red), 24px 24px 0 var(--gold); }
.timeline { background: #100e0e; }
.timeline-row { border-color: var(--line); }
.timeline-source {
  display: inline;
  color: var(--gold);
  font-weight: 600;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.timeline-source:hover { color: var(--ink); }
.timeline-row time {
  color: var(--red);
  font-family: "Finger Paint", cursive;
  font-weight: 400;
  text-shadow: 3px 3px 0 var(--gold);
}
.quote-section { background: linear-gradient(135deg, #8e1420, var(--red) 60%, #6f101a); }
.quote-section blockquote {
  font-family: "Finger Paint", cursive;
  font-weight: 400;
  color: var(--ink);
  text-shadow: 5px 5px 0 #0b0b0c;
}
.quote-section blockquote em {
  color: var(--gold);
  font-family: "Sedgwick Ave Display", cursive;
}
.quote-section a { color: inherit; text-decoration: none; }
.quote-section blockquote a:hover em { color: var(--ink); }
.quote-section p a {
  border-bottom: 2px solid var(--gold);
  padding-bottom: 3px;
}
.source-links a { border-color: var(--gold); }
.source-links a:hover { background: var(--gold); color: var(--black); }
footer { border-color: var(--gold); color: var(--muted); font-family: "Oswald", sans-serif; }

.archive-hero {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 520px);
  border-bottom: 1px solid var(--line);
}
.archive-hero-art {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  min-height: 330px;
}
.archive-hero-art img { display: block; width: 100%; object-fit: contain; }
.archive-banner {
  position: relative;
  z-index: 2;
  transform: rotate(-4deg);
  border: 5px solid var(--ink);
  box-shadow: 9px 10px 0 var(--red), 14px 15px 0 var(--gold);
}
.archive-apple {
  position: relative;
  z-index: 1;
  margin-left: -8%;
  max-height: 310px;
  mix-blend-mode: screen;
  transform: rotate(3deg);
}
.archive-hero::before {
  content: "BLACKTOP / 207 / ARCHIVE";
  position: absolute;
  right: 2%;
  bottom: 5%;
  color: #c9212f20;
  font: 400 clamp(2rem, 7vw, 7rem)/1 "Sedgwick Ave Display", cursive;
  transform: rotate(-6deg);
  pointer-events: none;
}
.archive-hero h1 { position: relative; z-index: 1; }
.pill { border: 1px solid var(--gold); background: #d6a9280c; color: var(--ink); }
.controls { background: linear-gradient(var(--bg) 80%, transparent); }
input,
select {
  border: 1px solid #d6a92870;
  background: #171313;
  color: var(--ink);
}
input:focus,
select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px #d6a92824; }
.grid { gap: 20px; }
.card {
  border: 1px solid #d6a92838;
  border-radius: 0;
  background: linear-gradient(145deg, #211b19, #121010);
  box-shadow: 8px 9px 0 #050505;
}
.card:nth-child(3n+2) { transform: rotate(.35deg); }
.card:nth-child(4n+1) { transform: rotate(-.3deg); }
.card:hover {
  transform: translateY(-5px) rotate(-.35deg);
  border-color: var(--gold);
  box-shadow: 8px 9px 0 var(--red);
}
.card h2 { color: var(--ink); font-size: 1.45rem; }
.art { background: linear-gradient(135deg, #6d121d, #1b1515); }
.fallback {
  color: var(--gold);
  font-family: "Finger Paint", cursive;
  font-weight: 400;
  text-shadow: 4px 4px 0 var(--red);
}
.btn { border-color: #d6a92866; background: #d6a9280b; }
.btn:hover { background: #d6a92820; }
dialog {
  border: 2px solid var(--gold);
  border-radius: 0;
  background: #121010;
  box-shadow: 12px 12px 0 var(--red), var(--shadow);
}
dialog::backdrop { background: #030303e8; }
.modal-close { border-color: var(--gold); border-radius: 0; background: var(--red); color: var(--ink); }
.modal-art-wrap { background: #080707; }
.modal-description { color: #d2c5b2; }
audio { filter: sepia(.25) saturate(.8); }

@media (max-width: 760px) {
  .hero h1,
  .archive-hero h1 { text-shadow: 3px 3px 0 #0b0b0c, 6px 6px 0 var(--red), 9px 9px 0 var(--gold); }
  .wordmark { text-shadow: 2px 2px 0 var(--gold); }
  .archive-hero { grid-template-columns: 1fr; }
  .archive-hero-art {
    grid-template-columns: 1fr 1fr;
    min-height: 230px;
    margin-top: 20px;
  }
  .archive-banner { border-width: 3px; box-shadow: 6px 7px 0 var(--red), 9px 10px 0 var(--gold); }
  .archive-apple { max-height: 220px; }
  .logo-turntable { bottom: 40%; width: min(410px, 68%); }
  .wall-copy strong { max-width: 70%; }
  .wall-copy em { max-width: 70%; }
  .shoutout-feature { grid-template-columns: 1fr; width: 100%; }
}