instead of

. Apply the same paragraph spacing to direct-child divs, excluding the known layout containers (gallery, SMS grid, missing-data). */ .post-body > div:not([data-gallery="true"]):not([data-sms-day="true"]):not([data-sms-entry="true"]):not([data-missing]) { margin-bottom: 0.9rem; } .post-body > div:not([data-gallery="true"]):not([data-sms-day="true"]):not([data-sms-entry="true"]):not([data-missing]):last-child { margin-bottom: 0; } .post-body a { color: var(--blog-accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .post-body a:hover { color: var(--blog-accent-hover); border-bottom-color: currentColor; } /* ---- IMAGES: single ---- */ .post-body img { display: block; max-width: min(100%, var(--blog-img-max-width)); max-height: var(--blog-img-max-height); width: auto; height: auto; margin: 1.25rem auto; border-radius: var(--blog-radius); cursor: zoom-in; box-shadow: var(--blog-img-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .post-body img:hover { transform: translateY(-2px); box-shadow: var(--blog-img-shadow-hover); } /* Image captions (replaces migrated

pattern) */ .post-caption { text-align: center; font-size: 0.85rem; font-style: italic; color: var(--blog-text-muted); margin: -0.75rem auto 1.25rem; max-width: var(--blog-img-max-width); } /* ---- IMAGES: gallery (auto-grouped consecutive images) ---- Flex with justify-content: center so incomplete last rows centre naturally (e.g. 2 items in a 3-column layout). */ .post-body div[data-gallery="true"] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.25rem 0; } .post-body div[data-gallery="true"] img { flex: 0 1 calc(33.333% - 0.34rem); max-width: calc(33.333% - 0.34rem); width: 100%; height: var(--blog-gallery-height); max-height: var(--blog-gallery-height); margin: 0; object-fit: cover; border-radius: var(--blog-radius-sm); box-shadow: var(--blog-gallery-shadow); } /* When is wrapped in a for WebP, the element becomes the flex item instead of . Mirror the flex sizing onto it so gallery layout is unchanged. The inner inherits width/height/ object-fit from the rule above (descendant selector still matches). */ .post-body div[data-gallery="true"] picture { flex: 0 1 calc(33.333% - 0.34rem); max-width: calc(33.333% - 0.34rem); min-width: 0; } /* The gallery img rule uses max-width with a percentage value. When img was a direct flex child, that percentage resolved against the gallery container (correct). Now that img lives inside , its containing block is , so the same percentage would resolve to a fraction of the cell — over-constraining the image and leaving a gap. Reset to 100% so img fills its picture cell at every breakpoint. */ .post-body div[data-gallery="true"] picture img { max-width: 100%; } /* ---- VIDEO EMBEDS ---- */ .post-body video[data-video="true"] { display: block; max-width: min(100%, var(--blog-img-max-width)); width: 100%; max-height: var(--blog-img-max-height); margin: 1.25rem auto; border-radius: var(--blog-radius); box-shadow: var(--blog-card-shadow); background: #000; } /* ---- SMS DAY POSTS (Mongol Rally 2007 style) ---- Pre-iPhone txt message updates grouped by day. Each entry: time column + text column. */ .post-body div[data-sms-day="true"] { margin: 0.5rem 0; } .post-body div[data-sms-entry="true"] { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 0.65rem 0; border-top: 1px solid var(--blog-border); } .post-body div[data-sms-day="true"] > div[data-sms-entry="true"]:first-child { border-top: none; padding-top: 0.2rem; } .post-body div[data-sms-entry="true"] .sms-time { font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.85rem; color: var(--blog-accent); font-weight: 600; min-width: 3.25rem; padding-top: 0.1rem; } .post-body div[data-sms-entry="true"] .sms-text { font-size: 0.98rem; color: var(--blog-text); line-height: 1.5; } /* Small "SMS" badge shown above SMS day posts (added via ::before) */ .post[data-sms-post="true"] .post-title::before { content: "SMS"; display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 1.5px; padding: 0.2rem 0.45rem; border-radius: 3px; background: var(--blog-accent); color: var(--blog-card-bg); vertical-align: middle; margin-right: 0.6rem; transform: translateY(-2px); } /* ---- MISSING MEDIA PLACEHOLDERS ---- Shown when content couldn't be recovered during migration. Marked with data-missing="video|image|media" */ .post-body p[data-missing], .post-body div[data-missing] { background: var(--blog-placeholder-bg); padding: 0.75rem 1rem; border-left: 3px solid var(--blog-accent); color: var(--blog-placeholder-fg); font-size: 0.9rem; border-radius: var(--blog-radius-sm); margin: 1rem 0; font-style: italic; } /* ---- LIGHTBOX ---- */ .lightbox { position: fixed; inset: 0; background: var(--blog-lightbox-bg); display: none; align-items: center; justify-content: center; z-index: 1000; cursor: zoom-out; padding: 2rem; } .lightbox.open { display: flex; } .lightbox img { width: 90vw; height: 90vh; object-fit: contain; border-radius: var(--blog-radius-sm); box-shadow: 0 8px 32px rgba(0,0,0,0.5); } .lightbox-close { position: absolute; top: 1rem; right: 1.5rem; color: var(--blog-lightbox-close); font-size: 2rem; cursor: pointer; background: none; border: none; line-height: 1; padding: 0.5rem 0.75rem; opacity: 0.8; transition: opacity 0.2s ease; } .lightbox-close:hover { opacity: 1; } /* Lightbox prev/next nav buttons */ .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--blog-lightbox-close); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.75; transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease; z-index: 1001; padding: 0; } .lightbox-nav:hover { opacity: 1; background: rgba(255, 255, 255, 0.22); } .lightbox-nav:active { transform: translateY(-50%) scale(0.92); } .lightbox-prev { left: 1.5rem; } .lightbox-next { right: 1.5rem; } .lightbox-nav[hidden] { display: none; } .lightbox-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* Position counter ('3 / 12') under the close button */ .lightbox-counter { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: var(--blog-lightbox-close); font-size: 0.85rem; font-weight: 600; letter-spacing: 1.5px; background: rgba(0, 0, 0, 0.45); padding: 0.4rem 0.85rem; border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; opacity: 0.85; } .lightbox-counter[hidden] { display: none; } /* ---- RESPONSIVE ---- */ @media (max-width: 600px) { .blog-container { padding: 0.5rem; margin: 0.5rem auto; } .post { padding: 1.25rem; } .post-body div[data-gallery="true"] img { flex: 0 1 calc(50% - 0.25rem); max-width: calc(50% - 0.25rem); height: var(--blog-gallery-height-mobile); max-height: var(--blog-gallery-height-mobile); } .post-body div[data-gallery="true"] picture { flex: 0 1 calc(50% - 0.25rem); max-width: calc(50% - 0.25rem); } .lightbox { padding: 0.5rem; } .lightbox img { width: 100vw; height: 100vh; } .lightbox-nav { width: 44px; height: 44px; } .lightbox-prev { left: 0.5rem; } .lightbox-next { right: 0.5rem; } .lightbox-counter { bottom: 0.75rem; font-size: 0.75rem; } }