.trace-reference { display: none; }

.trace-archive-overlay {
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:rgba(244,243,245,.96);
  pointer-events:all;
}
.trace-archive-folder {
  position:relative;
  width:min(96vw,1320px);
  height:min(94vh,950px);
  color:#171716;
  will-change:transform,opacity;
}
.trace-archive-folder svg {
  position:absolute;
  inset:50% auto auto 50%;
  width:min(94vw,1260px);
  height:min(91vh,900px);
  overflow:visible;
  filter:drop-shadow(0 28px 30px rgba(0,0,0,.32));
  transform:translate(-50%,-50%);
}
.trace-archive-folder__paper { fill:#eef8fb; }
.trace-archive-folder__front {
  transform-origin:50% 94%;
  transition:transform 170ms cubic-bezier(.23,1,.32,1);
}
.trace-archive-folder__front.is-open { transform:translateY(22px) skewX(-4deg) scaleY(.84); }
.trace-archive-folder__label {
  position:absolute;
  z-index:3;
  top:15%;
  left:8%;
  color:#153c50;
  letter-spacing:.08em;
  pointer-events:none;
}
.trace-archive-folder__label b { display:block; font:clamp(22px,3.4vw,52px)/1 var(--font-display); font-weight:400; }
.trace-archive-folder__label span { display:block; margin-top:8px; font-size:11px; }
.trace-file-card {
  position:absolute;
  z-index:2;
  top:19%;
  left:50%;
  width:min(58vw,680px);
  min-height:260px;
  max-height:46vh;
  padding:clamp(22px,3vw,42px);
  overflow:hidden;
  border:1px solid rgba(23,23,22,.3);
  background:#f7f5ed;
  color:#171716;
  box-shadow:0 16px 34px rgba(0,0,0,.18);
  transform:translate3d(-50%,0,0);
  transform-origin:50% 100%;
  will-change:transform,opacity;
}
.trace-file-card img { float:right; width:min(34%,180px); max-height:150px; margin:0 0 16px 22px; object-fit:contain; }
.trace-file-card__meta,.trace-file-card__details { margin:0; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.trace-file-card__text { margin:30px 0; font-size:clamp(18px,2vw,30px); line-height:1.35; white-space:pre-wrap; }
.trace-file-card__details { clear:both; opacity:.62; }
.trace-archive-folder__status {
  position:absolute;
  z-index:4;
  right:7%;
  bottom:8%;
  margin:0;
  color:#e9f7fc;
  font-size:10px;
  letter-spacing:.1em;
}
.trace-archive-overlay.is-filed .trace-archive-folder__status { color:#171716; }

@media (max-width:760px) {
  .trace-archive-folder { width:100vw; height:86vh; }
  .trace-archive-folder svg { width:138vw; height:auto; }
  .trace-file-card { top:23%; width:78vw; min-height:210px; max-height:42vh; }
  .trace-archive-folder__label { top:19%; left:7%; }
  .trace-archive-folder__status { right:5%; bottom:13%; }
}

@media (prefers-reduced-motion:reduce) {
  .trace-archive-folder,.trace-file-card { will-change:auto; }
  .trace-archive-folder__front { transition:none; }
}