/* Gallery Wall — framed artworks of mixed proportions + museum labels (Dotline) */
.epg-gallery {
    --gw-wall: #f5f3ef;
    --gw-dot: rgba(17, 17, 17, .11);
    --gw-frame: #111111;
    --gw-mat: #ffffff;
    --gw-label: #ffffff;
    --gw-mat-w: 12px;
    --gw-gap: 42px;
    background:
        radial-gradient(circle, var(--gw-dot) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
        var(--gw-wall);
}
.epg-gallery__wall { display: flex; flex-direction: column; gap: 54px; }
.epg-gallery__row { display: flex; align-items: flex-start; gap: var(--gw-gap); }
/* flex-basis = the mat + frame so the artworks share one height in each row */
.epg-gallery__piece { position: relative; flex: var(--r) 1 calc(var(--gw-mat-w) * 2 + 6px); min-width: 0; }

/* Frame: thin black moulding, white mat, soft hanging shadow */
.epg-gallery__frame {
    position: relative; display: block; padding: var(--gw-mat-w);
    border: 3px solid var(--gw-frame); background: var(--gw-mat);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .04), 0 26px 34px -24px rgba(17, 17, 17, .45);
    transition: transform .35s ease, box-shadow .35s ease;
}
.epg-gallery__frame::before {
    /* picture-light glow above the work */
    content: ''; position: absolute; left: 50%; top: -26px; width: 46%; height: 26px; transform: translateX(-50%);
    background: radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
    opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.epg-gallery__art { display: block; aspect-ratio: var(--r); overflow: hidden; border-radius: 0; background: var(--bg-section-alt); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.epg-gallery__art img, .epg-gallery__art .epj-ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.epg-gallery__piece:hover .epg-gallery__frame { transform: translateY(-4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .04), 0 36px 44px -26px rgba(17, 17, 17, .55); }
.epg-gallery__piece:hover .epg-gallery__frame::before { opacity: 1; }
.epg-gallery__piece:hover .epg-gallery__art img { transform: scale(1.035); }

/* Museum wall label */
.epg-gallery__label {
    position: relative; max-width: 360px; margin-top: 22px; padding: 14px 16px 15px;
    background: var(--gw-label); border: 1px solid color-mix(in srgb, var(--text-main) 12%, transparent);
    box-shadow: 0 10px 22px -18px rgba(17, 17, 17, .35);
}
.epg-gallery__label-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.epg-gallery__cat {
    display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden;
    color: var(--accent-text, var(--accent)) !important; font-size: 10.5px; font-weight: 700; letter-spacing: 2.4px; line-height: 1.2; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis;
}
.epg-gallery__cat::before {
    /* 3 × 3 dot-matrix mark with a lit centre */
    content: ''; flex-shrink: 0; width: 11px; height: 11px;
    background:
        radial-gradient(circle, var(--accent) 1.5px, transparent 1.9px) 50% 50% / 11px 11px no-repeat,
        radial-gradient(circle, color-mix(in srgb, var(--text-main) 70%, transparent) 1.2px, transparent 1.6px) 0 0 / 4px 4px;
    background-position: 50% 50%, -.5px -.5px;
}
.epg-gallery__no { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; color: color-mix(in srgb, var(--text-main) 66%, transparent); font-size: 11px; font-weight: 600; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.epg-gallery__no::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.epg-gallery__title { margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.16rem; font-weight: 600; line-height: 1.3; letter-spacing: -.1px; }
.epg-gallery__title a { color: var(--text-main); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1.5px no-repeat; transition: background-size .35s ease, color .2s; }
.epg-gallery__piece:hover .epg-gallery__title a { background-size: 100% 1.5px; }
.epg-gallery__excerpt { margin: 0 0 10px; color: color-mix(in srgb, var(--text-main) 66%, transparent); font-size: 13.5px; font-style: italic; line-height: 1.55; }
.epg-gallery .epj-meta { padding-top: 9px; border-top: 1px dotted color-mix(in srgb, var(--text-main) 22%, transparent); font-size: 11.5px; letter-spacing: .3px; }

/* Wider single-piece rows get a side label instead */
.epg-gallery__row.is-1 .epg-gallery__piece { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(220px, 1fr); gap: 36px; align-items: end; }
.epg-gallery__row.is-1 .epg-gallery__label { margin: 0 0 8px; }
.epg-gallery__row.is-1 .epg-gallery__title { font-size: 1.5rem; }

/* Dark gallery room */
[data-theme="dark"] .epg-gallery {
    --gw-wall: #111113;
    --gw-dot: rgba(255, 255, 255, .07);
    --gw-frame: #000000;
    --gw-mat: #e9e5de;
    --gw-label: #1a1a1d;
}
[data-theme="dark"] .epg-gallery__frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 40px -24px rgba(0, 0, 0, .9); }
[data-theme="dark"] .epg-gallery__label { border-color: rgba(255, 255, 255, .08); box-shadow: none; }

@media (max-width: 1100px) { .epg-gallery { --gw-gap: 28px; --gw-mat-w: 10px; } }
@media (max-width: 860px) {
    .epg-gallery__wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; align-items: start; }
    .epg-gallery__row { display: contents; }
    .epg-gallery__row.is-1 .epg-gallery__piece { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 0; }
    .epg-gallery__row.is-1 .epg-gallery__label { margin-top: 18px; }
    .epg-gallery__label { max-width: none; margin-top: 16px; }
}
@media (max-width: 560px) {
    .epg-gallery { --gw-mat-w: 9px; }
    .epg-gallery__wall { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .epg-gallery__art { aspect-ratio: clamp(.9, var(--r), 1.5); }
    .epg-gallery__row.is-1 .epg-gallery__title { font-size: 1.25rem; }
}