Add lightbox functionality for article images with zoom effect

css/style.css

@@ -1184,6 +1184,49 @@ footer.footer-modern a:hover {
 	margin-right: 0.4rem;
 }
 
+/* ========================================
+   LIGHTBOX
+   ======================================== */
+.lightbox-overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 2000;
+	background: rgba(0, 0, 0, 0.88);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: zoom-out;
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
+}
+
+.lightbox-overlay.is-open {
+	opacity: 1;
+	visibility: visible;
+	transition: opacity 0.2s ease, visibility 0s linear 0s;
+}
+
+.lightbox-overlay img {
+	max-width: 90vw;
+	max-height: 90vh;
+	object-fit: contain;
+	border-radius: var(--radius-sm);
+	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+	transform: scale(0.94);
+	transition: transform 0.2s ease;
+	cursor: zoom-out;
+}
+
+.lightbox-overlay.is-open img {
+	transform: scale(1);
+}
+
+/* Hint that content images are clickable */
+.content img {
+	cursor: zoom-in;
+}
+
 /* ========================================
    TABLE OF CONTENTS (left sidebar, article view)
    ======================================== */