:root{ color-scheme:light }
*{ box-sizing:border-box }
html,body{ width:100%; height:100%; margin:0 }
body{
  overflow:hidden;
  background:#f4efe6;
}
.archive-entrance{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.archive-stage{
  position:relative;
  width:max(100vw,177.6833156vh);
  height:max(100vh,56.2799043vw);
  aspect-ratio:1672 / 941;
  flex:none;
  overflow:visible;
  isolation:isolate;
  touch-action:manipulation;
}
.archive-stage.has-active{ cursor:pointer }
.archive-background{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  user-select:none;
  -webkit-user-drag:none;
  z-index:0;
}
.object-layer{
  position:absolute;
  display:block;
  opacity:0;
  pointer-events:none;
  transform:scale(1);
  transform-origin:center;
  transition:
    opacity .12s ease,
    transform .32s cubic-bezier(.16,1,.3,1),
    filter .25s ease;
  will-change:opacity,transform,filter;
  z-index:1;
}
.object-layer img{
  display:block;
  width:100%;
  height:100%;
  user-select:none;
  -webkit-user-drag:none;
}
.object-layer.is-active,
.object-layer:focus-visible{
  opacity:1;
  transform:scale(1.07);
  filter:drop-shadow(0 9px 12px rgba(54,26,18,.23));
  z-index:20;
}
.object-layer:focus{ outline:none }

/* 独立于主视觉图片与物件高亮图层的悬浮布签 */
.archive-tags{
  position:absolute;
  inset:0;
  z-index:40;
  pointer-events:none;
}
.object-tag{
  --tag-rotate:0deg;
  position:absolute;
  display:flex;
  justify-content:center;
  transform:translate(-50%,-50%) rotate(var(--tag-rotate));
  transform-origin:center;
  filter:drop-shadow(0 3px 4px rgba(64,31,20,.16));
  transition:transform .28s cubic-bezier(.16,1,.3,1),filter .22s ease;
}
.tag-label{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:19px;
  padding:4px 9px 3px;
  color:#70241e;
  background:
    linear-gradient(105deg,rgba(255,255,255,.24),transparent 32%),
    #eadbc4;
  border:1px solid rgba(111,61,40,.34);
  box-shadow:inset 0 0 0 2px rgba(255,248,235,.30);
  font:600 clamp(6px,.54vw,8.5px)/1.1 Georgia,"Times New Roman",serif;
  letter-spacing:.045em;
  white-space:nowrap;
}
.tag-label::after{
  content:"";
  position:absolute;
  inset:2px;
  border:1px dashed rgba(151,43,34,.46);
}
.tag-description{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  width:clamp(220px,19vw,310px);
  padding:11px 13px 10px;
  color:#3e332b;
  background:rgba(250,244,232,.97);
  border:1px solid rgba(112,67,44,.30);
  box-shadow:0 10px 24px rgba(60,31,20,.19),inset 0 0 0 3px rgba(146,43,34,.06);
  font:500 clamp(9px,.73vw,12px)/1.65 "PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.015em;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-5px) rotate(0deg);
  transition:opacity .16s ease,transform .28s cubic-bezier(.16,1,.3,1),visibility .16s;
}
.object-tag[data-direction="above"] .tag-description{
  top:auto;
  bottom:calc(100% + 8px);
  transform:translate(-50%,5px) rotate(0deg);
}
.object-tag[data-align="right"] .tag-description{
  right:0;
  left:auto;
  transform:translateY(-5px) rotate(0deg);
}
.object-tag[data-align="right"][data-direction="above"] .tag-description{
  transform:translateY(5px) rotate(0deg);
}
.object-tag[data-align="left"] .tag-description{
  right:auto;
  left:0;
  transform:translateY(-5px) rotate(0deg);
}
.object-tag[data-align="left"][data-direction="above"] .tag-description{
  transform:translateY(5px) rotate(0deg);
}
.object-tag.is-active{
  z-index:60;
  transform:translate(-50%,-50%) rotate(0deg) scale(1.04);
  filter:drop-shadow(0 7px 8px rgba(64,31,20,.24));
}
.object-tag.is-active .tag-label{
  color:#8c211c;
  background:
    linear-gradient(105deg,rgba(255,255,255,.40),transparent 32%),
    #f3e5cd;
}
.object-tag.is-active .tag-description{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) rotate(0deg);
}
.object-tag.is-active[data-align="right"] .tag-description,
.object-tag.is-active[data-align="left"] .tag-description{
  transform:translateY(0) rotate(0deg);
}
.tag-seal{
  --tag-rotate:-1.2deg;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-50%) rotate(var(--tag-rotate)) scale(.94);
}
.tag-seal.is-active{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) rotate(0deg) scale(1.04);
}
.tag-camera{--tag-rotate:-2deg}
.tag-film{--tag-rotate:1deg}
.tag-cable{--tag-rotate:-1.2deg}
.tag-chip{--tag-rotate:1.6deg}
.tag-fabric{--tag-rotate:-1deg}
.tag-letter{--tag-rotate:1.4deg}
.tag-earphones{--tag-rotate:-1.8deg}

@media (max-width:700px){
  .tag-label{
    min-height:14px;
    padding:3px 5px 2px;
    font-size:5.5px;
  }
  .tag-label::after{inset:2px}
  .tag-description{
    width:min(240px,72vw);
    padding:8px 9px;
    font-size:9px;
    line-height:1.5;
  }
}
@media (prefers-reduced-motion:reduce){
  .object-layer,
  .object-tag,
  .tag-description{ transition-duration:.01ms }
}