:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #0e0e10; color: #f5f5f7; font-family: Poppins, sans-serif; }
a { color: inherit; }
:focus-visible { outline: 2px solid #c9a784; outline-offset: 4px; }
::selection { background: #a67c52; color: #0e0e10; }
.artwork-page { min-height: 100dvh; display: flex; flex-direction: column; }
.artwork-page-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.3rem clamp(1.25rem, 4vw, 4rem); border-bottom: 1px solid rgba(255,255,255,.12); color: #b9b4af; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; }
.artwork-home { color: #e9e4dd; text-decoration: none; font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; letter-spacing: .07em; }
.artwork-document { flex: 1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .65fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: clamp(1.5rem, 4vw, 4rem); }
.artwork-document figure { margin: 0; min-width: 0; display: grid; place-items: center; }
.artwork-document img { display: block; max-width: 100%; max-height: min(76dvh, 58rem); width: auto; height: auto; object-fit: contain; }
.artwork-document figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.artwork-document-info { max-width: 32rem; }
.artwork-series { color: #c9a784; margin: 0 0 1.3rem; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; }
.artwork-document h1 { margin: 0; font: 400 clamp(2.6rem, 4.6vw, 5.6rem)/.98 'EB Garamond', serif; text-wrap: balance; }
.artwork-metadata { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 1.5rem 0 2.5rem; color: #bab6b2; font-size: .86rem; }
.artwork-review { max-height: 12rem; overflow: auto; margin: -1rem 0 2rem; color: #d0cac3; font: 400 1rem/1.6 'EB Garamond', serif; white-space: pre-line; }
.artwork-enter { display: inline-flex; align-items: center; min-height: 44px; padding: .75rem 1.35rem; border: 1px solid #a67c52; text-decoration: none; color: #f5f5f7; font-size: .82rem; transition: background .2s ease, color .2s ease; }
.artwork-enter:hover { background: #a67c52; color: #0e0e10; }
.artwork-source { display: inline-block; margin: 0.8rem 0 0 1.1rem; color: #c9a784; font-size: .8rem; text-underline-offset: .2em; }
@media (max-width: 750px) { .artwork-page-header { align-items: center; } .artwork-document { grid-template-columns: 1fr; align-content: start; gap: 2rem; } .artwork-document img { max-height: 58dvh; } .artwork-document-info { max-width: 42rem; } }
@media (prefers-reduced-motion: reduce) { .artwork-enter { transition: none; } }