body {
    margin: 0;
	font-family: system-ui, -apple-system, sans-serif;
	background-color: #111;
	color: #f5f5f5;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111;
    padding: 10px 100px;
    border-bottom: 1px solid #aaa;
    position: sticky;
    top: 0;
    z-index: 100;
}

@media (max-width: 820px) {
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111;
    padding: 10px 20px;
    border-bottom: 1px solid #aaa;
    position: sticky;
    top: 0;
    z-index: 100;
}
}

/* Logo */
.nav-icon {
  width: 150px;  /* size of the image */
  height: 78px;
}

.nav-left,
.nav-center,
.nav-right {
  display: flex;
  align-items: center;	
  list-style: none;
  margin: 0;
}

.nav-center {
  font-weight: bold;
  flex: 1;
  justify-content: center; /* centers text in the remaining space */
  text-align: center;
  padding: 0 20px;
}

.nav-right a {
    margin-left: 15px; /* spacing between right links/icons */
	color: #f5f5f5;
	text-decoration: none;
    font-weight: 500;
}

.nav-right a:hover,
.nav-right .active {
    color: #b80f0a;
}

/* Basic hamburger icon */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 3px;
  background: #f5f5f5;
  color: red;
  border-radius: 2px;
}

/* Mobile menu (hidden by default) */
.mobile-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-weight: 500;
  background: #fff;
  position: fixed;
  width: 100%;
  top: 99px; /* adjust based on navbar height */
  left: 0;
  border-radius: 6px;
  z-index: 1000;

  /* Animation setup */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  padding: 0;
  pointer-events: none;
}

.mobile-menu.active {
  max-height: 100px; /* big enough to fit links */
  opacity: 1;
  padding: 0;
  pointer-events: auto;
}

.mobile-menu a {
  padding: 5px;
  text-decoration: none;
  color: #111
}

/* Show hamburger only on small screens */
@media (max-width: 820px) {
  .nav-right {
    display: none;
  }

  .hamburger {
    display: flex;
  }
}

/* Grid container for index.html */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* space between tiles */
    padding: 40px; /* space around the grid */
    justify-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

/* photo-grid on mobile */
@media (max-width: 820px) {
  .photo-grid {
    grid-template-columns: 1fr; /* 1 equal columns */
	gap: 20px; /* space between tiles */
    padding: 40px; /* space around the grid */
    justify-items: center;
    max-width: 1400px;
    margin: 0 auto;
  }
}

.tile img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border: 1px solid black;
}

.photo-tile {
    width: 100%;
    max-width: 400px; /* keeps tiles from getting huge */
    aspect-ratio: 3 / 2; /* standard photo shape, adjusts for both orientations */
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    background-color: #f5f5f5; /* fallback color */
	font-style: italic;
}

.photo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills the tile while cropping excess */
    display: block;
}

/* Hover effect for index.html */
.photo-tile:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Photo tile title overlay */
.photo-tile .title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    color: #f5f5f5;
    padding: 8px 10px;
    font-size: 1rem;
    text-align: center;
	transition: background 0.3s ease;
}

.photo-tile:hover .overlay {
    opacity: 1;
}

/* Page Content */
.page-content {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
	line-height: 1.6;
}

/* Container for essay content */
.essay-content {
	max-width: 900px;
	margin: 40px auto;
	padding: 0 20px;
	line-height: 1.6;
}

.essay-content p {
	margin-bottom: 20px;
	font-size: 1.05em;
}

/* Image styling */
.essay-content img {
	display: block;                  /* Makes centering possible */
	max-width: 90%;                  /* Responsive scaling */
	height: auto;                    /* Keep aspect ratio */
	margin: 25px auto;                /* Space above/below + center */
	border: 1px solid black;          /* Thin black outline */
	box-shadow: 0 0 6px rgba(0,0,0,0.15); /* Subtle depth */
}

/* Optional: smaller captions under images */
.essay-content figcaption {
	text-align: center;
	font-size: 0.9em;
	font-style: italic;
	margin-top: -15px;
	margin-bottom: 20px;
	color: #aaa;
}

/* Page break at end of essay */
.essay-end {
  border: none;
  border-top: 2px solid #aaa;
  width: 60%;
  margin: 40px auto 20px auto;
  opacity: 0.6;
}

/* Footer styling */
.site-footer {
  text-align: center;
  font-family: inherit; /* Matches the rest of your theme */
  font-size: 0.9rem;
  color: #aaa;
  padding: 15px 10px;
}

.site-footer p {
  margin: 0;
  line-height: 1.5;
}

/* Lightbox */
.lightbox {
  display: none; /* hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Container around image + close button */
.lightbox-content {
  position: relative; /* This makes the close button relative to the image */
  display: inline-block;
}

/* Lightbox image */
.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

/* Close button relative to image */
/* Close button directly on top of image */
.lightbox-close {
  position: absolute;        /* relative to .lightbox-content */
  top: 8px;                  /* distance from top of image */
  right: 8px;                /* distance from right of image */
  font-size: 3rem;
  color: white;
  cursor: pointer;
  font-weight: bold;
  background: rgba(0,0,0,0.5); /* semi-transparent background so it’s readable */
  border-radius: 50%;
  padding: 10px 20px;
  z-index: 2;
}