:root {
  --page-max: 1180px;
  --space: clamp(1rem, 2vw, 2rem);
  --text: #222;
  --muted: #666;
  --line: #ddd;
  --surface: #fff;
  --surface-soft: #f7f7f5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--surface);
  font: 16px/1.7 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.is-locked { overflow: hidden; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; padding: .5rem .75rem; background: var(--text); color: #fff; }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header__inner { max-width: var(--page-max); margin: auto; padding: .8rem var(--space); display: flex; align-items: center; gap: 1rem; }
.brand { text-decoration: none; font-weight: 700; white-space: nowrap; }
.site-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; }
.site-nav a { text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible { text-decoration: underline; }
.nav-toggle { display: none; margin-left: auto; }
.site-main { max-width: var(--page-max); margin: auto; padding: clamp(2rem, 6vw, 5rem) var(--space) 6rem; }
.page > * + * { margin-top: 2rem; }
.page__title { margin: 0; line-height: 1.15; font-size: clamp(2rem, 6vw, 4rem); }
.page__body { max-width: 75ch; }
.page__body p { margin: 1rem 0; }
.page__body img { display: block; max-width: 100%; height: auto; }
.page__images { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.gallery-card { margin: 0; }
.gallery-card button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-soft); }
.gallery-card figcaption { color: var(--muted); font-size: .9rem; padding-top: .35rem; }
[data-reveal] { opacity: 0; transform: translateY(1rem); transition: opacity .45s ease, transform .45s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; place-items: center; gap: 1rem; padding: 2rem; background: rgb(0 0 0 / .88); color: #fff; }
.lightbox[hidden] { display: none; }
.lightbox__figure { max-width: min(92vw, 1100px); max-height: 90vh; margin: 0; text-align: center; }
.lightbox__image { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; }
.lightbox__caption { margin-top: .5rem; }
.lightbox__close, .lightbox__prev, .lightbox__next { border: 0; background: transparent; color: #fff; font-size: 2.5rem; cursor: pointer; padding: .25rem .75rem; }
.error { padding: 1rem; border: 1px solid var(--line); background: var(--surface-soft); }
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; width: 100%; flex-direction: column; margin-left: 0; padding-top: .75rem; }
  .site-header__inner { flex-wrap: wrap; }
  .site-nav.is-open { display: flex; }
  .lightbox { padding: .75rem; gap: .25rem; }
  .lightbox__prev, .lightbox__next { font-size: 2rem; padding: .2rem; }
}