/* Production image elements (the prototype used a custom <image-slot> element). */
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph img.contain { object-fit: contain; background: #fff; padding: 8px; }
.ph .ph-label { position: absolute; inset: 0; display: grid; place-items: center; font: 12px var(--mono); color: var(--soft); letter-spacing: .04em; text-transform: lowercase; text-align: center; padding: 10px; }

/* Accessibility: visible focus for keyboard users. */
.site a:focus-visible, .site button:focus-visible, .site input:focus-visible, .site label:focus-visible { outline: 2px solid var(--greentree); outline-offset: 2px; border-radius: 4px; }

/* Screen-reader-only utility. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skip link */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 0 0 8px 0; font: 500 14px var(--sans); }
.skip:focus { left: 0; }

/* HTTP/HTTPS note is handled at the host; nothing visual needed here. */