@font-face {
  font-family: "Syne";
  src: url("assets/fonts/syne-extra-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #000;
  --menu: #2f5a4f;
  --gutter: 15px;
  --menu-size: 48px;
  --photo-gap: 12px;
  font-family: Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overscroll-behavior-x: none; }
body { overflow: hidden; }
.gallery, .menu, .about, .lightbox { overscroll-behavior-x: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 15px; top: -80px; z-index: 100; padding: 12px; background: white; }
.skip-link:focus { top: 15px; }

.site-header { position: fixed; z-index: 30; top: var(--gutter); left: var(--gutter); right: var(--gutter); pointer-events: none; }
.header-brand { font-size: 18px; line-height: 1; font-weight: 700; opacity: 0; visibility: hidden; pointer-events: auto; }
.menu-toggle { position: absolute; top: 0; right: 0; width: var(--menu-size); height: var(--menu-size); background: var(--paper); pointer-events: auto; }
.menu-toggle span { position: absolute; left: calc(50% - 15px); top: calc(50% - 1px); width: 30px; height: 2px; background: var(--ink); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.menu-toggle span:first-child { transform: translateY(-5px); }
.menu-toggle span:last-child { transform: translateY(5px); }
.menu-toggle:hover { opacity: .8; }
.menu-toggle:focus-visible { outline-width: 2px; outline-offset: 3px; }

.gallery { position: fixed; inset: 0; overflow: clip; background: var(--paper); touch-action: none; cursor: grab; outline: none; }
.gallery.dragging { cursor: grabbing; }
.canvas { position: absolute; inset: 0; transition: opacity 220ms ease; }
.photo-open .canvas { opacity: 0; }
.photo-tile { position: absolute; top: 0; left: 0; display: grid; place-items: center; will-change: transform; padding: calc(var(--photo-gap) / 2); }
.photo { display: block; background: transparent; cursor: inherit; max-width: 100%; max-height: 100%; }
.photo img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.photo:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.photo.failed { background: #eee; color: #222; font-size: 14px; padding: 16px; }
.wordmark { position: fixed; z-index: 25; bottom: 15px; left: 15px; margin: 0; padding: 8px 12px 10px; background: var(--paper); pointer-events: none; font-family: "Syne", Helvetica, sans-serif; font-size: clamp(36px, 3.6vw, 56px); font-weight: 800; letter-spacing: -.04em; line-height: .85; }
.motion-toggle { position: fixed; z-index: 25; right: var(--gutter); bottom: 15px; display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 10px 12px; background: var(--paper); font-size: 14px; font-weight: 700; }
.motion-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: round; }
.motion-toggle:hover { color: var(--menu); }
.menu-open .motion-toggle, .about-open .motion-toggle, .photo-open .motion-toggle { display: none; }

.menu { position: fixed; z-index: 20; inset: 0; background: var(--menu); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .65s cubic-bezier(.76, 0, .24, 1), visibility .65s; }
.menu-contact { position: absolute; top: 15px; left: calc(25% + 11px); width: calc(50% - 15px); display: grid; grid-template-columns: 1fr 1fr; gap: 15px; font-size: 18px; line-height: 1; font-weight: 700; }
.menu-contact div { display: flex; flex-direction: column; gap: 6px; }
.menu-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.menu-links { position: absolute; top: 24.6%; left: calc(50% + 7.5px); display: flex; flex-direction: column; gap: 15px; }
.menu-links a { display: table; width: fit-content; font-weight: 700; font-size: clamp(36px, 4.55vw, 80px); line-height: .9; letter-spacing: -.045em; transition: opacity .18s; }
.menu-links a:hover, .menu-links a:focus-visible { opacity: .6; }
.menu-preview { position: absolute; left: var(--gutter); top: 80px; width: calc(50% - 30px); height: calc(100% - 160px); object-fit: contain; opacity: 0; transition: opacity .2s; pointer-events: none; }
.menu-preview.visible { opacity: 1; }
.copyright { position: absolute; right: 15px; bottom: 15px; margin: 0; font-size: 18px; line-height: 1; font-weight: 700; }
.menu-open { --ink: #fff; color: var(--ink); }
.menu-open .menu { visibility: visible; clip-path: inset(0); }
.menu-open .wordmark { background: transparent; }
.menu-open .header-brand, .about-open .header-brand { opacity: 1; visibility: visible; }
.menu-open .menu-toggle { background: transparent; }
.menu-open .menu-toggle span:first-child { transform: rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: rotate(-45deg); }

.about { position: fixed; inset: 0; overflow-y: auto; background: #e3e2e2; padding: 120px 15px 60px; display: grid; grid-template-columns: minmax(0, 580px); justify-content: center; align-items: start; }
.about-copy { max-width: 580px; padding-right: 30px; }
.about h2 { font-weight: 700; font-size: clamp(42px, 4.55vw, 76px); line-height: .98; letter-spacing: -.045em; margin: 0 0 35px; }
.about p { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; margin-bottom: 40px; }
.about address { font-size: 18px; line-height: 1.35; font-style: normal; }
.about a:hover { text-decoration: underline; }
.about-open:not(.menu-open) .wordmark { display: none; }

.lightbox { position: fixed; inset: 16px 16px auto auto; z-index: 50; margin: 0; border: 0; width: 54vw; max-width: none; height: calc(100dvh - 32px); max-height: none; padding: 65px 50px 28px; background: var(--paper); overflow: hidden; }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr); }
.lightbox-figure { margin: 0; width: 100%; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.lightbox-figure img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; user-select: none; -webkit-user-drag: none; touch-action: pan-y; }
.lightbox.is-entering .lightbox-figure img { visibility: hidden; }
.photo-transfer { position: fixed; z-index: 60; display: block; object-fit: contain; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.lightbox-close { position: absolute; z-index: 2; width: 44px; height: 44px; top: 15px; right: 15px; background: var(--paper); }
.lightbox-close span { position: absolute; width: 38px; height: 3px; left: 3px; top: 21px; background: var(--ink); transform: rotate(45deg); }
.lightbox-close span:last-child { transform: rotate(-45deg); }
.lightbox-prev, .lightbox-next { position: absolute; top: calc(50% - 26px); width: 45px; height: 52px; background: transparent; }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }
.lightbox svg { display: block; margin: auto; width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-error { position: absolute; bottom: 50px; background: white; padding: 15px; }
.no-js { position: fixed; z-index: 40; top: 20%; padding: 30px; background: white; }

@media (max-width: 767px) {
  :root { --gutter: 12px; --menu-size: 44px; --photo-gap: 8px; }
  .wordmark { left: 12px; bottom: max(15px, env(safe-area-inset-bottom)); padding: 7px 10px 9px; font-size: 36px; }
  .motion-toggle { bottom: max(15px, env(safe-area-inset-bottom)); }
  .header-brand { font-size: 17px; }
  .menu-contact { left: 12px; top: 87px; width: calc(100% - 24px); font-size: 15px; grid-template-columns: 30% 70%; gap: 0; }
  .menu-links { left: 12px; top: 185px; gap: 15px; }
  .menu-links a { font-size: clamp(40px, 11.7vw, 64px); }
  .menu-preview { display: none; }
  .copyright { font-size: 12px; bottom: max(12px, env(safe-area-inset-bottom)); right: 12px; }
  .menu-open .wordmark { bottom: 48px; background: transparent; }
  .about { display: block; padding: 85px 20px 40px; }
  .about-copy { padding: 0; }
  .about h2 { font-size: 48px; }
  .about p { font-size: 20px; }
  .lightbox { inset: 10dvh 8px auto auto; width: calc(100% - 64px); height: 80dvh; padding: 58px 40px 20px; }
  .lightbox-prev { left: 0; width: 40px; }
  .lightbox-next { right: 0; width: 40px; }
  .lightbox svg { width: 25px; }
}

@media (max-height: 650px) and (min-width: 768px) {
  .menu-links { top: 110px; gap: 10px; }
  .menu-links a { font-size: 44px; }
}
@media (max-height: 720px) and (max-width: 767px) {
  .menu-links { top: 155px; gap: 12px; }
  .menu-links a { font-size: 36px; }
  .menu-open .wordmark { bottom: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .motion-toggle { display: none; }
}