:root { --paper:#f3f0e9; --ink:#171715; --quiet-ink:#5e5b54; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:var(--paper); color:var(--ink); }
body { font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
.art-drop { min-height:100svh; padding:clamp(12px,3vw,32px); display:grid; place-items:center; }
.artwork { width:min(100%,1080px); margin:0; }
.image-stage { width:100%; height:calc(100svh - clamp(112px,18vh,154px)); min-height:320px; display:grid; place-items:center; }
.image-stage img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
figcaption { width:min(100%,760px); margin:clamp(13px,2.2vh,22px) auto 0; text-align:center; }
h1,p { margin:0; }
h1 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.18rem,4.8vw,1.75rem); font-weight:400; line-height:1.16; letter-spacing:-.018em; }
p { margin-top:7px; color:var(--quiet-ink); font-size:clamp(.78rem,3.2vw,.93rem); line-height:1.35; letter-spacing:.018em; }
p span { padding-inline:.23em; }
@media (max-height:560px) and (orientation:landscape) { .art-drop{padding-block:10px}.image-stage{height:calc(100svh - 88px);min-height:0}figcaption{margin-top:8px}p{margin-top:3px} }
@media (prefers-color-scheme:dark) { :root{--paper:#141412;--ink:#f3f0e9;--quiet-ink:#aaa69d} }