/* Lightbox for blog-post photos. Progressive enhancement: lightbox.js tags eligible images with .lightbox-trigger (the cursor + hover affordance below only apply once JS has run, so no-JS readers see plain, unaltered images). The overlay markup is built by the script and appended to . */ /* Affordance on clickable images — only after JS opts them in. */ .lightbox-trigger { cursor: zoom-in; } @media (hover: hover) { .prose .lightbox-trigger, .cover .lightbox-trigger { transition: filter 0.2s ease, transform 0.2s ease; } .prose .lightbox-trigger:hover, .cover .lightbox-trigger:hover { filter: brightness(1.04); } } /* OVERLAY */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); background: rgba(20, 28, 23, 0.92); /* moss-dark, deepened */ opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s ease; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; max-width: min(1200px, 100%); max-height: 82vh; } .lightbox-img { display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; border: 1px solid rgba(170, 143, 87, 0.4); background: var(--color-sand-warm, #efe9dc); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); transform: scale(0.98); transition: transform 0.22s ease; } .lightbox.is-open .lightbox-img { transform: scale(1); } .lightbox-caption { margin-top: 16px; max-width: 70ch; text-align: center; font-family: var(--font-body, sans-serif); font-size: 13px; line-height: 1.5; color: rgba(237, 235, 228, 0.7); } .lightbox-caption:empty { display: none; } /* CONTROLS */ .lightbox-btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(237, 235, 228, 0.25); border-radius: 999px; background: rgba(20, 28, 23, 0.55); color: rgba(237, 235, 228, 0.85); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .lightbox-btn:hover, .lightbox-btn:focus-visible { border-color: var(--color-gold-antique, #aa8f57); color: var(--color-gold-antique, #aa8f57); background: rgba(20, 28, 23, 0.8); } .lightbox-btn svg { display: block; width: 20px; height: 20px; } .lightbox-close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); } .lightbox-prev { left: clamp(12px, 3vw, 28px); top: 50%; transform: translateY(-50%); } .lightbox-next { right: clamp(12px, 3vw, 28px); top: 50%; transform: translateY(-50%); } /* Single-image galleries hide the prev/next arrows. */ .lightbox[data-single='true'] .lightbox-prev, .lightbox[data-single='true'] .lightbox-next { display: none; } .lightbox-count { position: absolute; bottom: clamp(12px, 3vw, 28px); left: 50%; transform: translateX(-50%); font-family: var(--font-body, sans-serif); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: rgba(237, 235, 228, 0.55); } .lightbox[data-single='true'] .lightbox-count { display: none; } @media (prefers-reduced-motion: reduce) { .lightbox, .lightbox-img { transition: none; } .lightbox-img { transform: none; } }