.reconstruct-archive-page {
  --archive-bg: #080907;
  --archive-bg-soft: #0b0c0a;
  --archive-text: #e8e2d5;
  --archive-muted: #827f76;
  --archive-line: rgba(232, 226, 213, 0.12);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  background: var(--archive-bg);
  color: var(--archive-text);
}

.reconstruct-archive-page .site-header {
  border-bottom-color: var(--archive-line);
  background: rgba(8, 9, 7, 0.92);
}

.reconstruct-archive-page .brand,
.reconstruct-archive-page .primary-nav a,
.reconstruct-archive-page .menu-toggle {
  color: var(--archive-text);
}

.reconstruct-archive-page .primary-nav a {
  opacity: 0.62;
}

.reconstruct-archive-page .primary-nav a:hover,
.reconstruct-archive-page .primary-nav a:focus-visible {
  opacity: 1;
}

.reconstruct-archive-page a:focus-visible,
.reconstruct-archive-page button:focus-visible {
  outline-color: var(--archive-text);
}

.reconstruct-archive-page main {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 21%, rgba(232, 226, 213, 0.018), transparent 31%),
    radial-gradient(circle at 76% 64%, rgba(232, 226, 213, 0.012), transparent 35%),
    var(--archive-bg);
}

.reconstruct-archive-page main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.17;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232, 226, 213, 0.12) 0 0.45px, transparent 0.6px),
    radial-gradient(circle at 72% 66%, rgba(232, 226, 213, 0.08) 0 0.4px, transparent 0.55px);
  background-position: 0 0, 3px 5px;
  background-size: 7px 7px, 11px 11px;
  pointer-events: none;
}

.archive-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(300px, 0.42fr);
  align-items: end;
  gap: clamp(var(--space-4), 7vw, var(--space-6));
  width: 100%;
  max-width: var(--max);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(var(--space-5), 9vw, 128px) var(--pad) clamp(var(--space-5), 8vw, var(--space-6));
}

.archive-intro h1 {
  display: grid;
  gap: var(--space-2);
  max-width: none;
  margin: var(--space-2) 0 0;
  color: var(--archive-text);
  font-weight: 400;
}

.babel-title-block,
.babel-context {
  min-width: 0;
}

.babel-version,
.babel-question {
  margin: 0;
  color: var(--archive-muted);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(0.66rem, 0.85vw, 0.74rem);
  letter-spacing: 0.085em;
  line-height: 1.55;
}

.babel-master-title {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  letter-spacing: 0.12em;
  line-height: 1.4;
}

.babel-register-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  letter-spacing: -0.05em;
  line-height: 0.86;
}

.babel-work-title {
  color: #beb6aa;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: none;
}

.babel-context {
  padding-top: var(--space-3);
  border-top: 1px solid var(--archive-line);
}

.babel-question {
  max-width: 42ch;
  color: var(--archive-text);
}

.babel-introduction {
  max-width: 52ch;
  margin: var(--space-2) 0 0;
  color: var(--archive-muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  line-height: 1.65;
}

.babel-entry {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: 11px var(--space-2);
  border: 1px solid var(--archive-line);
  color: var(--archive-text);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.075em;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.babel-entry:hover,
.babel-entry:focus-visible {
  border-color: rgba(232, 226, 213, 0.46);
  background: rgba(232, 226, 213, 0.035);
}

.archive-project-context {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) minmax(300px, 0.68fr);
  gap: clamp(var(--space-4), 7vw, var(--space-6));
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-4) var(--pad) var(--space-6);
  border-top: 1px solid var(--archive-line);
}

.archive-project-context-heading,
.archive-project-context-copy {
  min-width: 0;
}

.archive-project-context-copy {
  max-width: 68ch;
}

.archive-project-context-copy .babel-introduction {
  max-width: none;
  font-size: clamp(0.82rem, 1vw, 0.94rem);
  line-height: 1.72;
}

.archive-project-context-link {
  display: inline-block;
  margin-top: var(--space-3);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(232, 226, 213, 0.42);
  color: var(--archive-text);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.075em;
}

.archive-project-context-link:hover,
.archive-project-context-link:focus-visible {
  border-bottom-color: var(--archive-text);
}

.archive-research-note {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) minmax(0, 0.68fr);
  gap: clamp(var(--space-3), 7vw, var(--space-5));
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-5) var(--pad);
  border-top: 1px solid var(--archive-line);
}

.archive-research-note-label {
  margin: 0;
  color: var(--archive-muted);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  line-height: 1.55;
  text-transform: uppercase;
}

.archive-research-note-copy {
  max-width: 66ch;
}

.archive-research-note-copy h2 {
  margin: 0 0 var(--space-2);
  color: var(--archive-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 3vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.archive-research-note-copy p {
  max-width: 58ch;
  margin: 0;
  color: var(--archive-muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.82rem, 1vw, 0.94rem);
  line-height: 1.72;
}

.archive-research-note-copy a {
  display: inline-block;
  margin-top: var(--space-3);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(232, 226, 213, 0.42);
  color: var(--archive-text);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.archive-research-note-copy a:hover,
.archive-research-note-copy a:focus-visible {
  border-bottom-color: var(--archive-text);
}

.archive-installation {
  scroll-margin-top: 76px;
  min-height: clamp(420px, 54vh, 620px);
  border: 0;
  padding: 0 var(--pad) var(--space-6);
  background: transparent;
}

.archive-index {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  color: var(--archive-muted);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.record-index-heading,
.record-index-list {
  width: 100%;
  max-width: var(--max);
  margin-right: auto;
  margin-left: auto;
}

.record-index-heading {
  display: grid;
  grid-template-columns: minmax(70px, 0.18fr) minmax(0, 0.42fr) minmax(260px, 0.4fr);
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--archive-line);
}

.record-index-heading .archive-index,
.record-index-heading h2,
.record-index-heading > p:last-child {
  margin: 0;
}

.record-index-heading h2 {
  color: var(--archive-text);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(0.78rem, 1.05vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.12em;
}

.record-index-heading > p:last-child {
  color: var(--archive-muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  line-height: 1.55;
}

.record-index-list {
  display: grid;
  border-bottom: 1px solid var(--archive-line);
}

.record-index-entry {
  border-top: 1px solid var(--archive-line);
}

.record-index-entry:first-child {
  border-top: 0;
}

.record-index-link {
  display: grid;
  grid-template-columns: minmax(70px, 0.18fr) minmax(28px, 0.08fr) minmax(0, 0.44fr) minmax(150px, 0.3fr);
  align-items: center;
  min-height: 78px;
  padding: var(--space-2) 0;
  color: var(--archive-text);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(0.7rem, 0.95vw, 0.82rem);
  letter-spacing: 0.09em;
  transition: background-color 180ms ease, padding 180ms ease;
}

.record-index-link:hover,
.record-index-link:focus-visible {
  padding-right: var(--space-2);
  padding-left: var(--space-2);
  background: rgba(232, 226, 213, 0.035);
  outline: 1px solid rgba(232, 226, 213, 0.28);
  outline-offset: -1px;
}

.record-index-divider,
.record-index-status {
  color: var(--archive-muted);
}

.record-index-status {
  justify-self: end;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-align: right;
}

.pendant-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(52px, 6vw, 84px) clamp(var(--space-3), 4vw, var(--space-5));
  width: 100%;
  max-width: var(--max);
  min-height: 560px;
  margin: 0 auto;
  padding: 0;
}

.pendant-wall.is-single {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.portrait-pendant {
  --line-length: 128px;
  --resting-rotation: 0deg;
  --vertical-offset: 0px;
  display: flex;
  align-self: start;
  justify-content: center;
  min-width: 0;
  padding-top: var(--vertical-offset);
  color: inherit;
  opacity: 0;
  animation: pendant-arrive 720ms cubic-bezier(0.2, 0.65, 0.28, 1) 120ms forwards;
}

.pendant-wall:not(.is-single) .portrait-pendant {
  left: var(--index-horizontal-offset, 0);
  grid-column: span 2 !important;
  position: relative;
}

.pendant-wall:not(.is-single) .portrait-pendant[data-portrait-id="000"] {
  --line-length: 114px !important;
  --resting-rotation: -0.65deg !important;
  --vertical-offset: 0px !important;
  --index-horizontal-offset: -4%;
}

.pendant-wall:not(.is-single) .portrait-pendant[data-portrait-id="001"] {
  --line-length: 132px !important;
  --resting-rotation: 0.55deg !important;
  --vertical-offset: 12px !important;
  --index-horizontal-offset: -2%;
}

.pendant-wall:not(.is-single) .portrait-pendant[data-portrait-id="002"] {
  --line-length: 124px !important;
  --resting-rotation: -0.45deg !important;
  --vertical-offset: 6px !important;
  --index-horizontal-offset: 8%;
}

.pendant-wall:not(.is-single) .portrait-pendant[data-portrait-id="003"] {
  --line-length: 108px !important;
  --resting-rotation: 0.7deg !important;
  --vertical-offset: 18px !important;
  --index-horizontal-offset: 6%;
}

.pendant-wall:not(.is-single) .portrait-pendant[data-portrait-id="004"] {
  --line-length: 118px !important;
  --resting-rotation: 0.35deg !important;
  --vertical-offset: 14px !important;
  --index-horizontal-offset: -1%;
}

.pendant-wall:not(.is-single) .portrait-pendant[data-portrait-id="005"] {
  --line-length: 138px !important;
  --resting-rotation: -0.6deg !important;
  --vertical-offset: 2px !important;
  --index-horizontal-offset: -3%;
}

.pendant-wall:not(.is-single) .portrait-pendant[data-portrait-id="006"] {
  --line-length: 112px !important;
  --resting-rotation: -0.7deg !important;
  --vertical-offset: 16px !important;
  --index-horizontal-offset: 7%;
}

.pendant-wall:not(.is-single) .portrait-pendant[data-portrait-id="008"] {
  --line-length: 128px !important;
  --resting-rotation: 0.45deg !important;
  --vertical-offset: 8px !important;
  --index-horizontal-offset: 5%;
}

.pendant-wall.is-single .portrait-pendant {
  left: clamp(12px, 2.5vw, 38px);
  grid-column: 5 / span 4 !important;
  position: relative;
}

@keyframes pendant-arrive {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pendant-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 210px;
  min-height: 100%;
  color: inherit;
  transform: rotate(var(--resting-rotation));
  transform-origin: 50% 0;
  transition: transform 620ms cubic-bezier(0.2, 0.65, 0.2, 1);
}

.pendant-wall.is-single .pendant-link {
  max-width: clamp(286px, 26vw, 326px);
}

.pendant-wall.is-single .pendant-line {
  height: min(var(--line-length), 40px);
}

.pendant-suspension {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.pendant-line {
  display: block;
  width: 1px;
  height: var(--line-length);
  background: rgba(232, 226, 213, 0.34);
}

.pendant-ring {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -1px;
  border: 1px solid rgba(232, 226, 213, 0.42);
  border-radius: 50%;
  background: var(--archive-bg);
}

.pendant-object {
  position: relative;
  width: 100%;
  margin-top: -1px;
  border: 0;
  padding: 0;
  background: transparent;
  transition: transform 260ms ease-out;
}

.pendant-object::before {
  display: none;
}

.pendant-image {
  width: 100%;
  height: auto;
  padding: 0;
  object-fit: contain;
  background: transparent;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28),
    0 3px 9px rgba(0, 0, 0, 0.2);
}

.pendant-label {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  color: var(--archive-text);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  line-height: 1.45;
  text-align: center;
}

.pendant-record-label,
.pendant-record-type {
  display: block;
}

.pendant-record-type {
  margin-top: 4px;
  color: var(--archive-muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.pendant-status {
  display: block;
  margin-top: 4px;
  color: var(--archive-muted);
  font-size: 0.62rem;
  font-weight: 400;
  opacity: 0;
  text-align: center;
  transition: opacity 280ms ease;
}

.pendant-caption {
  display: none;
}

.pendant-link:focus-visible {
  outline: 0;
}

.pendant-link:focus-visible .pendant-image {
  outline: 1px solid var(--archive-text);
  outline-offset: var(--space-1);
}

.pendant-link:focus-visible .pendant-status {
  opacity: 0.55;
}

.pendant-link:active .pendant-object {
  transform: scale(1.04);
}

.archive-loading,
.archive-error,
.archive-noscript {
  grid-column: 1 / -1;
  margin: var(--space-5) 0 0;
  color: var(--archive-muted);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.reconstruct-archive-page .site-footer {
  border-top-color: var(--archive-line);
  background: var(--archive-bg);
  color: var(--archive-muted);
}

@media (hover: hover) and (pointer: fine) {
  .pendant-link:hover {
    transform: rotate(0deg);
  }

  .pendant-link:hover .pendant-status {
    opacity: 0.55;
  }
}

@media (max-width: 1180px) {
  .pendant-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .portrait-pendant {
    grid-column: auto !important;
  }

  .pendant-wall.is-single {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .pendant-wall.is-single .portrait-pendant {
    grid-column: 4 / span 4 !important;
  }
}

@media (max-width: 820px) {
  .archive-intro {
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: var(--space-5);
  }

  .babel-context {
    max-width: 620px;
  }

  .archive-project-context {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .archive-research-note {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .archive-installation {
    min-height: 480px;
  }

  .record-index-heading {
    grid-template-columns: minmax(64px, 0.2fr) minmax(0, 0.8fr);
  }

  .record-index-heading > p:last-child {
    grid-column: 2;
  }

  .pendant-wall,
  .pendant-wall.is-single {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pendant-wall:not(.is-single) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pendant-wall.is-single .portrait-pendant {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 700px) {
  .reconstruct-archive-page .primary-nav {
    background: rgba(8, 9, 7, 0.98);
  }

  .archive-intro {
    gap: var(--mobile-space-5);
    padding-top: var(--space-4);
    padding-bottom: var(--space-3);
  }

  .archive-intro h1 {
    white-space: normal;
  }

  .babel-register-title {
    font-size: clamp(3rem, 15vw, 5rem);
  }

  .babel-version,
  .babel-master-title,
  .babel-question,
  .record-index-heading h2,
  .archive-index {
    font-size: var(--mobile-label-size);
  }

  .babel-introduction {
    max-width: 38rem;
    font-size: var(--mobile-body-size);
    line-height: var(--mobile-body-leading);
  }

  .record-index-heading > p:last-child {
    font-size: var(--mobile-label-size);
    line-height: 1.6;
  }

  html[lang="zh-CN"] .babel-register-title {
    line-height: 1.05;
  }

  html[lang="zh-CN"] .babel-introduction {
    line-height: 1.78;
  }

  .archive-project-context {
    padding-top: var(--space-3);
    padding-bottom: var(--space-5);
  }

  .archive-installation {
    padding-right: var(--space-3);
    padding-bottom: calc(var(--space-5) + var(--safe-area-bottom));
    padding-left: var(--space-3);
  }

  .archive-index {
    margin-bottom: var(--space-2);
  }

  .record-index-heading {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .record-index-heading > p:last-child {
    grid-column: auto;
    max-width: 34ch;
  }

  .record-index-link {
    grid-template-columns: 48px 24px minmax(0, 1fr);
    min-height: 72px;
  }

  .record-index-status {
    grid-column: 3;
    justify-self: start;
    margin-top: 5px;
    text-align: left;
  }

  .pendant-wall {
    gap: var(--space-5) var(--space-3);
    min-height: 520px;
  }

  .portrait-pendant,
  .pendant-wall.is-single .portrait-pendant {
    left: 0;
    padding-top: 0;
  }

  .pendant-wall:not(.is-single) .portrait-pendant {
    left: 0;
  }

  .pendant-link,
  .pendant-wall.is-single .pendant-link {
    max-width: min(76vw, 286px);
    transform: none;
    transition: none;
  }

  .pendant-line {
    height: min(var(--line-length), 80px);
  }

  .pendant-status {
    display: none;
  }

  .portrait-pendant.is-preview .pendant-status {
    display: block;
    opacity: 0.6;
  }
}

@media (max-width: 470px) {
  .pendant-wall,
  .pendant-wall.is-single {
    grid-template-columns: minmax(0, 1fr);
  }

  .pendant-wall:not(.is-single) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
    min-height: 0;
  }

  .pendant-wall:not(.is-single) .portrait-pendant {
    grid-column: 1 / -1 !important;
    justify-content: stretch;
    width: 100%;
  }

  .pendant-wall:not(.is-single) .pendant-link {
    display: grid;
    grid-template-columns: clamp(136px, 44vw, 176px) minmax(0, 1fr);
    grid-template-areas:
      "hanger metadata"
      "artwork metadata";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-2);
    align-items: start;
    width: 100%;
    max-width: none;
  }

  .pendant-wall:not(.is-single) .pendant-suspension {
    grid-area: hanger;
  }

  .pendant-wall:not(.is-single) .pendant-object {
    grid-area: artwork;
  }

  .pendant-wall:not(.is-single) .pendant-line {
    height: min(var(--line-length), 40px);
  }

  .pendant-wall:not(.is-single) .pendant-label {
    grid-area: metadata;
    align-self: start;
    margin-top: 58px;
    font-size: var(--mobile-label-size);
    line-height: 1.45;
    text-align: left;
  }

  .pendant-wall:not(.is-single) .pendant-record-type {
    margin-top: var(--space-1);
    font-size: 0.6875rem;
    line-height: 1.55;
  }
}

/* Scoped deterrence for participant artwork only; navigation remains selectable. */
[data-protected-media] {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {
  .babel-entry {
    transition: none;
  }

  .record-index-link {
    transition: none;
  }

  .portrait-pendant {
    opacity: 1;
    animation: none;
  }

  .pendant-link,
  .pendant-object,
  .pendant-status {
    transition: none;
  }

  .pendant-link:hover,
  .pendant-link:focus-visible {
    transform: rotate(var(--resting-rotation));
  }

  .pendant-link:active .pendant-object {
    transform: none;
  }
}