* { box-sizing: border-box; }
html { color: #111; background: #fff; scrollbar-gutter: stable; }
body { margin: 0; font-family: "Times New Roman", Times, serif; }
body.has-dialog { overflow: hidden; }
a { color: inherit; }
button { color: inherit; font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid #555; outline-offset: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: -80px; left: 24px; background: #fff; padding: 12px; }
.skip-link:focus { top: 12px; }
.works-header { position: relative; height: 102px; display: flex; justify-content: center; align-items: flex-start; padding-top: 31px; }
.works-title { font-size: 18px; font-weight: 400; font-style: italic; text-decoration: none; }
.works-title:hover { opacity: .65; }
.menu-button { position: absolute; top: 23px; right: 30px; width: 44px; height: 44px; border: 0; background: transparent; padding: 14px 10px; display: flex; flex-direction: column; justify-content: space-between; }
.menu-button span { display: block; width: 24px; height: 1px; background: #111; }
.works-main { width: min(91%, 1680px); margin: 26px auto 0; }
.works-grid {
  --works-columns: 5;
  --works-column-gap: clamp(24px, 2.4vw, 46px);
  --work-width: calc((100% - (var(--works-columns) - 1) * var(--works-column-gap)) / var(--works-columns));
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: var(--works-column-gap);
  row-gap: 46px;
}
.work-item { min-width: 0; flex: 0 0 var(--work-width); margin-inline-end: var(--row-extra-gap, 0px); }
.work-item--landscape { flex-basis: calc(var(--work-width) * 1.5); container-type: inline-size; }
.work-item.is-revealing {
  animation: workReveal .9s ease-in-out both;
  animation-delay: var(--reveal-delay, 0ms);
}
.work-card { display: block; text-decoration: none; }
.work-image { display: flex; justify-content: center; align-items: center; width: 100%; aspect-ratio: 4 / 5; }
.work-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.work-item--landscape .work-image {
  aspect-ratio: auto;
  /* Keep captions aligned with portraits at 1.5 times their width. */
  height: calc(100cqw * 5 / 6);
}
.work-caption { display: block; margin: 13px auto 0; max-width: 100%; min-height: 40px; font-style: italic; font-size: 14px; line-height: 1.4; font-weight: 400; text-align: center; text-wrap: pretty; color: #333; }
.work-card:hover .work-caption { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.works-footer { margin: 84px 20px 26px; text-align: center; font-size: 10px; font-style: italic; color: #777; }
.fallback-nav { display: flex; justify-content: center; gap: 24px; margin: -14px 0 24px; font-size: 14px; font-style: italic; }
dialog { color: #111; border: 0; padding: 0; }
dialog::backdrop { background: rgb(0 0 0 / .22); }
.site-menu { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(280px, 85vw); height: 100%; height: 100dvh; max-height: none; max-width: none; background: #f3f3f1; padding: 120px 28px 32px; }
.site-menu[open] { display: flex; flex-direction: column; }
.menu-links { display: flex; flex-direction: column; gap: 18px; }
.menu-links a, .menu-instagram { text-decoration: none; font-size: 15px; font-style: italic; color: #2d3720; }
.menu-links a[aria-current] { opacity: .45; }
.menu-links a:hover, .menu-instagram:hover { text-decoration: underline; text-underline-offset: 3px; }
.menu-divider { width: 30px; height: 1px; background: #777; margin: 28px 0; }
.menu-footer { margin-top: auto; padding-top: 40px; font-size: 10px; font-style: italic; color: #777; }
.close-button { position: absolute; top: 23px; right: 30px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 0; z-index: 2; }
.close-button span { position: absolute; top: 21px; left: 10px; width: 24px; height: 1px; background: #111; transform: rotate(45deg); }
.close-button span + span { transform: rotate(-45deg); }
.project-viewer { position: fixed; inset: 0; margin: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; background: #fff; padding: 82px 64px 28px; }
.project-viewer[open] { display: flex; flex-direction: column; }
.project-viewer::backdrop { background: #fff; }
.viewer-stage { min-height: 0; flex: 1; display: flex; align-items: center; justify-content: center; position: relative; }
.viewer-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.viewer-image.is-loading { opacity: .25; }
.viewer-error { text-align: center; font-size: 14px; line-height: 1.6; }
.viewer-bottom { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 18px; width: min(100%, 740px); margin: 18px auto 0; align-items: center; }
.viewer-caption { text-align: center; }
.viewer-caption h2 { font-size: 14px; font-style: italic; line-height: 1.45; font-weight: 400; margin: 0; }
.viewer-count { font-size: 12px; line-height: 1.4; color: #666; margin: 5px 0 0; }
.viewer-arrow { border: 0; background: transparent; font-size: 24px; height: 44px; width: 44px; }
.viewer-arrow:disabled { visibility: hidden; }
@keyframes workReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (min-width: 1900px) {
  .works-main { margin-top: 40px; }
}
@media (max-width: 1099px) {
  .works-grid { --works-columns: 3; --works-column-gap: 28px; justify-content: flex-start; row-gap: 38px; }
}
@media (max-width: 699px) {
  .works-header { height: 84px; padding-top: 27px; }
  .works-title { font-size: 17px; }
  .menu-button, .close-button { right: 12px; top: 18px; }
  .works-main { width: calc(100% - 36px); margin-top: 20px; }
  .works-grid { --works-columns: 2; --works-column-gap: 18px; row-gap: 27px; }
  .work-item--landscape { margin-inline: auto; }
  .work-item--landscape .work-image,
  .work-item--landscape .work-image img { height: auto; }
  .work-caption { font-size: 12px; line-height: 1.45; margin-top: 10px; min-height: 0; }
  .works-footer { margin-top: 56px; font-size: 9px; }
  .project-viewer { padding: 72px 18px 24px; }
  .viewer-bottom { gap: 8px; margin-top: 20px; }
  .viewer-caption h2 { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .work-item.is-revealing {
    animation: none;
  }
}