.nano-archive {
  width: 100%;
  margin-inline: 0;
  padding-top: 0;
  position: relative;
  isolation: isolate;
}
.nano-archive > .nano-page-header {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: clamp(300px, 52svh, 560px);
  box-sizing: border-box;
  padding: clamp(40px, 7svh, 84px) max(20px, calc((100% - 1500px) / 2));
  margin: 0;
  border: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nano-archive > .nano-archive-works {
  position: relative;
  z-index: 1;
  min-height: 55svh;
  box-sizing: border-box;
  background: #fff;
  border-top: 1px solid var(--nano-line);
  padding: clamp(32px, 5vw, 64px) max(20px, calc((100% - 1500px) / 2));
}
@media (max-width: 900px) {
  .nano-archive > .nano-page-header,
  .nano-archive > .nano-archive-works {
    padding-inline: max(12px, calc((100% - 680px) / 2));
  }
}
@media (max-width: 800px) {
  .nano-archive .nano-card h2 { font-size: clamp(27px, 7.7vw, 38px); line-height: 1.15; text-wrap: balance; }
  .nano-archive .nano-card-link { padding: 19px 8px; }
  .nano-archive .nano-card-body { display: flex; gap: 7px; }
}
@media (prefers-reduced-motion: no-preference) {
  .nano-archive .nano-card.is-archive-pending .nano-card-body { opacity: 0; transform: translateY(64px); }
  .nano-archive .nano-card:focus-within .nano-card-body { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nano-archive > .nano-page-header { position: relative; }
}