/* Three project covers: an archive, a runtime blueprint and an editing desk.
   Unique face classes also style the catalogue's cloned miniatures. */
.exhibit-memory .exhibit-face.reminder-cover {
  position: relative;
  height: auto;
  min-height: 330px;
  padding: 22px 23px 18px;
  background: var(--panel);
  color: var(--ink);
}
.r-heading, .r-foot, .z-heading, .z-foot, .j-heading, .j-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.r-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; letter-spacing: -.5px; }
.r-mark { width: 22px; height: 22px; color: var(--accent); }
.r-edition { color: var(--muted); font: 8px var(--mono); letter-spacing: 1px; }
.r-title { display: block; margin-top: 18px; font: 34px/.98 Georgia, "Times New Roman", serif; letter-spacing: -1.3px; }
.r-title em { color: var(--accent); font-weight: normal; }
.r-archive { display: block; position: relative; height: 145px; margin: 12px -3px 0; }
.r-sheet {
  position: absolute;
  display: block;
  width: 82%;
  height: 105px;
  border: 1px solid #cbd3d8;
  border-radius: 2px;
  transform-origin: 50% 90%;
  transition: transform 650ms var(--motion-arrive);
}
.r-sheet-back { left: 8px; top: 5px; transform: rotate(-8deg); background: #e8edf3; }
.r-sheet-middle { right: 5px; top: 20px; transform: rotate(5deg); background: #f3f1e9; }
.r-sheet-label { display: block; padding: 9px 12px; font: 8px var(--mono); color: #627181; letter-spacing: 1px; }
.r-sheet-front { left: 9%; top: 32px; padding: 13px 16px; background: #fffefb; box-shadow: 0 4px 8px #20272c0c; }
.r-sheet-front::before { content: ""; position: absolute; top: -1px; left: 15px; width: 22px; height: 30px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.r-reference { display: block; text-align: right; font: 8px var(--mono); color: var(--muted); letter-spacing: .8px; }
.r-note-title { display: block; margin-top: 13px; font: 19px/1.1 Georgia, serif; letter-spacing: -.5px; }
.r-note-rule { display: block; width: 85%; height: 1px; margin-top: 12px; background: var(--line); }
.r-note-rule + .r-note-rule { width: 60%; margin-top: 6px; }
.r-citation { position: absolute; right: -9px; bottom: 15px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--accent); border: 4px solid var(--panel); color: white; font: 10px var(--mono); }
.r-foot { padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 14px; }
.r-foot > span:last-child { color: var(--accent); font: 16px/14px Georgia, serif; }

.exhibit-atlas .exhibit-face.zeta-cover {
  position: relative;
  height: auto;
  min-height: 288px;
  padding: 20px 22px 17px;
  background: var(--accent);
  color: var(--panel);
  border-color: #ffffff30;
}
.zeta-cover::before { content: ""; position: absolute; inset: 0 auto 0 7px; width: 1px; background: #ffffff2b; }
.z-heading { align-items: start; }
.z-name { font-size: 31px; font-weight: 500; letter-spacing: -1.4px; line-height: 1; }
.z-edition { padding-top: 3px; color: #ffffffb8; text-align: right; font: 8px/1.7 var(--mono); letter-spacing: 1px; }
.z-schematic { display: block; position: relative; height: 178px; margin: 6px -3px 0; }
.z-blueprint { display: block; position: absolute; inset: 0; width: 100%; height: 100%; color: #ffffff65; }
.z-logo { position: absolute; width: 144px; height: 144px; left: calc(50% - 72px); top: 17px; filter: brightness(0) invert(1); transition: transform 650ms var(--motion-arrive); }
.z-node { position: absolute; font: 8px var(--mono); letter-spacing: .8px; color: #fffefbe6; }
.z-node-model { top: 18px; left: 0; }
.z-node-tools { top: 18px; right: 0; }
.z-node-loop { bottom: 18px; left: 0; }
.z-node-session { bottom: 18px; right: 0; }
.z-foot { margin-top: 10px; padding-top: 13px; border-top: 1px solid #ffffff45; font-size: 11px; color: #fffefbd9; }
.z-progress { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; }
.z-progress::before { content: ""; width: 4px; height: 4px; border: 1px solid currentColor; border-radius: 50%; }

.exhibit-jianying .exhibit-face.jianying-cover {
  position: relative;
  height: auto;
  min-height: 222px;
  padding: 16px 18px 14px;
  background: var(--ink);
  color: var(--panel);
  border-color: #ffffff20;
}
.j-heading { font: 9px var(--mono); letter-spacing: .1px; }
.j-heading > span:last-child { color: #b5becb; font-size: 8px; letter-spacing: 1px; }
.j-title { display: block; margin: 8px 0 10px; font: italic 25px/1.1 Georgia, serif; letter-spacing: -.9px; }
.j-film { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 7px 0; border-block: 1px solid #ffffff20; }
.j-frame { position: relative; display: block; height: 52px; background: #a3a7a4; overflow: hidden; }
.j-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; opacity: .9; transition: transform 650ms var(--motion-arrive), opacity 350ms ease; }
.j-frame:nth-child(2) img { object-position: 50% 56%; }
.j-frame::after { content: attr(data-frame); position: absolute; bottom: 4px; left: 4px; padding: 2px 3px; background: #20272cc9; color: white; font: 7px var(--mono); }
.j-tracks { position: relative; display: block; margin-top: 8px; padding-left: 22px; }
.j-tracks::before { content: ""; position: absolute; left: 43%; top: -72px; bottom: -2px; width: 1px; background: #b5caff; z-index: 1; transition: translate 650ms var(--motion-arrive); }
.j-tracks::after { content: ""; position: absolute; top: -76px; left: calc(43% - 3px); width: 7px; height: 5px; background: #b5caff; clip-path: polygon(0 0, 100% 0, 50% 100%); transition: translate 650ms var(--motion-arrive); }
.j-audio { display: block; width: 100%; height: 20px; color: #a8badd; background: #ffffff08; border: 1px solid #ffffff12; border-radius: 2px; }
.j-track-label { position: absolute; top: 7px; left: 0; color: #b5becb; font: 8px var(--mono); }
.j-captions { display: flex; gap: 3px; margin-top: 4px; }
.j-captions > span { display: block; flex: 1; height: 11px; background: #d6cec126; border: 1px solid #d6cec129; border-radius: 1px; }
.j-captions > span:nth-child(2) { flex: 1.5; }
.j-foot { margin-top: 8px; color: #bbc2c8; font: 8px var(--mono); letter-spacing: .25px; }
.j-foot > span:last-child { color: #c7d7fc; }

/* One small response per cover; the exhibition owns the outer lift. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-view .exhibit-memory:is(:hover, :focus-visible):not(:disabled) .r-sheet-back { transform: translate(-3px, -2px) rotate(-11deg); }
  .home-view .exhibit-memory:is(:hover, :focus-visible):not(:disabled) .r-sheet-middle { transform: translate(2px, -2px) rotate(8deg); }
  .home-view .exhibit-atlas:is(:hover, :focus-visible):not(:disabled) .z-logo { transform: scale(1.045); }
  .home-view .exhibit-jianying:is(:hover, :focus-visible):not(:disabled) .j-frame img { transform: scale(1.035); opacity: 1; }
  .home-view .exhibit-jianying:is(:hover, :focus-visible):not(:disabled) .j-tracks::before,
  .home-view .exhibit-jianying:is(:hover, :focus-visible):not(:disabled) .j-tracks::after { translate: 12px 0; }
}
@media (max-width: 950px) {
  .home-view .exhibit-memory .reminder-cover { padding-inline: 20px; }
  .home-view .exhibit-atlas .zeta-cover { padding-inline: 20px; }
  .home-view .exhibit-jianying .jianying-cover { padding-inline: 18px; }
  .home-view .r-title { font-size: 32px; }
  .home-view .j-title { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-view .exhibit .r-sheet, .home-view .exhibit .z-logo, .home-view .exhibit .j-frame img { transition: none; }
  .home-view .exhibit .j-tracks::before, .home-view .exhibit .j-tracks::after { translate: none !important; transition: none; }
  .home-view .exhibit:is(:hover, :focus-visible) .r-sheet-back { transform: rotate(-8deg); }
  .home-view .exhibit:is(:hover, :focus-visible) .r-sheet-middle { transform: rotate(5deg); }
  .home-view .exhibit:is(:hover, :focus-visible) :is(.z-logo, .j-frame img) { transform: none; }
}