body {
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    /* font-family: 'Arial', sans-serif; /* Set a default font for the page */
    background-color: #ffffff; /* Black background */
    color: #000000; /* White text */
}

h1, h2, h3, h4, h5, h6 {
    color: #333; /* Dark grey color for text */
    font-family: 'DM Mono', monospace; /* Common, web-safe font */
    text-align: left; /* Center-align titles */
    font-size: 20px;
    margin-top: 20px; /* Space above the title */
    margin-bottom: 10px; /* Space below the title */
}

header {
    display: flex;      /* Aligns child elements (img and h1) horizontally */
    align-items: flex-start; /* Aligns items to the start of the flex container */
    padding: 10px;      /* Adds some spacing inside the header */
}

.header-image {
    width: 50px;       /* Set the width of the image */
    /* height: 50px;      /* Set the height of the image */
    margin-right: 20px; /* Adds spacing between the image and the title */
}

.header-title {
    font-size: 24px;   /* Larger text for the title */
    margin: 0;         /* Removes default margin from h1 */
}

.container {
    max-width: 1200px; /* Maximum width of the container */
    width: 100%; /* Make the container width 100% */
    margin: 0 auto; /* Center the container */
    padding: 20px; /* Padding around the content */
    box-sizing: border-box;
    background-color: #ffffff; /* Black background for the container if needed */
    color: #000000; /* White text for content within the container */
}

.container * {
    font-family: 'Roboto Mono', monospace;
    /* font-family: 'Open Sans', sans-serif; /* Specific font for everything inside the container */
}

/* Footer */
.site-footer{
    max-width: var(--wrap);
    margin: 12px auto 24px;
    padding: 12px 24px 0;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 14px;
    text-align: center;
  }

/* Wrapper around gallery + caption */
.img-with-caption {
    max-width: 900px;
    margin: 0 auto 1.5em;
  }
  
  .img-with-caption > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;     /* centers it */
  }

  /* Row of images */
  .img-with-caption .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;               /* space between images */
  }
  
  /* Default: single image fills the width */
  .img-with-caption .gallery img {
    flex: 1 1 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* Two images: ~50% each */
  .img-with-caption .gallery.two img {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
  
  /* Three images: ~33% each */
  .img-with-caption .gallery.three img {
    flex: 1 1 calc(33.333% - 12px);
    max-width: calc(33.333% - 12px);
  }

  /* Three images: ~33% each */
  .img-with-caption .gallery.four img {
    flex: 1 1 calc(25% - 12px);
    max-width: calc(25% - 12px);
  }
  
  /* Caption styling */
  .img-with-caption .caption {
    font-size: 0.85rem;
    color: #555;
    margin-top: 4px;
    line-height: 1.4;
    text-align: center;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Make sure gallery images keep their natural aspect ratio */
.img-with-caption .gallery img,
.img-with-caption > img {
  height: auto;
  width: 100%;
  object-fit: contain;  /* or remove this line entirely if you don't want any fit logic */
}
  
  /* Optional: stack images on small screens */
  @media (max-width: 600px) {
    .img-with-caption .gallery img {
      flex: 1 1 100%;
      max-width: 100%;
    }
  }

  .img-with-caption.image-combo {
    max-width: 900px;
    margin: 0 auto 1.5em;
  }
  
  /* Two columns: big image on the left, grid on the right */
  .image-combo {
    display: grid;
    grid-template-columns: 1.6fr 1.4fr;  /* left bigger */
    gap: 12px;
    align-items: stretch;
  }
  
  /* Big image */
  .image-combo-main img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  /* Grid of 4 small images */
  .image-combo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 8px;
  }
  
  .image-combo-grid img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  /* Caption spans full width */
  .image-combo .caption {
    grid-column: 1 / -1;
    margin-top: 8px;
    text-align: center;
  }
  
  /* Responsive: stack columns on small screens */
  @media (max-width: 700px) {
    .image-combo {
      grid-template-columns: 1fr;
    }
  
    .image-combo-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

/* ====== Compact responsive image grid with hover overlay ====== */

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;                      /* no space between images */
  margin: 0 auto 1.5rem;
  max-width: 1000px;           /* or whatever width you want */
}

.image-tile {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;            /* hide overlay edges */
}

.image-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* nicely crops instead of distorting */
}

/* Make videos behave like images in the tile grid */
.image-grid video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;    /* keeps the crop consistent with your images */
  border: 0;
}

/* Hover caption overlay */
.image-tile-caption {
  position: absolute;
  inset: 0;                    /* cover entire image */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;

  background: rgba(0, 0, 0, 0.65);  /* dark overlay */
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;

  opacity: 0;
  transform: translateY(5%);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;

  pointer-events: none;        /* don’t block clicks on the image */
}

/* Show overlay on hover/focus */
.image-tile:hover .image-tile-caption,
.image-tile:focus-within .image-tile-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: make grid denser on large screens */
@media (min-width: 900px) {
  .image-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}


.font-roboto-mono {
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
}

.font-dm-mono {
    font-family: 'DM Mono', monospace;
    font-size: 14px;
}