:root {
  --bg: #fafaf8;
  --fg: #1c1c1a;
  --muted: #6b6b66;
  --line: #e4e4de;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111110; --fg: #ecece8; --muted: #9a9a94; --line: #2a2a27; }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.6 Georgia, "Times New Roman", serif;
}
a { color: inherit; }

header, main, footer { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
header { display: flex; justify-content: space-between; align-items: baseline; padding-top: 28px; padding-bottom: 28px; }
header .name { font-size: 20px; text-decoration: none; letter-spacing: .02em; }
nav a { margin-left: 20px; text-decoration: none; color: var(--muted); font-family: system-ui, sans-serif; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
nav a:hover, nav a[aria-current] { color: var(--fg); }
footer { color: var(--muted); font-size: 13px; padding-top: 48px; padding-bottom: 32px; font-family: system-ui, sans-serif; }

/* Home */
.intro { max-width: 620px; margin: 12vh auto 0; text-align: center; }
.intro h1 { font-weight: normal; font-size: clamp(32px, 5vw, 52px); margin: 0 0 16px; line-height: 1.15; }
.intro p { color: var(--muted); margin: 0 0 32px; }
.button { display: inline-block; padding: 12px 28px; border: 1px solid var(--fg); text-decoration: none; font-family: system-ui, sans-serif; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.intro .contact { margin: 40px 0 0; font-size: 15px; }
.button:hover { background: var(--fg); color: var(--bg); }

/* Gallery - simple masonry with CSS columns */
.grid { columns: 3 320px; column-gap: 14px; }
.grid button { all: unset; display: block; margin: 0 0 14px; cursor: zoom-in; break-inside: avoid; }
.grid img { width: 100%; height: auto; display: block; background: var(--line); }
.grid button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.status { color: var(--muted); text-align: center; padding: 60px 0; font-family: system-ui, sans-serif; }

/* Lightbox */
dialog { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
dialog::backdrop { background: rgba(0,0,0,.92); }
dialog .frame { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; }
dialog img { max-width: 94vw; max-height: 86vh; object-fit: contain; }
dialog .caption { color: #ccc; font-size: 14px; font-family: system-ui, sans-serif; }
dialog .ctrl { position: fixed; background: none; border: 0; color: #eee; font-size: 34px; cursor: pointer; padding: 16px; line-height: 1; }
dialog .close { top: 8px; right: 12px; }
dialog .prev { left: 8px; top: 50%; transform: translateY(-50%); }
dialog .next { right: 8px; top: 50%; transform: translateY(-50%); }