@font-face {
  font-family: 'OHRI Futura';
  src: local('Futura Medium'), local('Futura-Medium');
  font-weight: 500;
  font-display: swap;
}
:root {
  --paper: #ffffff;
  --ink: #393d36;
  --quiet: #71766c;
  --type: 'OHRI Futura', Futura, 'Century Gothic', Arial, sans-serif;
  --work-space: 118svh;
  --work-size: min(54vw, 80svh);
  font-family: var(--type);
  background: var(--paper);
  color: var(--ink);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 1px solid #767b6f; outline-offset: 5px; }
img { display: block; }
header { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.brand {
  position: absolute;
  left: 35px;
  bottom: 30px;
  font-weight: 500;
  letter-spacing: .035em;
  font-size: 16px;
  pointer-events: auto;
  opacity: .55;
}
.icon {
  width: 48px;
  height: 48px;
  position: fixed;
  right: 24px;
  top: 20px;
  pointer-events: auto;
  z-index: 20;
  opacity: .35;
  transition: opacity .7s;
}
.icon:hover, .icon:focus-visible, .interacting .icon { opacity: .8; }
.menu span { position: absolute; width: 17px; height: 1px; left: 15px; top: 20px; background: currentColor; }
.menu span + span { top: 26px; }
.close::before, .close { opacity: .24; }
.interacting .close { opacity: .32; }
.close:hover, .close:focus-visible { opacity: .65; }
.close::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 24px;
  width: 17px;
  height: .65px;
  background: currentColor;
  transform: rotate(45deg);
}
.close::after { transform: rotate(-45deg); }
.close:focus { outline: none; }
.close:focus-visible::before, .close:focus-visible::after { height: 2px; }
/* One continuous surface; spacing belongs to the photographs, not visible panels. */
#exhibition { overflow: hidden; min-height: 100svh; }
.piece {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  position: relative;
  width: 100%;
  height: var(--work-space);
  cursor: zoom-in;
}
.piece:first-of-type { height: 100svh; }
.piece img {
  width: var(--work-size);
  aspect-ratio: 1;
  object-fit: contain;
  pointer-events: none;
}
.art-frame { display: block; }
.piece--tall img { width: min(48vw, 66svh); }
.piece[data-asset='4'] img { width: min(62vw, 84svh); }
.piece[data-asset='6'] img { width: min(51vw, 75svh); }
.sr-only, .skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus { position: fixed; top: 20px; left: 20px; width: auto; height: auto; clip-path: none; z-index: 100; background: var(--paper); padding: 15px; }
dialog {
  margin: 0;
  border: 0;
  padding: 0;
  background: var(--paper);
  color: inherit;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overscroll-behavior: contain;
}
dialog:focus { outline: none; }
dialog::backdrop { background: var(--paper); }
dialog[open] { animation: appear .55s ease; }
.contacts { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif; font-size: 20px; font-weight: 200; letter-spacing: .045em; }
.contacts a { padding: 8px; transition: opacity .3s; }
.contacts a:hover { opacity: .55; }
#view-dialog { overflow-y: auto; overflow-x: hidden; }
#viewer-stage { position: relative; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#viewer-stage:not(.zoomed) { touch-action: pan-y; }
#zoom-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
#view-image { width: min(82svh, 95vw); height: min(82svh, 95vw); object-fit: contain; transition: opacity .42s ease; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* Captions live below the first screen, leaving a full viewport to the work. */
.work-information { position: relative; margin: 0 auto; width: min(380px, 82vw); text-align: center; padding: 28px 0 100px; font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif; font-weight: 300; color: #62665e; }
.caption-reveal .work-information { opacity: 0; transform: translateY(14px); transition: opacity .85s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.caption-reveal .work-information.is-visible { opacity: 1; transform: translateY(0); }
#view-dialog[data-asset='4']:not(.is-zoomed) #view-image { width: min(92svh, 110vw); height: min(92svh, 110vw); }
#view-dialog[data-asset='6']:not(.is-zoomed) #view-image { width: min(77svh, 89vw); height: min(77svh, 89vw); }
.title-line { display: flex; justify-content: center; align-items: baseline; gap: 14px; }
#work-title { font-size: 16px; font-weight: 300; margin: 0; }
#work-year { color: var(--quiet); font-size: 12px; }
#work-concept { font-size: 15px; line-height: 1.6; margin: 18px 0; }
#work-material, #work-dimensions { font-size: 13px; color: var(--quiet); line-height: 1.6; margin: 5px 0; }
#work-material { margin-top: 14px; }
.is-zoomed .work-information { display: none; }
.zoomed#viewer-stage { display: block; overflow: auto; }
.zoomed #zoom-image { width: max(150vw, 1600px); height: max(150vh, 1600px); cursor: zoom-out; }
.zoomed #view-image { width: 100%; height: 100%; }
#view-dots { position: absolute; top: calc(100svh - 66px); left: 50%; transform: translateX(-50%); display: flex; z-index: 5; opacity: .45; transition: opacity .6s; }
#view-dots:hover, #view-dots:focus-within, .interacting #view-dots { opacity: 1; }
#view-dots button { height: 44px; width: 38px; display: grid; place-items: center; }
#view-dots span { height: 1px; width: 16px; background: #b7bab3; transition: background-color .42s ease; }
#view-dots [aria-pressed='true'] span { background: var(--ink); }
.fading { opacity: 0; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) {
  :root { --work-size: min(102vw, 72svh); --work-space: 120svh; }
  .brand { left: 22px; bottom: 22px; font-size: 14px; }
  .icon { right: 12px; top: 12px; opacity: .55; }
  .piece--tall img { width: min(95vw, 63svh); }

  #view-image { width: 115vw; height: min(115vw, 61svh); max-width: none; flex-shrink: 0; }
  .piece[data-asset='4'] img { width: min(122vw, 80svh); }
  .piece[data-asset='6'] img { width: min(96vw, 68svh); }
  #view-dialog[data-asset='4']:not(.is-zoomed) #view-image { width: min(125vw, 80svh); height: min(125vw, 80svh); }
  #view-dialog[data-asset='6']:not(.is-zoomed) #view-image { width: 108vw; height: min(108vw, 57svh); }
  .zoomed #zoom-image { width: 220vw; height: 170vh; }
  #view-dots { top: calc(100svh - 62px); opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}