:root {
  --bg: #0e0e10;
  --fg: #e9e9f0;
  --muted: #a2a2b0;
  --accent: #9fd0ff;
  --shell: min(1200px, 96vw);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
.shell { width: var(--shell); margin: 0 auto; padding: 1.2rem; }
.hero { padding-top: 2rem; padding-bottom: .5rem; border-bottom: 1px solid #1f1f26; }
h1 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 3rem); letter-spacing: 0.02em; }
.tag { color: var(--muted); margin: .25rem 0 0.5rem; }
nav { display: flex; gap: 1rem; flex-wrap: wrap; }

.intro { color: var(--muted); }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 1rem 0 2rem;
}
figure { margin: 0; }
figure a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid #222230; }
img { display: block; width: 100%; height: auto; object-fit: cover; }
figcaption { font-size: .9rem; color: var(--muted); padding: .4rem .2rem .8rem; }

.about, .contact { margin: 2rem 0; }
footer { border-top: 1px solid #1f1f26; color: var(--muted); }

/* Lightbox */
#lightbox[hidden] { display: none; }
#lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  display: grid; place-items: center;
  padding: 2rem;
  z-index: 9999;
}
#lightbox img {
  max-width: min(96vw, 1400px);
  max-height: 80vh;
  border-radius: 10px;
}
#lightbox-cap { margin-top: .8rem; color: var(--muted); text-align: center; }
#lightbox-close {
  position: absolute; top: .8rem; right: 1rem;
  font-size: 2rem; background: transparent; border: none; color: var(--fg);
  cursor: pointer;
}