:root {
  --bg: #111;
  --fg: #e8e8e8;
  --muted: #9a9a9a;
  --accent: #fff;
  --row: 260px;
  --gap: 6px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); overflow-x: clip; }
body { font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }

main { padding: 0 24px 48px; }
.hero, .intro { max-width: 760px; margin: 0 auto; padding: 48px 0 32px; text-align: center; }
.hero h1, .intro h1 { font-weight: 300; font-size: clamp(28px, 5vw, 44px); margin: 0 0 8px; letter-spacing: .01em; }
.hero p, .intro p { color: var(--muted); margin: 0; }
h2.sub { font-weight: 300; font-size: 24px; margin: 48px 0 16px; text-align: center; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; max-width: 1400px; margin: 0 auto; }
.card { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; text-decoration: none; background: #1b1b1b; }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover img { transform: scale(1.04); }
.card span { position: absolute; inset: auto 0 0 0; padding: 40px 18px 14px; background: linear-gradient(transparent, rgba(0,0,0,.75)); display: flex; flex-direction: column; }
.card b { font-size: 22px; font-weight: 500; }
.card small { color: #ccc; }

.grid { display: flex; flex-wrap: wrap; gap: var(--gap); max-width: 1800px; margin: 0 auto; }
.grid::after { content: ""; flex-grow: 1e4; }
.tile { flex-grow: calc(var(--ar) * 100); width: calc(var(--ar) * var(--row)); min-width: 0; max-width: 100%; display: block; overflow: hidden; background: #1b1b1b; cursor: zoom-in; }
.tile picture { display: block; }
.tile img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; transition: opacity .25s, transform .4s; }
.tile:hover img { opacity: .88; transform: scale(1.02); }

.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; max-width: 1400px; margin: 0 auto; }
.videos video { width: 100%; background: #000; border-radius: 4px; }
.videos figcaption { color: var(--muted); font-size: 14px; margin-top: 6px; }

.about { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; max-width: 1100px; margin: 0 auto; padding: 48px 0 16px; }
.about h1 { font-weight: 300; font-size: clamp(28px, 5vw, 44px); margin: 0 0 24px; }
.about-main p { font-size: 17px; line-height: 1.7; color: #d4d4d4; margin: 0 0 18px; max-width: 65ch; }
.about a { color: #fff; text-decoration-color: #666; text-underline-offset: 3px; }
.about a:hover { text-decoration-color: #fff; }
.about-photos { display: flex; gap: 10px; margin: 0 0 28px; }
.about-photos img { flex-basis: 0; flex-shrink: 1; min-width: 0; height: auto; border-radius: 3px; }
.about-photos.n1 img { flex: none; max-width: min(100%, 560px); }
.about-side section { border-top: 1px solid #2a2a2a; padding: 16px 0 20px; }
.about-side section:first-child { border-top: 0; padding-top: 0; }
.about-side h2 { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; margin: 0 0 10px; }
.about-side ul { list-style: none; margin: 0; padding: 0; }
.about-side li { font-size: 14px; line-height: 1.55; color: #cfcfcf; margin: 0 0 8px; }
.about-side strong { color: #fff; font-weight: 600; }

footer { color: #666; font-size: 13px; text-align: center; padding: 24px; border-top: 1px solid #1e1e1e; }

/* viewer */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .96); display: none; touch-action: pan-y pinch-zoom; }
.lb.open { display: block; }
.lb picture, .lb img { position: absolute; inset: 0; margin: auto; max-width: 100vw; max-height: 100vh; width: auto; height: auto; }
.lb img { padding: 56px 72px; object-fit: contain; width: 100%; height: 100%; opacity: 0; transition: opacity .25s; }
.lb img.ready { opacity: 1; }
.lb button { position: absolute; background: none; border: 0; color: #ddd; cursor: pointer; padding: 16px; font-size: 32px; line-height: 1; opacity: .7; }
.lb button:hover { opacity: 1; }
.lb .prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lb .next { right: 4px; top: 50%; transform: translateY(-50%); }
.lb .close { right: 4px; top: 4px; font-size: 28px; }
.lb .count { position: absolute; left: 20px; top: 18px; color: #999; font-size: 14px; letter-spacing: .05em; }
.lb .spin { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; border: 2px solid #444; border-top-color: #bbb; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  :root { --row: 150px; --gap: 4px; }
  main { padding: 0 8px 32px; }
  .hero, .intro { padding: 28px 8px 20px; }
  .lb img { padding: 44px 0; }
  .about { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 8px 8px; }
  .about-photos { gap: 6px; }
  .lb .prev, .lb .next { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }