.archive-page { min-height: 100vh; }
.archive-header { border-bottom: 1px solid var(--line); }
.archive-header .back-link { font: 500 .68rem "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.piece-back { position: fixed; top: 6.8rem; left: var(--pad); z-index: 9; padding: .75rem 1rem; border: 1px solid var(--ink); background: var(--paper); font: 500 .68rem "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .08em; transition: color .2s, background .2s; }
.piece-back:hover { color: var(--paper); background: var(--ink); }
.archive-main { padding: clamp(8rem, 12vw, 11rem) var(--pad) 8rem; }
.archive-intro { display: grid; grid-template-columns: 1fr 2fr; align-items: end; margin-bottom: clamp(4rem, 8vw, 8rem); }
.archive-intro h1 { margin: 0; font-size: clamp(4rem, 10vw, 10rem); line-height: .8; letter-spacing: -.08em; font-weight: 500; }
.archive-intro p { max-width: 26rem; margin: 2rem 0 0; color: var(--muted); }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 3vw, 3rem); }
.work-card { display: block; }
.work-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--card-color, #d8d4ca); }
.work-media img, .work-media video { width: 100%; height: 100%; display: block; object-fit: cover; }
.placeholder-art { position: absolute; inset: 0; background: var(--card-color, #d8d4ca); }
.placeholder-art::before { content: ""; position: absolute; width: 55%; aspect-ratio: 1; left: 22%; top: 16%; border: clamp(1.2rem, 3vw, 3.5rem) solid var(--ink); border-radius: var(--shape, 50%); transform: rotate(var(--angle, 20deg)); }
.card-description { position: absolute; inset: auto 0 0; margin: 0; padding: 1.2rem; color: var(--ink); background: rgba(22,23,19,.92); transform: translateY(101%); transition: transform .3s ease; }
.work-card:hover .card-description, .work-card:focus-visible .card-description { transform: none; }
.work-card h2 { display: flex; justify-content: space-between; gap: 1rem; margin: .9rem 0 0; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 500; }
.work-card h2 span { font: 500 .65rem "Manrope", sans-serif; text-transform: uppercase; color: var(--muted); }
.empty-note { grid-column: 1 / -1; padding: 5rem 0; border-top: 1px solid var(--ink); color: var(--muted); }
.piece-main { padding: clamp(11rem, 15vw, 14rem) var(--pad) 8rem; }
.piece-title { margin: 0; max-width: 11ch; font-size: clamp(4rem, 10vw, 10rem); line-height: .82; letter-spacing: -.08em; font-weight: 500; }
.piece-meta { margin: 2rem 0 5rem; font: 500 .68rem "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .09em; }
.piece-hero { width: 100%; aspect-ratio: 16/9; margin-bottom: 4rem; }
.piece-copy { display: grid; grid-template-columns: 1fr 2fr; border-top: 1px solid var(--ink); padding-top: 1.5rem; }
.piece-copy p { max-width: 48rem; margin: 0; font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.55; }
@media (max-width: 720px) {
  .archive-header .wordmark > span:last-child { display: none; }
  .archive-header nav { display: flex; gap: .8rem; font-size: .58rem; }
  .archive-header .language-toggle { right: auto; left: 50%; transform: translateX(-50%); }
  .archive-intro, .piece-copy { grid-template-columns: 1fr; gap: 2rem; }
  .work-grid { grid-template-columns: 1fr; }
  .card-description { position: static; color: var(--muted); background: transparent; transform: none; padding: .7rem 0 0; }
  .piece-hero { aspect-ratio: 4/3; }
}