:root {
  --bg: #060d1f;
  --accent: #ff8c00;
  --text: #fff;
  --gap: 12px;
}

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

html { color-scheme: dark; }

body {
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Header */
.top { padding: 56px 16px 36px; text-align: center; }

.name {
  font-size: clamp(1.5rem, 7vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  /* trailing letter-space would push the name off-centre */
  padding-left: 0.3em;
}

.tagline {
  margin-top: 12px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.8;
  padding-left: 0.3em;
}

/* Gallery: masonry via CSS columns; width/height attributes reserve space */
main { max-width: 1200px; margin: 0 auto; padding: 0 16px 24px; }

.gallery { columns: 2; column-gap: var(--gap); }

@media (min-width: 700px)  { .gallery { columns: 3; } }

.tile {
  display: block;
  width: 100%;
  margin: 0 0 var(--gap);
  padding: 0;
  border: 0;
  background: #0b1530;
  cursor: zoom-in;
  break-inside: avoid;
  -webkit-tap-highlight-color: transparent;
}

.tile img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.2s;
}

.tile:hover img { opacity: 0.85; }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Footer */
.foot {
  padding: 32px 16px 48px;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Lightbox (native <dialog>: focus trap and Esc come for free) */
#lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.98);
  color: var(--text);
  overflow: hidden;
  touch-action: pan-y;
}

#lightbox:not([open]) { display: none; }
#lightbox[open] { display: flex; align-items: center; justify-content: center; }

#lightbox figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100vw;
  max-height: 100dvh;
  padding: 56px 56px 24px;
}

#lb-img {
  max-width: 100%;
  max-height: calc(100dvh - 100px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

#lb-cap {
  margin-top: 12px;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  opacity: 0.8;
  text-align: center;
}

#lb-cap:empty { display: none; }

.lb-btn {
  position: absolute;
  z-index: 2;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 2.5rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  cursor: pointer;
  opacity: 0.75;
}

.lb-btn:hover, .lb-btn:focus-visible { opacity: 1; }
.lb-btn:focus-visible { outline: 2px solid var(--accent); }
.lb-close { top: 8px; right: 8px; }
.lb-prev  { left: 4px;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 4px; top: 50%; transform: translateY(-50%); }

@media (max-width: 700px) {
  #lightbox figure { padding: 56px 8px 16px; }
  .lb-prev, .lb-next { display: none; } /* swipe on touch screens */
}

@media (prefers-reduced-motion: reduce) {
  .tile img { transition: none; }
}