/* Base */
:root {
  --bg: #0a0a0a;
  --panel: #0f0f12;
  --card: #0c0c0f;
  --border: #1d1d23;
  --text: #e6e8ec;
  --muted: #a1a1aa;
  --accent: #60a5fa;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px clamp(16px, 4vw, 32px);
  backdrop-filter: saturate(140%) blur(6px);
}

.logo { justify-self: start; display: inline-flex; align-items: center; text-decoration: none; }
.logo img { display: block; height: clamp(22px, 3.6vw, 32px); width: auto; filter: drop-shadow(0 6px 20px rgba(0,0,0,.35)); }

/* Text wordmark */
/* Make the text logo match nav-link style */
.logo-text { justify-self: start; color: var(--muted); text-decoration: none; font-weight: 500; letter-spacing: 0.01em; position: relative; font-size: inherit; }
.logo-text:hover { color: var(--text); opacity: 1; }

.site-nav { justify-self: center; display: flex; align-items: center; gap: 18px; }
.site-nav .divider { color: #3a3a40; }

.nav-link {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
}

.nav-link.active { color: var(--text); }

.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: translateY(2px);
  transition: .25s ease;
}

.nav-link:hover { color: var(--text); }
.nav-link.active::after, .nav-link:hover::after { opacity: 1; transform: translateY(0); }

.nav-icons { justify-self: end; display: flex; gap: 12px; }
.icon { color: #c7c7ce; opacity: .85; text-decoration: none; }
.icon:hover { color: var(--text); opacity: 1; }

/* Gallery (CSS masonry using columns) */
.gallery {
  column-gap: 16px;
  padding: 12px clamp(12px, 4vw, 24px) 48px;
}

@media (min-width: 740px) {
  .gallery { column-count: 2; }
}
@media (min-width: 1024px) {
  .gallery { column-count: 3; }
}
@media (min-width: 1440px) {
  .gallery { column-count: 4; }
}

.item { break-inside: avoid; margin: 0 0 16px; }
.item a { position: relative; display: block; border-radius: 0; overflow: hidden; border: 1px solid var(--border); background: #0b0b0e; }
.item img { width: 100%; display: block; height: auto; transform: scale(1.001); filter: saturate(1); transition: transform .6s ease, filter .6s ease, opacity .6s ease; }
.item video { width: 100%; display: block; height: auto; background: #000; }
.item a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%); opacity: .0; transition: opacity .35s ease; }
.item figcaption { display: none; }
.item a:hover img { transform: scale(1.04); filter: saturate(1.05) contrast(1.05); }
.item a:hover::after { opacity: .6; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.96); display: grid; place-items: center; z-index: 100; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 92vw; max-height: 92vh; border: 1px solid var(--border); background: #000; }
.lightbox video.lightbox__video { max-width: 92vw; max-height: 92vh; border: 1px solid var(--border); background: #000; display: block; }
.lightbox__close { position: fixed; top: 14px; right: 14px; padding: 8px 10px; border-radius: 8px; background: rgba(17,17,17,.6); border: 1px solid #2a2a2f; color: #e8e8ef; cursor: pointer; }
.lightbox__close:hover { background: rgba(17,17,17,.8); }

/* About */
.about-main { display: grid; place-items: start center; padding: 64px 20px 96px; }
.about-card { width: min(860px, 92vw); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); border: 1px solid var(--border); border-radius: 16px; padding: clamp(20px, 4vw, 36px); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.about-card h1 { margin: 6px 0 10px; font-size: clamp(26px, 4vw, 40px); line-height: 1.1; }
.about-card p { color: var(--muted); margin: 0 0 14px; }
.about-list { list-style: none; padding: 0; margin: 0; color: #c6c6d0; }
.about-list li { padding: 8px 0; border-top: 1px dashed #22222a; }
.about-list li:first-child { border-top: 0; }
.about-cta { margin-top: 18px; display: flex; gap: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: #121216; color: var(--text); text-decoration: none; font-weight: 500; }
.button:hover { border-color: #2b2b35; }
.button.ghost { background: transparent; color: var(--muted); }

/* Utilities */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }