/* Original prints, collected at their own scale. No cropped type or letterboxing. */
.archive-files {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 3.25rem;
  width: 100%;
  margin: 2.75rem auto 3.5rem;
  padding-inline: 2%;
}

.archive-file,
.archive-file:nth-child(even) {
  position: relative;
  width: 94%;
  max-width: 34rem;
  min-width: 0;
  margin: 0;
  padding: .65rem .65rem .25rem;
  color: var(--zine-ink, #1a1916);
  background: #f7f2e9;
  border: 1px solid #1a191628;
  box-shadow: 2px 3px 0 #1a191619;
  transform: rotate(-1deg);
  transform-origin: 50% 15%;
}

.archive-file:nth-child(2n of .archive-file:not([hidden])) {
  justify-self: end;
  transform: rotate(1.25deg);
}

.archive-file::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -.7rem;
  left: 37%;
  width: 26%;
  height: 1.25rem;
  background: #bbad8bc2;
  border-inline: 1px dashed #8f826750;
  transform: rotate(-3deg);
  pointer-events: none;
}

.archive-file:nth-child(even)::before { left: 47%; transform: rotate(5deg); }

.archive-file__image {
  display: block;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.archive-file__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.archive-file__image > .archive-file__action {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .2rem;
  border-bottom: 1px solid #1a191626;
  color: var(--zine-ink, #1a1916);
  font: var(--type-small, .875rem)/1.35 var(--font-mono);
  text-align: left;
}

.archive-file__action > span {
  color: var(--zine-accent, #b41970);
  font-size: 1.25rem;
  line-height: 1;
}

.archive-file__image:hover > .archive-file__action,
.archive-file__image:focus-visible > .archive-file__action {
  color: var(--zine-accent, #b41970);
}

.archive-file__details { padding: 1rem .4rem .15rem; }

.archive-file .file-label {
  margin: 0 0 .35rem;
  color: var(--zine-muted, #565046);
  font: var(--type-label, .75rem)/1.5 var(--font-mono);
  letter-spacing: .015em;
  text-transform: none;
}

.archive-file h3 {
  margin: 0 0 .4rem;
  font: clamp(1.65rem, 5.3vw, 2.3rem)/1.13 var(--font-marker);
  font-weight: 400;
  letter-spacing: -.025em;
  overflow-wrap: normal;
  text-wrap: balance;
}

.archive-file__details > .archive-file__venue {
  margin: 0 0 .55rem;
  color: var(--zine-muted, #565046);
  font: var(--type-small, .875rem)/1.5 var(--font-mono);
}

.archive-file__notes {
  margin-top: .8rem;
  border-top: 1px dashed #1a191644;
  font: var(--type-small, .875rem)/1.6 var(--font-mono);
}

.archive-file__notes > summary {
  min-height: 44px;
  align-content: center;
  padding: .6rem 0;
  color: var(--zine-ink, #1a1916);
  cursor: pointer;
  list-style-position: inside;
}

.archive-file__notes > summary:hover { color: var(--zine-accent, #b41970); }
.archive-file__notes > summary::marker { color: var(--zine-accent, #b41970); font-size: .8em; }
.archive-file__notes > p { margin: .15rem 0 .5rem; }

.archive-file__source {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .5rem;
  color: var(--zine-accent, #b41970);
  font: var(--type-small, .875rem)/1.5 var(--font-mono);
  text-underline-offset: .25em;
}

@media (min-width: 700px) {
  .archive-files {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4rem 1.5rem;
    margin-block: 3.5rem 4rem;
    padding-inline: 1%;
  }

  .archive-file,
  .archive-file:nth-child(even) {
    grid-column: span 6;
    width: 100%;
    max-width: none;
    padding: .8rem .8rem .4rem;
  }

  .archive-file:nth-child(2 of .archive-file:not([hidden])) {
    grid-column: 8 / span 5;
    margin-top: 4rem;
  }

  .archive-file:nth-child(3 of .archive-file:not([hidden])) {
    grid-column: 2 / span 6;
  }

  .archive-file:nth-child(4 of .archive-file:not([hidden])) {
    grid-column: 9 / span 4;
    margin-top: 3rem;
  }

  .archive-file h3 { font-size: clamp(1.6rem, 2.4vw, 2.35rem); }
  .archive-file__details { padding: 1.15rem .55rem .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-file,
  .archive-file:nth-child(even),
  .archive-file:nth-child(2n of .archive-file:not([hidden])) { transform: none; }
}