/* A paper archive: back, dark lining, stored cards, front pocket, two-sided lid. */
.portfolio-document {
  --archive-paper: #e7e3dd;
  --archive-ink: #24221f;
  --archive-red: #c44837;
  width: min(84vw, calc((100svh - 200px) * 1.55), 1180px);
  height: auto;
  aspect-ratio: 1.55;
  border: 0;
  background: transparent;
  box-shadow: none;
  perspective: 1800px;
  color: var(--archive-ink);
}
.archive-back {
  position: absolute;
  z-index: 0;
  inset: 18% 0 0;
  border: 1px solid #c6bfb3;
  border-radius: 5px;
  background: #cfc7ba;
  box-shadow: 0 var(--archive-shadow-lift, 24px) 56px rgb(44 35 27 / .18), 0 3px 7px rgb(44 35 27 / .12);
}
.archive-well {
  position: absolute;
  z-index: 1;
  inset: calc(18% + 4px) 5px 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #514a40, #958775 24%, #b0a18e 60%);
  box-shadow: inset 0 12px 18px rgb(25 20 15 / .35), inset 4px 0 5px rgb(25 20 15 / .16), inset -4px 0 5px rgb(25 20 15 / .16);
}
.archive-well::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(#e3d9c7, #afa38f);
  content: '';
}
.archive-gusset {
  position: absolute;
  z-index: 2;
  top: 23%;
  bottom: 1%;
  width: 4%;
  background: linear-gradient(90deg, #d9cfc0, #a99c89, #d3c8b6);
  clip-path: polygon(0 0, 100% 13%, 100% 100%, 0 100%);
}
.archive-gusset--left { left: 5px; }
.archive-gusset--right { right: 5px; transform: scaleX(-1); }
.archive-inserts { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.archive-insert.catalog-card {
  position: absolute;
  top: 33%;
  width: 18%;
  aspect-ratio: .82;
  display: flex;
  flex-direction: column;
  padding: clamp(6px, .9vw, 12px);
  border-radius: clamp(8px, 1vw, 15px);
  opacity: 1;
  transform: none;
  transform-origin: center;
  box-shadow: 0 4px 9px rgb(30 24 18 / .16);
}
.archive-insert .catalog-card__ghost { top: 10px; right: 8px; font-size: clamp(21px, 4vw, 58px); }
.archive-insert .catalog-card__heading { margin: 0 0 12px; clip-path: none; }
.archive-insert .catalog-card__number { font-size: clamp(10px, 1.8vw, 24px); }
.archive-insert .catalog-card__name { margin-top: 5px; font-size: clamp(7px, 1.2vw, 17px); }
.archive-insert .catalog-card__image { width: 100%; margin-top: auto; border-radius: clamp(4px, .6vw, 9px); }
.archive-front {
  position: absolute;
  z-index: 4;
  inset: 32% 0 0;
  overflow: hidden;
  border: 1px solid #d2cbc0;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(135deg, rgb(255 255 255 / .24), transparent 55%), var(--archive-paper);
  clip-path: polygon(0 0, 43% 0, 50% 1.8%, 57% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 3px 1px rgb(255 255 255 / .55), inset 0 -3px 1px rgb(132 119 100 / .12);
}
.archive-front::after {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(74 62 43 / .018) 3px 4px);
  pointer-events: none;
  content: '';
}
.archive-front__index { position: absolute; top: 13%; left: 5%; margin: 0; font-size: clamp(8px, .85vw, 14px); line-height: 1.5; letter-spacing: .06em; }
.archive-front__heading { position: absolute; top: 17%; right: 5%; margin: 0; text-align: right; }
.archive-front__heading strong { display: block; font-size: clamp(19px, 3vw, 44px); font-weight: 700; line-height: 1.3; }
.archive-front__heading span { display: block; margin-top: 5px; font-size: clamp(8px, 1.1vw, 17px); letter-spacing: .08em; }
.archive-front__year {
  position: absolute;
  bottom: 6%;
  left: 4%;
  width: 92%;
  margin: 0;
  color: var(--archive-red);
  font-size: clamp(100px, min(25vw, 43svh), 350px);
  font-weight: 900;
  letter-spacing: -.045em;
  text-align: center;
  line-height: .88;
}
.portfolio-document__flap {
  position: absolute;
  z-index: 5;
  top: 18%;
  left: 0;
  right: 0;
  height: 28%;
  background: none;
  clip-path: none;
  filter: none;
  transform: rotateX(0deg);
  transform-style: preserve-3d;
  transform-origin: 50% 0;
  backface-visibility: visible;
  pointer-events: none;
}
.archive-flap__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-top: 1px solid #f6f2e9;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 53% 100%, 47% 100%, 0 70%);
  backface-visibility: hidden;
  background: linear-gradient(165deg, #f0ede7, #ddd7cd);
  box-shadow: inset 0 -3px 1px rgb(94 80 58 / .25);
}
.archive-flap__face--front { transform: translateZ(1px); }
.archive-flap__face--back {
  transform: rotateX(180deg) translateZ(1px);
  /* Match the front outline after turning this face around its centre. */
  clip-path: polygon(0 30%, 47% 0, 53% 0, 100% 30%, 100% 100%, 0 100%);
  background: linear-gradient(175deg, #cbbda7, #e0d6c4 70%, #c4b399);
  box-shadow: inset 0 -3px 1px rgb(88 70 42 / .3);
}
.archive-flap__face--back::after {
  position: absolute;
  inset: 8% 3% 18%;
  border-top: 1px solid rgb(109 88 54 / .18);
  border-bottom: 1px solid rgb(255 255 255 / .28);
  content: '';
}
.portfolio-document.is-unsealed .portfolio-document__flap { z-index: 2; }
.portfolio-document__flap-meta { top: 16%; font-size: clamp(7px, .9vw, 15px); letter-spacing: .02em; }
.archive-fastener {
  position: absolute;
  left: 50%;
  width: 6%;
  aspect-ratio: 1;
  border: 1px solid #ddd7cd;
  border-radius: 50%;
  background: linear-gradient(145deg, #fffdfa, #ebe5dc);
  box-shadow: 0 2px 3px rgb(50 39 25 / .2), inset 0 1px 1px white;
  transform: translateX(-50%);
}
.archive-fastener::after { position: absolute; inset: 38%; border-radius: 50%; background: #494136; box-shadow: inset 0 1px 2px rgb(0 0 0 / .2); content: ''; }
.archive-fastener--flap { top: 58%; }
.archive-fastener--body { top: 18%; }
.archive-cord { position: absolute; z-index: 6; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.archive-cord path { fill: none; stroke: #655b4c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.portfolio-document__open { z-index: 10; }
.catalog-card { transform-origin: 50% 50%; }
@media (max-width: 959px) {
  .portfolio-document { width: min(calc(100vw - 40px), 640px); height: auto; aspect-ratio: 1.3; }
  .archive-front__year { font-size: clamp(100px, 29vw, 220px); bottom: 8%; }
  .archive-front__heading strong { font-size: clamp(18px, 4.7vw, 30px); }
  .archive-front__heading span { font-size: 7px; letter-spacing: .02em; }
  .archive-front__index { font-size: 7px; }
  .archive-insert .catalog-card__heading { margin-bottom: 6px; }
}