/* ===========================================
   CLEAN, CONSOLIDATED SITE STYLESHEET (FULL REPLACEMENT)
   - Single-file replacement for your site-wide Custom CSS
   - Preserves:
     * custom header handling
     * landing full-screen video behavior
     * compact right-aligned mobile menu
     * collage: desktop horizontal snap + mobile vertical stack, scrollable, with gap
   - Primary change: standardized mobile project pages to single-column
     and reduced vertical gap between stacked images (mobile-only).
   ============================================ */

/* ---------- SITE WIDE / ROOT ---------- */
:root {
  --menu-height: 36px;
  --page-top-extra: 18px; /* mobile extra top spacing (adjustable) */
}

/* Hide theme headers; you use your own */
header[role="banner"],
.site-header,
header[class*="header"],
.page-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Default offset for fixed header (main content containers) */
.site-content,
.page,
.page-content,
.page__inner,
.content-wrapper,
main {
  padding-top: var(--menu-height) !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
}

/* ---------- PAGE-SPECIFIC ---------- */

/* LANDING: full-bleed block - remove default top offset */
body[data-page-path="/landing"] .site-content,
body[data-page-path="/landing"] .page,
body[data-page-path="/landing"] .page-content,
body[data-page-path="/landing"] .page__inner,
body[data-page-path="/landing"] .content-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* PROJECT pages: remove top gap for custom HTML */
.page--project .page-content,
.page--project .page__inner,
body[data-page-type="project"] .page-content,
body[data-page-type="project"] .page__inner,
body[data-page-path*="/project/"] .page-content,
body[data-page-path*="/project/"] .page__inner {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body[data-page-type="project"] .content-wrapper,
body[data-page-type="project"] .content-wrapper > *:first-child,
.page--project .page-content > *:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body[data-page-type="project"] #ProjectShow {
  margin-top: -12px !important; /* tweak if necessary */
}

/* ABOUT page video */
.about-video {
  max-width: none;
  width: 100%;
  margin: 38px 0;
}
.about-video video {
  width: 100%;
  height: auto;
  display: block;
}
.page-content .about-video {
  padding-left: 0;
  padding-right: 0;
}

/* ---------- COLLAGE (desktop / default) ---------- */
/* Desktop override variables and layout */
html.collage-override body[data-page-path="/collage"] {
  --collage-max: 1000px;
  --collage-gap: 48px;
  --collage-pad: 40px;
  background: #fff !important;
}
html.collage-override body[data-page-path="/collage"] .page__inner,
html.collage-override body[data-page-path="/collage"] .content,
html.collage-override body[data-page-path="/collage"] main {
  max-width: var(--collage-max) !important;
  margin: 0 auto !important;
  padding: var(--collage-gap) var(--collage-pad) var(--collage-gap) !important;
  box-sizing: border-box !important;
}

/* Ensure supersized/slider elements behave in-flow for the desktop override */
html.collage-override #supersized,
html.collage-override .supersized,
html.collage-override .supersized-container,
html.collage-override #supersized ul,
html.collage-override #supersized li,
html.collage-override .supersized-container a,
html.collage-override .supersized-container img {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: var(--collage-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
html.collage-override #supersized { max-width: var(--collage-max) !important; }
html.collage-override #supersized li { margin: 0 0 var(--collage-gap) 0 !important; }
html.collage-override #supersized li img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Optionally hide slider controls for desktop override */
html.collage-override body[data-page-path="/collage"] .nav,
html.collage-override body[data-page-path="/collage"] .nav-arrow,
html.collage-override body[data-page-path="/collage"] .arrow,
html.collage-override body[data-page-path="/collage"] .controls,
html.collage-override body[data-page-path="/collage"] .pagination,
html.collage-override body[data-page-path="/collage"] .thumbnails,
html.collage-override body[data-page-path="/collage"] .thumbs {
  display: none !important;
}

/* small screen defaults for desktop-overlay variables */
@media (max-width: 640px) {
  html.collage-override body[data-page-path="/collage"] {
    --collage-max: 100%;
    --collage-pad: 16px;
    --collage-gap: 28px;
  }
}

/* ---------- TYPOGRAPHY reset ---------- */
.page-content p {
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- LANDING VIDEO (desktop-first) ---------- */
.landing-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--menu-height);
  height: calc(100dvh - var(--menu-height));
  width: 100vw;
  z-index: 10;
  overflow: hidden;
  background: #000;
}
.landing-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  background: #000;
}

/* ========== MOBILE: consolidated rules (max-width: 900px) ========== */
@media (max-width: 900px) {

  /* keep your custom header visible and fixed on top */
  #customHeader, #CustomSiteHeader, [role="banner"] {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 99999 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Hide the Format-inserted in-content menu block (duplicate) */
  #menu_bar,
  #menu_bar .menu_items,
  #menu_bar #menu,
  aside.mobileMenu,
  .mobile-content-top {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: -99999 !important;
  }

  /* Defensive: disable interaction for other likely injected mobile nav containers
     scoped to the content area so we don't accidentally hide unrelated parts. */
  .content-wrapper :is(
    nav, .navigation, .site-menu, .menu, .menu__list, .menu-list,
    .mobile-nav, .menu-toggle, .nav-toggle, .hamburger,
    .format-block-navigation, .format-block-menu, .format-menu, .format-nav,
    .in-content-nav, .page-nav, .top-menu, .format-block-links,
    .mobile-menu-container, .menu-wrap, .nav-wrap
  ) {
    display: none !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -99999 !important;
  }

  /* Pull the landing animation up (reduce the white gap) */
  .landing-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0; right: 0;
    height: 100dvh !important;
    width: 100vw;
    z-index: 1000 !important;         /* below header but above page content */
    overflow: hidden !important;
    background: #000 !important;
  }

  .landing-wrap video {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center top !important;
    background: #000 !important;
  }

  /* ===========================================
     MOBILE: absolute-position burger (precise control)
     - place burger flush to the right on mobile
     ============================================ */
  /* make header a positioned container and remove right padding so the burger can move freely */
  #customHeader {
    position: fixed !important;
    left: 0;
    right: 0;
    box-sizing: border-box !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 12px !important; /* tweak to taste */
  }

  /* absolutely place the burger at the right edge (adjust right: as needed) */
  #customHeader #burger {
    position: absolute !important;
    right: 8px !important;             /* change this to 0 / 6 / 12 / 20 / 28 px as you prefer */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 100000 !important;
    padding: 10px !important;          /* keep tappable area large */
    background: transparent !important;
    border: 0 !important;
  }

  /* left block adjustments (logo + name) */
  #customHeader .left {
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #customHeader .left .name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 96px) !important; /* ensures room for burger */
  }

  /* ===========================================
     MOBILE: mobile menu visibility & basic styling
     - hidden by default, shown when helper class present or aria-expanded
     ============================================ */
  /* hidden by default */
  #mobileMenu {
    display: none !important;
    visibility: hidden !important;
  }

  /* Show when helper class is present (preferred) */
  #mobileMenu.visible-by-burger {
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    top: var(--menu-height) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99998 !important;
    background: #fff !important;
    max-height: calc(100dvh - var(--menu-height)) !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    padding: 12px 16px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
  }

  /* Fallback: show when aria-expanded on burger is true (sibling selector) */
  button#burger[aria-expanded="true"] ~ #mobileMenu {
    display: flex !important;
    visibility: visible !important;
  }

  /* default link style (will be tuned in right-aligned panel section) */
  #mobileMenu a {
    display: block !important;
    padding: 12px 0 !important;
    font-size: 18px !important;
    color: #000 !important;
    text-decoration: none !important;
  }

  /* light animation */
  #mobileMenu {
    transform-origin: top;
    transition: transform .22s ease, opacity .18s ease;
    transform: translateY(-6px);
    opacity: 0;
  }
  #mobileMenu.visible-by-burger,
  button#burger[aria-expanded="true"] ~ #mobileMenu {
    transform: translateY(0);
    opacity: 1;
  }

  /* ===========================================
     MOBILE: compact right-aligned dropdown under burger
     - This block positions the panel as a compact floating card.
     - JS helper will compute exact top/right but CSS provides fallbacks.
     ============================================ */
  #mobileMenu.visible-by-burger,
  button#burger[aria-expanded="true"] ~ #mobileMenu {
    /* fallback positioning; inline JS will adjust top/right precisely */
    position: fixed !important;
    top: var(--menu-height) !important;    /* flush under header by default */
    right: 8px !important;                  /* fallback; JS will compute exact right */
    left: auto !important;
    width: auto !important;
    min-width: 160px !important;
    max-width: 92vw !important;
    z-index: 99998 !important;
    background: #fff !important;
    padding: 6px 0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
    border-radius: 4px !important;
    transform-origin: top right !important;
    text-align: right !important; /* right-align panel content by default */
    margin: 0 !important;
  }

  /* Right-aligned links and tighter vertical spacing */
  #mobileMenu.visible-by-burger a,
  button#burger[aria-expanded="true"] ~ #mobileMenu a {
    display: block !important;
    text-align: right !important;  /* ensure links are right-aligned */
    padding: 8px 16px !important;   /* vertical spacing between items */
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    color: #000 !important;
    padding-left: 12px !important;  /* small inset from left inside panel */
    padding-right: 20px !important; /* more room on right so text doesn't touch the edge */
  }

  /* Remove extra gap between anchors */
  #mobileMenu.visible-by-burger a + a,
  button#burger[aria-expanded="true"] ~ #mobileMenu a + a {
    margin-top: 0 !important;
  }

  /* Optional hover/active feedback */
  #mobileMenu.visible-by-burger a:hover,
  #mobileMenu.visible-by-burger a:active {
    background: rgba(0,0,0,0.03) !important;
  }

  /* Slightly smaller on very narrow phones */
  @media (max-width: 360px) {
    #mobileMenu.visible-by-burger { right: 6px !important; min-width: 140px !important; }
    #mobileMenu.visible-by-burger a { font-size: 16px !important; padding: 7px 12px !important; padding-right: 16px !important; }
  }

  /* =========================
     COLLAGE (MOBILE): vertical stack, scrolling enabled, small gap
     - This block targets the .collage-horizontal layout and makes it behave like a normal
       vertical list of images on mobile devices (<=900px). It overrides both fixed viewport
       and horizontal snap/slider behaviors so images fit and page scrolls vertically.
     ========================= */

  /* mobile-specific defaults for collage spacing */
  html.collage-override body[data-page-path="/collage"] {
    --collage-gap: 12px !important; /* smaller gap between images on mobile */
    --collage-side-pad: 16px !important;
  }

  /* if JS added classes that lock scrolling, override them so the page can scroll */
  html.collage-lock,
  body.collage-lock,
  html.collage-override html.collage-lock,
  html.collage-override body.collage-lock {
    overflow: visible !important;
    height: auto !important;
  }

  /* allow the viewport region to flow with the document (not fixed) */
  .collage-horizontal .viewport {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  /* make the snap-wrap a normal vertical container */
  .collage-horizontal .snap-wrap {
    position: relative !important;
    inset: auto !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    display: block !important;
    flex-direction: column !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
    white-space: normal !important;
    touch-action: pan-y !important;
  }

  /* slides become stacked blocks with a small bottom gap */
  .collage-horizontal .slide {
    scroll-snap-align: none !important;
    flex: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    padding: 0 var(--collage-side-pad) !important;
    box-sizing: border-box !important;
    margin: 0 0 var(--collage-gap) 0 !important;
  }

  .collage-horizontal figure {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* ensure images fit container */
  .collage-horizontal img,
  .collage-horizontal .snap-wrap img,
  .collage-horizontal figure img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
  }

  /* cap very tall images */
  .collage-horizontal img {
    max-height: calc(100dvh - var(--menu-height) - 48px) !important;
  }

  /* hide horizontal nav controls on mobile */
  .collage-horizontal .nav-btn,
  .collage-horizontal .nav,
  .collage-horizontal .nav-arrow,
  .collage-horizontal .controls,
  .collage-horizontal .pagination,
  .collage-horizontal .thumbnails,
  .collage-horizontal .thumbs {
    display: none !important;
    pointer-events: none !important;
  }

  /* defensive: remove inline transform/position rules that force overflow */
  .collage-horizontal .snap-wrap [style],
  .collage-horizontal .slide[style],
  .collage-horizontal figure[style],
  .collage-horizontal img[style] {
    transform: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* ensure vertical gestures are allowed */
  html.collage-override body {
    overscroll-behavior: auto !important;
    touch-action: pan-y !important;
  }

  /* ---------- MOBILE: extra top spacing for About & Collage pages ---------- */
  body[data-page-path="/about"] .page__inner,
  body[data-page-path="/about"] .page-content,
  body[data-page-path="/about"] .content,
  body[data-page-path="/about"] .content-wrapper {
    padding-top: calc(var(--menu-height) + var(--page-top-extra)) !important;
  }

  html.collage-override body[data-page-path="/collage"] .page__inner,
  html.collage-override body[data-page-path="/collage"] .page-content,
  html.collage-override body[data-page-path="/collage"] .content,
  html.collage-override body[data-page-path="/collage"] .content-wrapper {
    padding-top: calc(var(--menu-height) + var(--page-top-extra)) !important;
  }

  /* fallback small margin if a first-child ignores container padding */
  body[data-page-path="/about"] .page__inner > *:first-child,
  html.collage-override body[data-page-path="/collage"] .page__inner > *:first-child {
    margin-top: 8px !important;
  }
}

/* ========== FINAL SAFEGUARDS ========== */
/* Zero top margin but preserve padding-top where pages rely on it.
   Important: we intentionally DO NOT set padding-top:0 here so per-page padding can apply. */
.page,
.page-content,
.page__inner,
.content-wrapper {
  margin-top: 0 !important;
  box-sizing: border-box !important;
}

/* small devices: prevent unexpected text-size-adjust */
@media (max-width: 480px) {
  html, body { -webkit-text-size-adjust: 100% !important; }
}

/* --------------------------------------------------------------------
   MOBILE: PROJECT PAGES — enforce single-column / stacked images + reduced gap
   - Standardize all project pages on mobile to a single vertical column of images
   - Reduced vertical gap between images (tunable via --project-image-gap)
   - Targets common Format theme selectors defensively.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Tunable vertical gap between stacked images (change to 6px/10px as preferred) */
  :root { --project-image-gap: 8px; }

  /* Scope: project pages */
  /* (these selectors identify project pages; they are used below as scoping) */
  /* Convert common gallery / grid / slideshow wrappers to a single-column flow */
  body[data-page-type="project"] .project-gallery,
  body[data-page-path*="/project/"] .project-gallery,
  .page--project .project-gallery,
  .project-show .project-images,
  .project-show .project-photos,
  .project-show .gallery,
  .project-show .grid,
  .project .gallery,
  #ProjectShow,
  #ProjectShow .slideshow,
  .supersized-container,
  .supersized,
  .slider,
  .slides,
  .row.gallery,
  .columns,
  .two-column,
  .masonry,
  .gallery-wrap,
  .project__media,
  .entry-media {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: static !important;
    transform: none !important;
    overflow: visible !important;
  }

  /* Each gallery item / slide / figure stacks and is full width with small gap */
  body[data-page-type="project"] .project-gallery .item,
  body[data-page-path*="/project/"] .project-gallery .item,
  .project-show .slide,
  .project-show .item,
  .project-show figure,
  .project-show .project-image,
  .project .project-image,
  .gallery .thumb,
  .gallery .item,
  .slide,
  .slides li,
  .supersized-container li,
  .supersized li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 var(--project-image-gap) 0 !important; /* reduced spacing between stacked images */
    padding: 0 !important;
    box-sizing: border-box !important;
    position: static !important;
  }

  /* Images: fill width, preserve aspect ratio, smaller bottom margin */
  body[data-page-type="project"] img,
  body[data-page-path*="/project/"] img,
  .project-show img,
  .project-image img,
  .gallery img,
  .slide img,
  .supersized-container img,
  figure img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center top !important;
    margin: 0 auto var(--project-image-gap) auto !important; /* reduced gap */
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
  }

  /* Hide/compress thumbnail strips or small below-image thumbnails that duplicate content */
  body[data-page-type="project"] .thumbs,
  body[data-page-path*="/project/"] .thumbs,
  .project-thumbs,
  .gallery-thumbs,
  .thumb-list,
  .project-nav-thumbs,
  .gallery-strip {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* If a two-column layout was used (meta column), force meta block below images */
  body[data-page-type="project"] .project-meta,
  body[data-page-path*="/project/"] .project-meta,
  .project-info,
  #ProjectShow .project-info,
  .project-sidebar {
    width: 100% !important;
    display: block !important;
    float: none !important;
    margin: 0 0 14px 0 !important; /* slightly reduced meta spacing */
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Remove fixed-height or viewport-anchored behavior that prevents vertical stacking */
  .supersized, .supersized-container, .slider, .slides, .project-fullscreen {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Defensive: remove inline transforms / left/top positioning commonly injected */
  .project-gallery [style],
  .project-show [style],
  .gallery [style],
  .slides [style],
  .slide[style],
  figure[style],
  img[style] {
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Keep page text/metadata readable with comfortable spacing after images */
  body[data-page-type="project"] .page__inner p,
  body[data-page-path*="/project/"] .page__inner p,
  .project-show .project-description,
  .project-show .project-content {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    line-height: 1.45 !important;
  }

  /* Caption handling */
  .project-caption, .caption, .wp-caption-text {
    display: block !important;
    max-width: 100% !important;
    margin: 6px 0 !important;
    padding: 0 !important;
    color: inherit !important;
  }
}
/* MOBILE: force #ProjectShow children to stack vertically and normalize gaps
   Paste this into Format -> Design -> Custom CSS and save. */
@media (max-width: 900px) {
  /* Ensure project container and its immediate wrappers are block-flow and full-width */
  #ProjectShow,
  #ProjectShow > div,
  #ProjectShow > div > div,
  #ProjectShow > div > div > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* If your theme uses .twelvecol.last (seen in diagnostic), neutralize float on mobile */
  #ProjectShow .twelvecol.last,
  #ProjectShow .twelvecol {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Force images to be full-width blocks and use a single consistent bottom gap */
  #ProjectShow img,
  #ProjectShow figure img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 12px !important; /* change this value if you want a different uniform gap */
    box-sizing: border-box !important;
  }

  /* Collapse large margins/padding on intermediate wrappers that can add extra gaps */
  #ProjectShow > div * {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Then allow images/figures to provide the single consistent gap above */
  #ProjectShow img { margin-bottom: 12px !important; }
}
/* MOBILE: add extra bottom space so content isn't flush to the viewport edge
   - Tunable: change --mobile-bottom-extra to increase/decrease space
   - Uses safe-area-inset-bottom for devices with notches/home indicators
*/
@media (max-width: 900px) {
  :root {
    --mobile-bottom-extra: 56px; /* change to 40px / 72px etc. to taste */
  }

  /* Ensure main content containers reserve additional padding at the bottom */
  .page-content,
  .page__inner,
  .content-wrapper,
  main {
    padding-bottom: calc(var(--mobile-bottom-extra) + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    /* keep a minimum height so very short pages still have room (doesn't collapse) */
    min-height: calc(100dvh - var(--menu-height)) !important;
  }

  /* If a first/last child is removing the container padding, give the last child some breathing room */
  .page-content > *:last-child,
  .page__inner > *:last-child,
  .content-wrapper > *:last-child {
    margin-bottom: calc(var(--mobile-bottom-extra) / 2) !important;
  }

  /* Defensive: collapse any unusually large bottom margins on inner wrapper nodes
     so we end up with the single consistent space defined above. */
  .page__inner * {
    /* Only reduce margins if they're huge; small margins are preserved by clamping in JS/CSS above.
       This rule is intentionally light-touch (only overriding if larger than 200px via practical effect).
    */
    margin-bottom: inherit !important;
  }
}
/* MOBILE: reduce extra whitespace between last image and divider/metadata */
@media (max-width: 900px) {
  /* Reduce gap when an image is immediately followed by an hr or a divider element */
  #ProjectShow img + hr,
  .project-show img + hr,
  #ProjectShow img + .divider,
  .project-show img + .divider,
  .page__inner img + hr,
  .content-wrapper img + hr {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Clamp hr/divider margins site-wide on mobile so they don't create huge gaps */
  hr,
  .divider {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }

  /* If there's an intermediate wrapper between the image and the divider, remove its bottom margin */
  #ProjectShow > div,
  #ProjectShow > div > div,
  .project-show > div,
  .page__inner > div,
  .content-wrapper > div {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Ensure images still provide the consistent small gap (matches collage-like spacing) */
  #ProjectShow img,
  .project-show img,
  .page__inner img,
  .content-wrapper img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 12px !important; /* adjust this value if you prefer tighter/looser spacing */
    box-sizing: border-box !important;
  }

  /* If metadata follows the divider, ensure it sits closer to the line */
  .project-meta,
  .project-info,
  .project-description {
    margin-top: 12px !important;
  }
}
/* MOBILE: tighten the gap between the last image and the horizontal divider,
   without changing the bottom-of-page spacer. */
@media (max-width: 900px) {
  /* Make the last image before the divider sit closer to the line */
  #ProjectShow img:last-of-type,
  .project-show img:last-of-type,
  .page__inner img:last-of-type,
  .content-wrapper img:last-of-type {
    margin-bottom: 6px !important; /* change 6px to 4px/8px if you prefer */
  }

  /* Reduce the divider's top margin so it sits nearer the image */
  #ProjectShow img:last-of-type + hr,
  .project-show img:last-of-type + hr,
  .page__inner img:last-of-type + hr,
  .content-wrapper img:last-of-type + hr,
  hr,
  .divider {
    margin-top: 6px !important;
    /* keep a smaller bottom gap so text isn't flush to the line */
    margin-bottom: 10px !important;
    padding: 0 !important;
  }

  /* If an intermediate wrapper sits between image and divider, remove its bottom spacing */
  #ProjectShow > div,
  #ProjectShow > div > div,
  .project-show > div,
  .page__inner > div,
  .content-wrapper > div {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Ensure images keep the consistent small gap elsewhere */
  #ProjectShow img,
  .project-show img,
  .page__inner img,
  .content-wrapper img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
}