.archive-mast {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(2.75rem, 6vw, 5.5rem);
  border-bottom: 1px solid var(--ink);
  color: var(--deep-ink);
  background: var(--blush);
}

.archive-mast::before {
  position: absolute;
  z-index: -1;
  inset: -25% -8% -30% 47%;
  content: "";
  background: radial-gradient(var(--ink) 1px, transparent 1.45px) 0 0 / 7px 7px;
  mask-image: radial-gradient(ellipse at 82% 57%, #000, transparent 72%);
  opacity: .44;
  transform: rotate(-12deg);
  pointer-events: none;
}

.archive-crumb {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: .55rem;
  font: 650 .8rem/1.4 var(--mono);
}

.archive-mast h1 {
  max-width: 17ch;
  margin-block: .16em .2em;
  font-size: clamp(2.8rem, 7.4vw, 7.35rem);
  font-weight: 950;
  text-wrap: balance;
}

.archive-mast p {
  max-width: 58ch;
  font-size: clamp(1.04rem, 1.6vw, 1.25rem);
}

.archive-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.archive-section + .archive-section { border-top: 1px solid var(--line); }
.archive-section h2 {
  margin-bottom: .58em;
  font-size: clamp(2rem, 4.5vw, 4.15rem);
  text-wrap: balance;
}

.archive-copy {
  max-width: 68ch;
  color: var(--deep-ink);
  overflow-wrap: anywhere;
}

.archive-copy > * + :is(h2, h3) { margin-top: 1.4em; }
.archive-copy h3 { margin-bottom: .5em; }
.archive-copy + .archive-gallery { margin-top: 2rem; }

.archive-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  align-items: center;
  margin-bottom: 1.85rem;
  padding-block: .35rem;
  border-block: 1px solid var(--line);
}

.archive-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 850;
  text-decoration: none;
}

.archive-tabs a:is([aria-current], :hover, :focus-visible) { text-decoration: underline; }

.archive-catalog, .archive-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.archive-gallery { align-items: start; }
.archive-gallery-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.archive-gallery-screens { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.archive-gallery-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 64rem;
  margin-inline: auto;
}

.archive-card, .archive-gallery figure {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--cream);
  box-shadow: 3px 3px 0 var(--sheet);
}

.archive-card {
  display: block;
  color: var(--deep-ink);
  text-decoration: none;
}

.archive-card > img, .archive-card-picture {
  display: block;
  width: 100%;
  aspect-ratio: 1.28;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--sheet);
}

.archive-card > img, .archive-card-picture img { object-fit: cover; }
.archive-card-picture { position: relative; }
.archive-card-picture img { width: 100%; height: 100%; }
.archive-card-picture .archive-card-alternate {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 180ms ease;
}
@media (hover: hover) {
  .archive-card:hover .archive-card-alternate { opacity: 1; }
}

.archive-card > div { padding: clamp(.85rem, 2vw, 1.2rem); }
.archive-card h3 { font-size: clamp(1.32rem, 2.1vw, 2rem); line-height: 1.12; }
.archive-card p { margin-top: .35rem; }
.archive-card:is(:hover, :focus-visible) h3 { text-decoration: underline; text-underline-offset: .15em; }

.archive-gallery figure { padding: clamp(.42rem, 1vw, .85rem); }
.archive-gallery figure > a { display: block; width: fit-content; max-width: 100%; margin-inline: auto; }
.archive-gallery figure > :is(a, img, video) { background: var(--sheet); }
.archive-gallery img, .archive-gallery video { width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.archive-gallery img, .archive-gallery video { display: block; }
.archive-gallery-compact figure :is(img, video) { max-height: min(65vh, 42rem); object-fit: contain; }
.archive-gallery figcaption {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
  font: 600 .76rem/1.5 var(--mono);
}

.archive-links {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.4rem;
  margin-top: 1.4rem;
}

@media (max-width: 850px) {
  .archive-catalog, .archive-gallery:not(.archive-gallery-single, .archive-gallery-screens) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .archive-catalog, .archive-gallery:not(.archive-gallery-single) { grid-template-columns: minmax(0, 1fr); }
  .archive-mast::before { inset-inline-start: 56%; opacity: .28; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-card-picture .archive-card-alternate { transition: none; }
}