:root { --wf-sand: #efe9dc; --wf-accent: #bc6b3e; }
.wildframe-gallery { margin: 3rem auto; max-width: 1240px; padding: 0 12px; }
.wildframe-gallery__header { margin: 0 0 1.5rem; text-align: center; }
.wildframe-gallery__header p { color: var(--wf-accent); font: 700 .72rem/1 sans-serif; letter-spacing: .17em; margin: 0 0 .6rem; text-transform: uppercase; }
.wildframe-gallery__header h2 { font: 500 clamp(2rem, 5vw, 3.9rem)/1.04 Georgia, serif; margin: 0; }
.wildframe-gallery__grid { display: grid; gap: 14px; grid-auto-flow: dense; grid-auto-rows: 8px; grid-template-columns: repeat(var(--wildframe-columns), minmax(0, 1fr)); }
.wildframe-card { align-items: flex-start !important; align-self: start; appearance: none; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: zoom-in; display: block !important; justify-content: flex-start !important; overflow: hidden; padding: 0 !important; position: relative; width: 100%; }
.wildframe-card img { display: block !important; height: auto !important; max-width: none !important; object-fit: contain; position: static !important; transition: transform .6s ease; width: 100% !important; }
.wildframe-card:hover img, .wildframe-card:focus-visible img { transform: scale(1.07); }
.wildframe-card__zoom { align-items: center; background: rgba(255,255,255,.92); border-radius: 50%; bottom: 14px; color: #14231d; display: flex; height: 38px; justify-content: center; opacity: 0; position: absolute; right: 14px; transition: opacity .2s; width: 38px; }
.wildframe-card__zoom svg { fill: none; height: 24px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; width: 24px; }
.wildframe-card:hover .wildframe-card__zoom, .wildframe-card:focus-visible .wildframe-card__zoom { opacity: 1; }
.wildframe-lightbox { align-items: center; background: rgba(10,16,13,.94); box-sizing: border-box; display: flex; inset: 0; justify-content: center; opacity: 0; padding: 3rem 5rem; pointer-events: none; position: fixed; transition: opacity .25s; z-index: 99999; }
.wildframe-lightbox.is-open { opacity: 1; pointer-events: auto; }
.wildframe-lightbox figure { color: #fff; margin: 0; max-height: 100%; max-width: 100%; text-align: center; }
.wildframe-lightbox img { display: block; max-height: calc(100vh - 7rem); max-width: 100%; object-fit: contain; }
.wildframe-lightbox figcaption { font: 400 .95rem/1.4 sans-serif; padding-top: .8rem; }
.wildframe-lightbox button { background: transparent; border: 0; color: #fff; cursor: pointer; font: 3rem/1 sans-serif; padding: .35rem; position: absolute; }
.wildframe-lightbox__close { right: 1.25rem; top: 1rem; }.wildframe-lightbox__previous { left: 1.25rem; }.wildframe-lightbox__next { right: 1.25rem; }
.wildframe-notice { background: var(--wf-sand); padding: 1rem; }
@media (max-width: 700px) { .wildframe-gallery { padding: 0 8px; } .wildframe-gallery__grid { gap: 12px; grid-auto-rows: 8px; grid-template-columns: 1fr; } .wildframe-lightbox { padding: 2rem 3.2rem; } .wildframe-lightbox button { font-size: 2.4rem; } .wildframe-lightbox__previous { left: .25rem; }.wildframe-lightbox__next { right: .25rem; } }