:root {
  --paper: #f3ead5;
  --ink: #0b0b0d;
  --red: #ef242a;
  --pink: #ff3f91;
  --blue: #0879cd;
  --cyan: #00c7d9;
  --orange: #ff7517;
  --yellow: #f4b900;
}

.eighties-header { border-bottom-color: var(--yellow); }
.eighties-header p { color: var(--yellow); }

.eighties-intro {
  background:
    linear-gradient(111deg, transparent 0 63%, rgba(239, 36, 42, .1) 63.3% 72%, transparent 72.3%),
    var(--paper);
}
.eighties-intro::before {
  border-color: var(--yellow);
  border-width: 22px;
  border-radius: 8% 68% 18% 61%;
  transform: rotate(14deg);
}
.eighties-intro::after { content: "80 80 80 80"; }
.eighties-intro h1 em { color: var(--yellow); -webkit-text-stroke: 3px var(--ink); }
.eighties-intro .eyebrow { color: var(--red); }
.eighties-intro .intro-note strong { color: var(--blue); }
.eighties-intro .gesture-one { color: var(--red); }
.eighties-intro .gesture-three { color: var(--cyan); }

.eighties-portrait-section {
  background:
    radial-gradient(circle at 10% 14%, var(--red) 0 10%, transparent 10.4%),
    radial-gradient(circle at 88% 22%, var(--cyan) 0 12%, transparent 12.4%),
    linear-gradient(118deg, transparent 0 16%, var(--yellow) 16.3% 28%, transparent 28.3% 56%, var(--pink) 56.3% 70%, transparent 70.3%),
    var(--ink);
}
.eighties-portrait-section::after { border-color: rgba(255, 255, 255, .72); }
.eighties-portrait-section .portrait-copy { color: var(--paper); }
.eighties-portrait-section .portrait-copy > p:first-child { color: var(--yellow); }

.eighties-portrait-open {
  aspect-ratio: 1146 / 1536;
  background: var(--yellow);
  border-color: var(--paper);
  box-shadow: 22px 24px 0 rgba(239, 36, 42, .78);
}
.eighties-portrait-open:hover,
.eighties-portrait-open:focus-visible { box-shadow: 10px 12px 0 var(--red); }

.portrait-art.eighties-art {
  isolation: isolate;
  background: var(--yellow);
  -webkit-mask-image: none;
  mask-image: none;
}
.eighties-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}
.eighties-band-field {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: hidden;
  padding: 1.25%;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(5px, .72cqw, 11px);
  font-weight: 800;
  line-height: .91;
  letter-spacing: -.045em;
  text-align: justify;
  text-transform: uppercase;
  mix-blend-mode: screen;
  opacity: .88;
}
.band-name { display: inline; text-shadow: 0 0 2px #000, 1px 1px 0 rgba(0, 0, 0, .92); }
.band-name::after { content: " ·"; color: rgba(255, 255, 255, .78); }
.band-red { color: #ff2030; }
.band-cyan { color: #00ddf0; }
.band-white { color: #fff9e9; }
.band-pink { color: #ff48a0; }
.band-blue { color: #168ee2; }
.band-yellow { color: #ffe11f; }
.band-orange { color: #ff7a18; }

.eighties-index { border-top-color: var(--yellow); }
.eighties-lightbox .lightbox-panel { border-color: var(--yellow); }
.eighties-zoom-canvas {
  width: 1146px;
  aspect-ratio: 1146 / 1536;
  background: var(--yellow);
  box-shadow: 0 0 0 8px var(--red);
}
.eighties-lightbox .zoom-toolbar button:hover,
.eighties-lightbox .zoom-toolbar button:focus-visible { background: var(--yellow); color: var(--ink); }

@media (max-width: 700px) {
  .eighties-intro h1 em { -webkit-text-stroke-width: 2px; }
  .eighties-band-field { font-size: clamp(4.5px, .9cqw, 8px); line-height: .88; }
  .eighties-portrait-open { box-shadow: 11px 12px 0 rgba(239, 36, 42, .78); }
}