:root {
  --bg: #fafaf9;
  --fg: #1c1917;
  --muted: #78716c;
  --line: #e7e5e4;
  --row: 300px; /* target gallery row height */
  --gap: 8px;
  --pad: clamp(16px, 4vw, 48px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0c0a09; --fg: #f5f5f4; --muted: #a8a29e; --line: #292524; }
}
@media (max-width: 640px) {
  :root { --row: 160px; --gap: 4px; }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 28px var(--pad);
}
.brand { font-weight: 600; letter-spacing: 0.02em; text-decoration: none; }
.site-header nav { display: flex; gap: 24px; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--fg); }

main { padding: 0 var(--pad); }
.site-footer { padding: 48px var(--pad); color: var(--muted); font-size: 14px; }

/* Justified rows: each tile grows in proportion to its aspect ratio, so every row has equal height. */
.gallery { display: flex; flex-wrap: wrap; gap: var(--gap); }
.gallery::after { content: ""; flex-grow: 999; } /* keep the last row from stretching */
.tile {
  flex: var(--r) 1 calc(var(--r) * var(--row));
  display: block;
  background: var(--line);
  overflow: hidden;
}
.tile img { display: block; width: 100%; height: auto; transition: opacity .2s; }
.tile:hover img { opacity: .9; }
.empty { color: var(--muted); }

/* Lightbox */
.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(10, 10, 10, .96);
  color: #fff;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox img {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  object-fit: contain;
  user-select: none;
}
.lightbox button {
  position: absolute;
  background: none; border: 0; color: inherit;
  font-size: 40px; line-height: 1;
  padding: 16px 20px;
  cursor: pointer; opacity: .7;
}
.lightbox button:hover, .lightbox button:focus-visible { opacity: 1; }
.lb-close { top: 4px; right: 4px; }
.lb-prev { left: 4px; top: 50%; translate: 0 -50%; }
.lb-next { right: 4px; top: 50%; translate: 0 -50%; }
@media (hover: none) { .lb-prev, .lb-next { display: none; } } /* swipe instead */

/* About / contact */
.about { max-width: 600px; }
.about h1, .about h2 { font-weight: 600; }
.contact { display: grid; gap: 16px; }
.contact label { display: grid; gap: 4px; color: var(--muted); font-size: 14px; }
.contact input, .contact textarea {
  font: inherit; color: var(--fg); background: transparent;
  border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px;
}
.contact input:focus, .contact textarea:focus { outline: 2px solid var(--fg); outline-offset: -1px; }
.contact button {
  justify-self: start;
  font: inherit; font-weight: 600;
  background: var(--fg); color: var(--bg);
  border: 0; border-radius: 4px; padding: 10px 24px; cursor: pointer;
}

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

/* Projects */
.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 40px 24px; }
.project { text-decoration: none; }
.project img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; object-position: top left;
  border: 1px solid var(--line); border-radius: 4px;
  transition: opacity .2s;
}
.project:hover img { opacity: .85; }
.project h2 { font-size: 18px; font-weight: 600; margin: 14px 0 2px; }
.project p { margin: 0; color: var(--muted); }

/* Work dropdown */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; color: var(--muted); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " ▾"; font-size: .75em; }
.menu summary:hover, .menu[open] summary, .menu:has([aria-current]) summary { color: var(--fg); }
.menu-items {
  position: absolute; top: calc(100% + 10px); left: -14px; z-index: 10;
  display: grid; min-width: 150px; padding: 6px 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .12);
}
.site-header nav .menu-items a { padding: 6px 14px; }
.site-header a, .menu summary { white-space: nowrap; }
@media (max-width: 520px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 20px 24px; }
  .site-header nav { gap: 20px; }
  .menu-items { left: -6px; }
}