*::before,
*::after { box-sizing: border-box; }

body {
margin: 0;
font-family: Arial, Tahoma, Geneva, Verdana, sans-serif;
background-color: rgba(3, 3, 3, 0.9);
color: #2c2c2c;
padding-top: 70px; /* or slightly more than header height */
overflow-x: hidden;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
	  overflow-x: hidden; }

  :root {
    --box-w: 267px;
    --box-h: 150px;
    --bg: #000;
    --header-bg: #111;
    --header-border: #333;
    --card-bg: #0d0d0f;
    --text: #eaeaea;
    --muted: #ccc;
    --frame: #444;
    --frame-hover: #777;
}

main {
  flex: 1;
}

header, footer {
  font-family: Arial, Tahoma, Geneva, Verdana, sans-serif;
  width: 100%;
  box-sizing: border-box;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  background-color: #1e1e1e;
  border-bottom: 1px solid #333;
  z-index: 1000;
  gap: 1rem;
  height: 60px; /* Reduced from 80px */
}

header h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 100;
  color: #00B8FF;
  flex: 1;
  text-align: center;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2; /* makes vertical alignment more consistent */
}

h1[id], h2[id] { scroll-margin-top: 30px; } /* match your header height */



/* ----------------Nav Menu ---------------------- */
	
#navMenu {
  position: absolute;
  top: 100%;
  right: 2rem;
  width: 200px;
  overflow: hidden;
  max-height: 0;
  display: flex;
  flex-direction: column;
  background-color: rgba(30, 30, 30, 0.9);
  border-radius: 8px;
  transition: max-height 0.4s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out;
  padding: 0;
  margin: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  z-index: 1500;
  opacity: 0;
}

#navMenu.show {
  padding: 1rem;
  opacity: 1;
}


#navMenu a {
  color: #ccc;
  text-decoration: none;
  margin: 0.4rem 0;
  text-align: right;
  padding-right: 0.5rem;
}

#navMenu a:hover {
  color: #00B8FF;
}



/* -------------------------------------- */

/* Footer */

footer {
  text-align: center;
  padding: 1rem;
  background-color: #1a1a1a;
  border-top: 1px solid #333;
  font-size: 0.8rem;
  color: #828181;
}



/* -------------------------------------- */

/* Logo */


.logo {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  opacity: 42%;
	align-self: center;
	transform: translateY(3px);
}

.logo:hover {
  filter: brightness(2);
}



/* -------------------------------------- */

/* Hamburger */

.hamburger {
  font-size: 2rem;
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  transform: translateY(-3px); /* raise it slightly */
}



/* -------------------------------------- */

/* Image Banner */

.image-banner {
  background-color: #1e1e1e; /* same as header */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  margin-top: 40px; /* offset for fixed header height */
  width: 100%;
  box-sizing: border-box;
}

.image-banner img {
  max-width: 100%;
  height: auto;
  display: block;
}



/* -------------------------------------- */

/* subheader */

.subheader {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0px 1.5rem 0; /* adjusted for header + buffer */
}

.subheader p {
  margin-bottom: 1rem;
  font-size: 1rem;
  text-align: center;
  margin-bottom: 1rem;
}

.subheader h1 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 17px;
  color: #2A2A2A;
  flex: 1;
  text-align: center;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2; /* makes vertical alignment more consistent */
}


/* -------------------------------------- */


  /* Full-width expanding grid container */
  #lightgallery {
    width: 100%;
    margin: 18px 0 40px;
    padding: 0 16px; /* page padding */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    box-sizing: border-box;
    gap: 18px 10px; /* keep vertical 18px, horizontal 10px */
  }



  .gallery-item {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    outline: none;
    box-shadow: none;
  }

  /* Fixed 267x150 box, centered; no transform on hover */
  .thumb-wrap { box-sizing: border-box;
    width: var(--box-w);
    height: var(--box-h);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 0;
    background: #0e0e10;
    border: 2px solid var(--frame);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s linear;
  }
  .thumb-wrap:hover { border-color: var(--frame-hover); }

  .thumb-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;   /* NO CROPPING */
    display: block;
    -webkit-user-drag: none;
    user-select: none;
  }

  .caption {
    padding: 6px 10px 10px;
    font-size: 13px;
    color: #999;
    text-align: center;
    width: 100%;
  }

	.lg-sub-html {
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 12px;
    border-radius: 4px;
    color: #999;
    font-weight: 500;
}
	
/* LightGallery thumbnail strip styling */
.lg-outer .lg-thumb-item {
    border: 2px solid rgba(255, 255, 255, 0.3); /* subtle default */
    background: #000; /* match site background */
    border-radius: 4px;
    transition: border-color 0.3s ease;
}


.lg-outer .lg-thumb-item:hover {
    border-color: rgba(255, 255, 255, 0.9); /* site blue on hover */
}

.lg-outer .lg-thumb-item.active {
    border-color: #00B8FF; /* 90% white when active */
}

	
  /* Mobile: make the column fill the screen better */
  @media (max-width: 600px) {
    #lightgallery {
      grid-template-columns: 1fr;   /* single column */
      padding: 0 12px;              /* a bit less side padding */
    }
    .thumb-wrap {
      width: 100%;                  /* fill the column */
      height: auto;
      aspect-ratio: 267 / 150;      /* preserve box shape, no cropping */
      box-sizing: border-box;       /* include 2px border in width */
    }
  }
    .thumb-wrap { box-sizing: border-box;
      width: 100%;                  /* fill the column */
      height: auto;
      aspect-ratio: 267 / 150;      /* preserve box shape, no cropping */
    }
  }




/* ===== Quicklinks (consolidated — keep at END of stylesheet) ===== */

.quicklinks-drawer{
  position: fixed; left: 0; bottom: 0; width: 100%;
  max-height: calc(32px + env(safe-area-inset-bottom));   /* closed peek */
  background: rgba(31,31,31,.92);
  border-radius: 16px 16px 0 0;
  overflow: hidden;                                       /* show the curve */
  z-index: 10000;
  pointer-events: none;
  font-family: Arial, Tahoma, Geneva, Verdana, sans-serif;
	transition: max-height 0.5s ease-in-out;                  /* transition sed */
}

.quicklinks-drawer.is-open{
  max-height: calc(80vh + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  pointer-events: auto;
  box-shadow: 0 -8px 20px rgba(0,0,0,0); 
}

.quicklinks-drawer.is-closing{ max-height: calc(32px + env(safe-area-inset-bottom)); }


/* Header: whole header toggles; space reserved for handle */
.quicklinks-header{
  position: sticky; top: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 18px 0 8px;
  cursor: pointer;
  background: rgba(46,46,46,0.9);                               /* let radius show */
  border-top-left-radius: inherit; border-top-right-radius: inherit;
  pointer-events: auto;
}

/* Centered blue handle (stronger) */
.quicklinks-handle{
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 4px; border-radius: 7px; background: #00B8FF;
  box-shadow: 0 1px 0 rgba(255,255,255,.35);
  border: 0; padding: 0;
}

/* “Index” */
.quicklinks-title, .quicklinks-header span{
  margin: 0 0 6px;           /* removed extra left margin */
  padding-left: 28px;        /* aligns with list */
  font: inherit; font-size: 17px; font-weight: 700; color: #00B8FF;
}

/* Closed: hide title, keep handle visible */
.quicklinks-drawer:not(.is-open):not(.is-closing) .quicklinks-title,
.quicklinks-drawer:not(.is-open):not(.is-closing) .quicklinks-header span{ display: none; }

/* List layout */
.quicklinks-nav{
  display: flex; flex-direction: column; gap: 7px;
  padding: 8px 14px calc(22px + env(safe-area-inset-bottom)) 14px;
}
.quicklinks-drawer:not(.is-open) .quicklinks-nav{ pointer-events: none; }

/* Links as pills */
.quicklinks-nav a{
  display: block;
  padding: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #00B8FF;
  font-size: 14px; font-weight: 700;
  text-decoration: none; line-height: 1.2;
}
.quicklinks-nav a:active{ background: rgba(255,255,255,.18); }
.quicklinks-nav a:focus-visible{ outline: 2px solid #00B8FF; outline-offset: 2px; }

/* Scrim (click-away) */
.quicklinks-scrim{
  position: fixed; inset: 0; z-index: 9999; display: none;
  pointer-events: none; background: rgba(0,0,0,.001);
  transition: opacity .18s ease; opacity: 0;
}
.quicklinks-scrim.show{ display: block; pointer-events: auto; opacity: 1; }


/* Pointer cursor for images that are actually clickable */

/* 1) Images wrapped in links */
a img { cursor: pointer; }

/* 2) Images that open the lightbox via data-full */
img[data-full] { cursor: pointer; }

/* Optional opt-out: add data-static to any image you don't want to show pointer */
img[data-static] { cursor: default !important; }






/* Fade effect for quicklinks title */

.quicklinks-title {
  transition: opacity .7s ease, transform .5s ease;
  opacity: 1;
  transform: translateY(0);
}

.quicklinks-drawer.is-closing .quicklinks-title {
  opacity: 0;
  transform: translateY(-4px);
}