* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: #fff; color: #111; font: 14px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid #111; outline-offset: 6px; }
header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 32px; padding: 20px 7.5%; background: white; }
.name, .page-title { font-size: 24px; line-height: 1; font-weight: 400; }
.page-title { margin-left: auto; }
main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 96px; row-gap: 64px; padding: 48px 48px 120px; align-items: center; }
figure { margin: 0; min-width: 0; }
.artwork { display: block; border: 0; padding: 0; background: transparent; width: 100%; cursor: zoom-in; }
.artwork img { display: block; width: 100%; height: auto; object-fit: contain; }
figcaption { margin-top: 16px; }
figcaption h2 { font-size: 14px; font-weight: 400; margin: 0; }
figcaption p { margin: 20px 0 4px; }
.post { color: #666; font-size: 12px; }
footer { padding: 48px 7.5% 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; border-top: 1px solid #eee; }
footer h2 { font-size: 18px; font-weight: 400; margin: 0; }
.copyright { color: #666; font-size: 12px; margin: 0; }
.skip { position: fixed; top: -100px; left: 16px; z-index: 10; background: white; padding: 12px; }
.skip:focus { top: 12px; }
dialog { border: 0; padding: 60px 72px 50px; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: #fff; }
dialog::backdrop { background: #fff; }
dialog figure { height: 100%; display: flex; flex-direction: column; align-items: center; }
dialog img { min-height: 0; max-height: calc(100% - 50px); max-width: 100%; object-fit: contain; }
dialog button { border: 0; background: transparent; position: absolute; padding: 14px; }
#close { right: 24px; top: 12px; }
#previous { left: 10px; top: 48%; font-size: 28px; }
#next { right: 10px; top: 48%; font-size: 28px; }
#counter { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 12px; color: #666; }
body:has(dialog[open]) { overflow: hidden; }

@media (max-width: 700px) { header { padding: 22px 6%; gap: 16px; } .name, .page-title { font-size: clamp(16px, 5vw, 20px); } main { grid-template-columns: 1fr; padding: 28px 6% 72px; gap: 64px; } footer { padding: 32px 6%; grid-template-columns: 1fr; gap: 16px; } dialog { padding: 70px 36px; } #previous { left: 0; padding: 6px; } #next { right: 0; padding: 6px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

header h1 { margin: 0; font-size: inherit; font-weight: 400; line-height: 1; }

figcaption .price { margin: 8px 0; font-size: 14px; color: #111; }

main figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; text-align: left; }
main figcaption > :not(.inquire) { grid-column: 1; }
.inquire { grid-column: 2; grid-row: 1 / span 4; align-self: end; display: inline-block; padding: 11px 15px; border: 1px solid #111; background: #111; color: #fff; font-size: 12px; white-space: nowrap; }
.inquire:hover { background: #fff; color: #111; text-decoration: none; }



@media (max-width: 1023px) { header { padding: 18px 32px; } main { grid-template-columns: 1fr; padding: 16px 16px 72px; row-gap: 48px; } }
@media (max-width: 700px) { header { padding: 18px 16px; } }