/* Gallery works: a light exhibition wall and museum labels. */
.painting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 40px; }
.painting-card { min-width: 0; margin: 0; }
.painting-open {
    position: relative; display: grid; place-items: center; width: 100%; cursor: pointer; aspect-ratio: 5 / 4; padding: clamp(24px, 3vw, 42px);
    background: linear-gradient(135deg, #faf7ef, #f0eadf);
    border: 1px solid rgba(126, 112, 86, .14);
    transition: border-color 250ms, box-shadow 250ms;
}
.painting-open img {
    display: block; width: 100%; height: 100%; max-height: none; min-width: 0; min-height: 0;
    object-fit: contain; filter: drop-shadow(0 8px 12px rgba(30, 43, 33, .18));
    transition: transform 450ms var(--ease);
}
.painting-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.painting-open:hover { border-color: rgba(164, 71, 49, .3); box-shadow: 0 12px 32px rgba(72, 63, 45, .035); }
.painting-open:hover img { transform: translateY(-3px); }
.painting-open-hint {
    position: absolute; bottom: 13px; right: 13px; display: grid; place-items: center;
    width: 34px; height: 34px; color: var(--ink); border: 1px solid var(--line);
    border-radius: 50%; background: var(--paper); opacity: 0;
    transform: translateY(4px); transition: opacity 220ms, transform 220ms;
}
.painting-open:is(:hover, :focus-visible) .painting-open-hint { opacity: 1; transform: none; }
.art-icon { display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; }
.art-icon svg { width: 100%; height: 100%; }
.painting-caption { padding: 20px 2px 0; }
.painting-caption::before { content: ''; display: block; width: 25px; height: 1px; background: var(--accent); opacity: .7; margin-bottom: 13px; }
.painting-caption-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.painting-caption h3 { margin: 0; font: 400 clamp(25px, 2.1vw, 31px) / 1.15 var(--serif); letter-spacing: -.45px; }
.painting-year { flex-shrink: 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.painting-specs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 11px; }
.painting-specs p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.painting-technique + .painting-size::before { content: '·'; margin-right: 12px; opacity: .6; }
.painting-status { display: inline-block; margin: 12px 0 0; font-size: 11px; color: var(--accent); padding-bottom: 2px; border-bottom: 1px solid rgba(164, 71, 49, .25); }

/* Full-screen painting viewer. Its child rules do not depend on interview styles. */
.painting-dialog[open] {
    inset: 0; margin: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none;
    padding: 22px clamp(22px, 4vw, 64px) 28px; display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto; gap: 22px;
    overflow: hidden; background: #172b24; color: var(--paper);
}
.painting-dialog::backdrop { background: #172b24; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.viewer-author { margin: 0; font: 400 15px / 1.5 var(--serif); color: #d4d3c2; }
.viewer-controls { display: flex; align-items: center; gap: 12px; }
.painting-dialog .dialog-close, .viewer-zoom {
    position: static; display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
    border: 1px solid rgba(243, 237, 223, .22); border-radius: 50%; color: var(--paper);
    background: transparent; cursor: pointer;
}
.painting-dialog .dialog-close { top: 12px; right: 12px; z-index: 1; font: 26px / 1 var(--sans); }
.painting-dialog .dialog-close:hover, .viewer-zoom:hover, .painting-dialog .dialog-step:not(:disabled):hover { background: rgba(243, 237, 223, .09); border-color: rgba(243, 237, 223, .5); }
.painting-dialog button:focus-visible { outline: 2px solid #dbc099; outline-offset: 4px; }
.viewer-zoom[aria-pressed="true"] { background: rgba(243, 237, 223, .14); }
.painting-dialog .dialog-stage { display: block; place-items: normal; min-width: 0; min-height: 0; height: auto; padding: 0; overflow: hidden; }
.painting-surface { display: grid; place-items: center; width: 100%; height: 100%; }
.painting-dialog .dialog-stage img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.painting-dialog .dialog-stage.is-zoomed { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #738176 #172b24; }
.is-zoomed .painting-surface { width: 200%; height: 200%; }
.painting-dialog .is-zoomed img { cursor: grab; }
.painting-dialog .is-zoomed img:active { cursor: grabbing; }
.painting-dialog .dialog-footer {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    gap: 26px; width: 100%; padding-top: 23px; min-width: 0;
    border-top: 1px solid rgba(243, 237, 223, .2); background: transparent;
}
.painting-dialog .dialog-caption { min-width: 0; overflow-wrap: anywhere; }
.painting-dialog .dialog-caption h2 { margin: 0; font: 400 clamp(27px, 3vw, 38px) / 1.1 var(--serif); color: var(--paper); letter-spacing: -.55px; }
.painting-dialog .dialog-medium { margin: 11px 0 0; color: #b8c0b2; font-size: 12px; line-height: 1.7; }
.painting-dialog .dialog-navigation { display: flex; align-items: center; gap: 17px; flex-shrink: 0; }
.painting-dialog .dialog-step { width: 44px; height: 44px; border: 1px solid rgba(243, 237, 223, .25); border-radius: 50%; color: var(--paper); background: transparent; font: 22px var(--serif); cursor: pointer; }
.painting-dialog .dialog-step:disabled { opacity: .3; cursor: default; }
.painting-dialog .dialog-counter { text-align: center; color: #c2c8bb; min-width: 52px; font-size: 11px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.painting-dialog .dialog-more { min-height: 0; max-height: min(140px, 18dvh); margin: 0; padding: 0; overflow-y: auto; color: #c2c8bb; font-size: 12px; line-height: 1.7; }
.painting-dialog .dialog-more p { margin: 0 0 8px; }
.painting-dialog .dialog-more a { color: #dbc099; }
.painting-dialog .dialog-more summary { cursor: pointer; color: #dbc099; }
.painting-dialog .dialog-more[hidden] { display: none; }

@media (max-width: 1100px) {
    .painting-grid { gap: 42px 28px; }
    .painting-open { padding: 28px; }
}
@media (max-width: 700px) {
    .painting-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .painting-open { aspect-ratio: auto; padding: 22px; }
    .painting-open img { height: auto; max-height: 470px; }
    .painting-open-hint { width: 30px; height: 30px; bottom: 9px; right: 9px; opacity: .8; transform: none; }
    .painting-open-hint .art-icon { width: 16px; height: 16px; }
    .painting-caption { padding-top: 18px; }
    .painting-caption h3 { font-size: 27px; }
    .painting-specs { margin-top: 9px; gap: 3px 10px; }
    .painting-dialog[open] { padding: 14px 18px max(22px, env(safe-area-inset-bottom)); gap: 17px; }
    .viewer-toolbar { gap: 14px; }
    .viewer-author { font-size: 14px; }
    .viewer-controls { gap: 9px; }
    .painting-dialog .dialog-footer { flex-direction: column; align-items: stretch; gap: 18px; padding-top: 20px; }
    .painting-dialog .dialog-caption h2 { font-size: 30px; }
    .painting-dialog .dialog-medium { margin-top: 9px; font-size: 12px; }
    .painting-dialog .dialog-navigation { justify-content: space-between; gap: 15px; }
    .painting-dialog .dialog-more { max-height: 13dvh; }
}
@media (max-height: 500px) and (min-width: 701px) {
    .painting-dialog[open] { padding: 12px 24px 16px; gap: 12px; }
    .painting-dialog .dialog-footer { padding-top: 12px; }
    .painting-dialog .dialog-caption h2 { font-size: 25px; }
    .painting-dialog .dialog-medium { margin-top: 6px; }
    .painting-dialog .dialog-more { max-height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
    .painting-open, .painting-open img, .painting-open-hint { transition: none; }
    .painting-open:hover img { transform: none; }
}