* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* ===== SMARTFORM MENU ===== */
/* Same top menu as the rest of the site (black translucent variant
   for dark pages, as on people.html), scoped to Host Grotesk here
   because this page's body keeps its own system-ui masonry look. */
header, .menu-overlay {
    font-family: "Host Grotesk", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    padding: 24px 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 56px;
}

.logo {
    display: block;
    width: auto;
    height: 24px;
    line-height: 0;
    flex-shrink: 0;
}

.logo img {
    height: 24px;
    width: auto;
    max-width: none;
    display: block;
}

.menu-icon {
    width: 28px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1001;
}

.menu-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff !important;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-icon.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.menu-icon.active span:nth-child(2) {
    opacity: 0;
}

.menu-icon.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ===== MENU OVERLAY ===== */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 999;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    overflow-y: auto;
    padding: 80px 24px;
    box-sizing: border-box;
}

.menu-overlay.active {
    display: flex;
}

.sf-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.menu-overlay .menu-item {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -1px;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.menu-overlay .menu-item:hover {
    color: #cccccc;
}

/* Work group: theme links sit under the Work label in a
   two-column grid so the overlay stays compact. */
.menu-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.menu-sub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: center;
    column-gap: 64px;
    row-gap: 8px;
    margin-top: 18px;
}

.menu-overlay .menu-sub-item {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

.menu-overlay .menu-sub-item:hover {
    color: #bbbbbb;
}

.menu-overlay .menu-sub-item.is-current {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

.menu-overlay .menu-item.is-current {
    color: #cccccc;
}

@media (max-width: 480px) {
    .menu-sub {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }
}

/* ===== RESPONSIVE (MENU) ===== */
@media (max-width: 768px) {
    header {
        padding: 20px 24px;
        gap: 24px;
    }
    .menu-overlay .menu-item {
        font-size: 36px;
    }
    .menu-overlay {
        gap: 32px;
    }
    .sf-menu {
        gap: 22px;
    }
}

@media (max-width: 480px) {
    header {
        padding: 16px 20px;
    }
    .menu-overlay .menu-item {
        font-size: 28px;
    }
    .menu-overlay {
        gap: 24px;
    }
    .sf-menu {
        gap: 18px;
    }
}

/* ===== LIGHTBOX ===== */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.92);
    z-index: 1100; /* above the header (1000) and menu overlay (999) */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.lightbox.active {
    display: flex;
}

.lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.6);
}

.lightbox-video {
    display: none;
    max-width: 92vw;
    max-height: 88vh;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.6);
    background: #000;
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 28px;
    background: none;
    border: none;
    color: #ffffff;
    font-family: "Host Grotesk", sans-serif;
    font-size: 40px;
    font-weight: 300;
    line-height: 1;
    padding: 8px;
    cursor: pointer;
}

.lightbox-close:hover {
    color: #bbbbbb;
}

/* Focus lands on the dialog container on open (ring-free); the close
   button still gets a keyboard ring via :focus-visible when tabbed to. */
.lightbox:focus {
    outline: none;
}

.lightbox-close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

#container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 100px;
}

.col{
    height: auto;
    width: calc(100% / 5);
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
}

.card {
  margin: 0;
  width: 100%;
}

.card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  cursor: pointer;

}

.card video {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}

#loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
    margin-top: 100px;
  }

  /* On failure the spinner becomes a plain message box. */
  #loader.load-error {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    animation: none;
    color: #888888;
    font-family: "Host Grotesk", sans-serif;
    font-size: 14px;
    padding: 40px;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }