@font-face
{
  font-family: "Issey";
  src: url("../assets/fonts/Issey-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --wall-height: 88vh;
  --floor-height: 12vh;
}

.gallery-hall
{
  --artwork-spotlight-color: #ffffffaf;
  --wall-spotlight-center: #ffffff32;
  --wall-spotlight-edge: #ffffff1c;
  --floor-tint-base: #6f533c;
  --floor-tint-color: color-mix(
    in srgb,
    var(--floor-tint-base) 70%,
    var(--wall-color, #D9C3AA) 30%
  );
  --floor-tint-top: color-mix(in srgb, var(--floor-tint-color) 10%, transparent);
  --floor-tint-bottom: color-mix(in srgb, var(--floor-tint-color) 31%, transparent);
  display: grid;
  grid-template-rows: var(--wall-height) var(--floor-height);
  scroll-behavior: smooth;
}

.gallery-hall[data-lighting="dark"]
{
  --artwork-spotlight-color: #ffffff45;
  --floor-tint-bottom: color-mix(in srgb, var(--floor-tint-color) 38%, transparent);
  --wall-spotlight-center: #ffffff20;
  --wall-spotlight-edge: #ffffff10;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.gallery-hall::-webkit-scrollbar {
  display: none;
}

.floor,
.gallery-door-depth::after,
.gallery-door-leaf::after
{
  background-color: white;
  background-image: url(https://ik.imagekit.io/gale/floor);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 700px 12vh;
}

.floor
{
  /* Tint the hall floor only; doorway planes retain the raw wood. */
  background-image:
    linear-gradient(to bottom, var(--floor-tint-top), var(--floor-tint-bottom)),
    url(https://ik.imagekit.io/gale/floor);

}

.wall
{
  position: relative;
  background-color: var(--wall-color, #D9C3AA);
  background-image: linear-gradient(
    to bottom,
    rgb(45 35 28 / 8%),
    rgb(255 255 255 / 18%)
  );
  box-shadow:
    inset 0 -3px color-mix(
      in srgb,
      var(--wall-color, #D9C3AA) 92%,
      black
    ),
    inset 0 -7px color-mix(
      in srgb,
      var(--wall-color, #D9C3AA) 96%,
      black
    );
  display: grid;
  grid-auto-flow: column;
  place-items: center;
}

.hall-page .wall
{
  padding-inline-start: 4rem;
}

.exit-sign
{
  --exit-casing-color: #D0D6CB;
  --exit-glow-color: #75d998;

  position: absolute;
  top: -4px;
  left: 1vw;
  z-index: 2;
  align-self: start;
  width: 56px;
  margin: 0;
  padding-top: 7px;
  color: inherit;
  text-decoration: none;
}

.exit-sign-hanger,
.exit-sign-back,
.exit-sign-front
{
  display: block;
  border-radius: 1.5px;
  background: var(--exit-casing-color);
}

.exit-sign-hanger
{
  position: absolute;
  top: 0;
  left: 50%;
  width: 72%;
  height: 11px;
  transform: translateX(-50%);
  box-shadow:
    inset -1px 1px 1px #ffffff77,
    inset 1px -1px 1px #6870684a,
    0 1px 1px #0000001a;
}

.exit-sign-back
{
  position: relative;
  padding: 2px 2px 6px;
  box-shadow:
    inset -1px 1px 1px #ffffff34,
    inset 1px -1px 1px #68706849,
    0 1px 5px #00000022;
}

.exit-sign-front
{
  position: relative;
  padding: 2px 2px 4px;
  box-shadow:
    inset 1px -1px 2px #68706866,
    0 0 0.5px #00000022;
}

.exit-sign-image
{
  display: block;
  background: #9BACA9;
}

.exit-sign img
{
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 1.5px var(--exit-glow-color));
  transition: filter 100ms ease-out;
}

.exit-sign:hover img,
.exit-sign:focus-visible img
{
  filter:
    brightness(2.6)
    saturate(1.5)
    drop-shadow(0 0 2px var(--exit-glow-color));
}

.wall-text
{
  font-family: "Issey", sans-serif;
  width: min(72vw, 450px);
  margin: 0 15vw;
  color: var(--wall-text-color, #371a10b5);
  font-size: 1.2rem;
  line-height: 1.6;
}

.wall-text h1
{
  font-size: 1.4rem;
  font-weight: 500;
}

.wall-text-link
{
  display: inline-flex;
  gap: 0.25em;
  align-items: baseline;
  margin-top: 0.6em;
  color: inherit;
  font-size: 0.85em;
  text-underline-offset: 0.15em;
}

.gallery-entry
{
  position: relative;
  align-self: stretch;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(72vw, 450px);
  margin: 0 15vw;
}

.gallery-entry .wall-text
{
  width: 100%;
  margin: 0;
}

.wall-text-spotlight::before
{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 145%;
  height: 78%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    var(--wall-spotlight-center, #ffffff32) 0%,
    var(--wall-spotlight-edge, #ffffff1c) 38%,
    transparent 72%
  );
  pointer-events: none;
}

.wall-text-spotlight .wall-text
{
  position: relative;
  z-index: 1;
}

.enter-text
{
  position: absolute;
  bottom: -8vh;
  left: 50%;
  transform: translateX(-50%) perspective(120px) rotateX(48deg) scaleY(1.25);
  transform-origin: top center;
  color: var(--enter-text-color, var(--wall-text-color, #371a10b5));
  font-family: Times, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

.enter-text:hover
{
  cursor: pointer;
}

img.artwork
{
  height: 70vh;
  max-height: 70vh;
  margin: 0 max(200px, 15vw);
  -webkit-box-reflect: below 13vh linear-gradient(transparent, #00000012);
  box-shadow:
    0 2px 3px 0px #00000045,       /* form shadow */
    -1px 9px 3px 2px #00000030,    /* cast shadow */
    0px -7px 100px 25px var(--artwork-spotlight-color, #ffffffaf); /* spotlight */
}

.exhibit
{
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 max(200px, 15vw);
}

/* Tint for the frame. */
.exhibit::after
{
  content: "";
  position: absolute;
  inset: 0;
  border: 16px solid var(--frame-tint, transparent);
  pointer-events: none;
}

.gallery-hall[data-frames="none"] .exhibit::after
{
  display: none;
}

.gallery-hall[data-frames="none"] img.framed
{
  border: 0;
  border-radius: 3px;
}

.exhibit img.artwork
{
  margin: 0;
}

.portrait-study-group
{
  display: flex;
  align-items: center;
  gap: 3vw;
  margin: 0 max(200px, 15vw);
}

.portrait-study-group > .exhibit
{
  margin: 0;
}

.portrait-study-group > .exhibit:first-child > .museum-label
{
  right: auto;
  left: -88px;
}

.portrait-maquette img.artwork
{
  height: 26vh;
  max-height: 26vh;
  border: 0;
  -webkit-box-reflect: initial !important;
}

img.tall
{
  height: 70vh;
  max-height: 70vh;
  -webkit-box-reflect: below 15vh linear-gradient(transparent, #00000012);
}

img.less-tall
{
  height: 50vh;
  max-height: 50vh;
  -webkit-box-reflect: below 25vh linear-gradient(transparent, #00000012);
}

img.taller
{
  height: 75vh;
  max-height: 75vh;
  -webkit-box-reflect: below 10.5vh linear-gradient(transparent, #00000012);
}

img.framed
{
  border-image: url(https://ik.imagekit.io/gale/gallery-frames/wood-frame.png) 179 164 163 194 stretch stretch;
  border-color: #cfbab0;
  border-style: solid;
  border-width: 16px;
}

.museum-label
{
  width: 64px;
  padding: 6px;
  border-style: solid;
  border-width: 0.5px;
  border-color:
    #fffdf8  /* top: light */
    #ebe7df  /* right: slightly light */
    #b8b2aa  /* bottom: dark */
    #d1cbc2; /* left: slightly dark */
  background: var(--museum-label-bg, #eeece7);
  color: #2d2924;
  box-shadow: 1px 1px 2px #00000024;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  font-size: 0.17rem;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.45;
  transition: transform 200ms ease-out;
}

.museum-label:focus,
.museum-label:focus-visible
{
  outline: none;
}

.exhibit > .museum-label
{
  position: absolute;
  right: -88px;
  bottom: 2vh;
  z-index: 2;
  margin: 0;
}

.museum-label h2,
.museum-label p
{
  margin: 0;
}

.museum-label h2
{
  margin-bottom: 0.2em;
  font-size: 1.35em;
  font-weight: 600;
  font-style: italic;
  line-height: inherit;
}

.museum-label .museum-year
{
  margin-left: 0.25em;
  font-weight: 400;
  font-style: normal;
}

.museum-label p
{
  line-height: inherit;
}

.museum-label .museum-metadata
{
  margin-bottom: 0.7em;
}

.museum-label-dialog
{
  max-width: min(520px, calc(100vw - 48px));
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

html.museum-label-open,
html.museum-label-open body
{
  overflow: hidden;
}

.museum-label-dialog::backdrop
{
  background: #17130fb3;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.museum-label-dialog.is-open::backdrop
{
  opacity: 1;
}

.museum-label-dialog .museum-label
{
  position: relative;
  margin: 0;
  cursor: zoom-out;
  transform-origin: center;
  transform: translate(
    var(--museum-label-origin-x, 0),
    var(--museum-label-origin-y, 0)
  ) scale(var(--museum-label-closed-scale, 1));
  line-height: 1.6;
}

.museum-label-dialog.is-open .museum-label
{
  transition-timing-function: ease-out;
  transform: translate(0, 0) scale(1);
}

.museum-label-dialog.is-positioning .museum-label
{
  transition: none;
}

@media (prefers-reduced-motion: reduce)
{
  .museum-label
  {
    transition-duration: 0ms;
  }
}