.photography-study.photography-archive {
  grid-template-columns:1.65fr 1fr;
  gap:60px;
  align-items:center;
}

.archival-board {
  min-width:0;
}

.archive-print-layout {
  position:relative;
  height:780px;
  margin:15px 4% 0;
  isolation:isolate;
}

.archive-print {
  position:absolute;
  width:47%;
  padding:11px 11px 36px;
  background:#f0e7ce;
  color:#233328;
  border:1px solid #99876845;
  box-shadow:3px 8px 14px #14251b26,0 1px 2px #14251b25;
  transform:rotate(var(--print-angle));
  transition:transform .3s,box-shadow .3s;
}

.archive-print::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.15;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.35'/%3E%3C/svg%3E");
}

.archive-print-image {
  position:relative;
  aspect-ratio:.8;
  overflow:hidden;
  background:#d9d3bc;
}

.archive-print-image img {
  position:absolute;
  inset:0;
  width:200%;
  max-width:none;
  height:100%;
  object-fit:fill;
}

.archive-print-image.crop-right img {
  left:-100%;
}

.print-caption {
  position:absolute;
  left:12px;
  right:12px;
  bottom:11px;
  display:flex;
  justify-content:space-between;
  gap:6px;
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
}

.print-caption i {
  font-family:'Courier New',monospace;
  font-size:10px;
  font-style:normal;
  align-self:center;
}

.print-bridge-back {
  --print-angle:-6deg;
  left:0;
  top:12px;
  z-index:2;
}

.print-fro-left {
  --print-angle:-3deg;
  left:5%;
  top:330px;
  z-index:3;
}

.archive-paperclip {
  position:absolute;
  z-index:5;
  top:-19px;
  left:16px;
  width:20px;
  height:59px;
  border:3px solid #8c8d7d;
  border-radius:12px;
  box-shadow:2px 1px 2px #0003,inset 1px 0 1px #f6f4e6;
  transform:rotate(5deg);
}

.archive-paperclip::after {
  content:'';
  position:absolute;
  left:3px;
  top:4px;
  width:7px;
  height:43px;
  border:2px solid #b7b7a6;
  border-bottom:0;
  border-radius:7px 7px 0 0;
}

.archive-stamp {
  position:absolute;
  z-index:5;
  right:-12px;
  top:18px;
  border:2px solid #a74a37;
  border-radius:4px;
  padding:5px 10px 3px;
  color:#a74a37;
  font-family:var(--serif);
  font-size:36px;
  line-height:1;
  transform:rotate(12deg);
  mix-blend-mode:multiply;
  opacity:.88;
}

.archive-stamp small {
  display:block;
  font-family:'Courier New',monospace;
  letter-spacing:.14em;
  font-size:9px;
  margin-bottom:4px;
}

.archive-index-card {
  position:absolute;
  z-index:6;
  left:0;
  bottom:4px;
  width:67%;
  background:#f3ecd8;
  padding:19px 22px;
  color:#29382d;
  box-shadow:2px 5px 10px #14251b30;
  transform:rotate(-3deg);
  border:1px solid #99876826;
}

.archive-index-card .object-fields {
  margin:0;
  font-family:'Courier New',monospace;
}

.archive-index-card .object-fields div {
  padding:7px 0;
  border:0;
  display:block;
}

.archive-index-card dt {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.6;
}

.archive-index-card dd {
  font-size:12px;
  line-height:1.4;
  margin:2px 0 0;
}

.archival-board > figcaption {
  margin-top:22px;
}

@media(hover:hover) {
  .archive-print:hover {
    transform:translateY(-4px) rotate(var(--print-angle));
    box-shadow:4px 13px 18px #14251b30;
    z-index:7;
  }
}

@media(max-width:1100px) {
  .photography-study.photography-archive {
    grid-template-columns:1.45fr 1fr;
    gap:35px;
  }

  .archive-print-layout {
    height:670px;
  }

  .print-fro-left {
    top:280px;
  }

  .print-caption {
    font-size:15px;
  }
}

@media(max-width:760px) {
  .photography-study.photography-archive {
    grid-template-columns:1fr;
    gap:38px;
  }

  .archive-print-layout {
    height:clamp(540px,140vw,750px);
    margin:14px 3% 0;
  }

  .archive-print {
    padding:8px 8px 30px;
  }

  .print-fro-left {
    top:57vw;
  }

  .print-caption {
    left:9px;
    right:9px;
    bottom:9px;
    font-size:15px;
  }

  .print-caption i {
    font-size:8px;
  }

  .archive-stamp {
    right:-8px;
    top:13px;
    font-size:27px;
    padding:4px 7px;
  }

  .archive-stamp small {
    font-size:7px;
  }

  .archive-paperclip {
    width:16px;
    height:48px;
    border-width:2px;
    top:-15px;
    left:13px;
  }

  .archive-paperclip::after {
    width:6px;
    height:35px;
    left:2px;
  }

  .archive-index-card {
    width:70%;
    padding:12px 16px;
  }

  .archive-index-card .object-fields div {
    padding:4px 0;
  }

  .archive-index-card dd {
    font-size:11px;
  }
}

.no-motion .archive-print {
  transition:none;
}

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

/* One portrait from each hairstyle, arranged as two overlapping archival prints. */
.archive-print {
  width:59%;
}

.print-fro-left {
  left:auto;
  right:0;
  top:230px;
  --print-angle:6deg;
}

@media(max-width:1100px) {
  .archive-print-layout {
    height:660px;
  }

  .print-fro-left {
    top:190px;
  }
}

@media(max-width:760px) {
  .archive-print-layout {
    height:calc(110vw + 100px);
  }

  .print-fro-left {
    top:50vw;
  }
}