:root {
  color-scheme: dark;
  --black: #000;
  --text: #e4e0d7;
  --muted: #aaa59b;
  --frame: 24px;
  --light-blur: 16px;
  --light-spread: 8px;
  --door-time: 1.35s;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 280px;
  min-height: 100%;
  margin: 0;
  background: var(--black);
}

body {
  overflow: hidden;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.exhibit {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y pinch-zoom;
  background: var(--black);
}

.viewing-space {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 52px 84px 76px;
  background: transparent;
}

.status {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .025em;
  text-align: center;
}

.artwork {
  width: fit-content;
  height: auto;
  margin: 0;
  background: transparent;
}

.artwork-light {
  position: relative;
  isolation: isolate;
  width: fit-content;
  height: auto;
  padding: var(--frame);
  background: var(--black);
}

.artwork-light::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  box-shadow: 0 0 var(--light-blur) var(--light-spread) rgb(232 225 211 / 13%);
  content: "";
  pointer-events: none;
}

.artwork-light img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 1;
  transition: opacity 850ms ease;
  border: 0;
  background: transparent;
}

.artwork.is-fading-out .artwork-light img { opacity: 0; transition: opacity 450ms ease; }

.artwork.is-portrait .artwork-light img {
  width: auto;
  height: min(80vh, calc(100dvh - 176px));
  max-width: calc(100vw - 216px);
}

.artwork.is-landscape .artwork-light img {
  width: min(80vw, calc(100vw - 216px));
  height: auto;
  max-height: calc(100dvh - 176px);
}

.artwork.is-square .artwork-light img {
  width: min(80vw, 80vh, calc(100vw - 216px));
  height: auto;
  max-height: calc(100dvh - 176px);
}

.artwork-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.artwork-light.is-unavailable .artwork-caption {
  position: static;
  width: auto;
  height: auto;
  padding: 24px;
  color: var(--muted);
  clip-path: none;
  font-size: 13px;
  white-space: normal;
}

.hall-title {
  position: absolute;
  z-index: 2;
  top: clamp(20px, 5vh, 46px);
  left: 50%;
  margin: 0;
  color: #d3cec3;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 900ms ease, transform 900ms ease;
  white-space: nowrap;
}

.hall-title.is-visible { opacity: .72; transform: translate(-50%, 0); }
.hall-title.is-faded { opacity: 0; }

.nav-control {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  width: 48px;
  height: 64px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(231 225 214 / 14%);
  border-radius: 2px;
  background: rgb(15 15 14 / 38%);
  color: #d6d1c8;
  font: 300 39px/1 Arial, Helvetica, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 300ms ease, background-color 180ms ease, border-color 180ms ease;
  cursor: pointer;
}

.nav-previous { left: 18px; }
.nav-next { right: 18px; }
.exit-control {
  top: min(calc(50% + 48px), calc(100% - 80px - env(safe-area-inset-bottom)));
  right: max(18px, env(safe-area-inset-right));
  display: flex;
  width: 60px;
  height: 72px;
  flex-direction: column;
  gap: 4px;
  border-radius: 2px;
  font: 500 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .04em;
  transform: none;
}
.exit-control svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.exhibit.ui-visible .nav-control { opacity: .72; pointer-events: auto; }
.exhibit.ui-visible .nav-control:hover { border-color: rgb(231 225 214 / 34%); background: rgb(35 34 32 / 78%); opacity: 1; }
.nav-control:focus-visible { outline: 2px solid #e1d8c6; outline-offset: 4px; opacity: 1; pointer-events: auto; }

.artwork-info {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .035em;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translateY(3px);
  transition: opacity 300ms ease, transform 300ms ease;
}

.exhibit.ui-visible .artwork-info { opacity: .82; transform: translateY(0); }
.artwork-placard {
  display: grid;
  max-width: min(86vw, 280px);
  gap: 3px;
  padding: 8px 16px;
  border: 1px solid rgb(231 225 214 / 10%);
  border-radius: 2px;
  background: rgb(10 10 10 / 86%);
  text-align: center;
}
.placard-title { color: #e5e0d7; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.placard-creator { color: #aaa59b; font-size: 11px; }
.placard-carrots { color: #827e76; font-size: 10px; }
.exhibit-position { color: #77736c; font-size: 9px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.about-details { display: contents; }
.about-toggle { display: none; }

@media (min-width: 641px) and (min-height: 641px) {
  .artwork-placard {
    grid-template-areas:
      "title carrots"
      "creator creator";
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 2px;
    text-align: left;
  }
  .placard-title { grid-area: title; }
  .placard-carrots {
    grid-area: carrots;
    color: #827e76;
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
  }
  .placard-creator { grid-area: creator; text-align: left; }
  .placard-creator::before { content: "By "; }
}

.entry-doors {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}

.door {
  position: relative;
  background: linear-gradient(90deg, #0b0b0a, #151514 72%, #1c1b19);
  transition: transform var(--door-time) cubic-bezier(.72, 0, .22, 1);
}

.door::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  content: "";
  background: linear-gradient(transparent 8%, rgb(218 211 198 / 15%) 50%, transparent 92%);
}

.door-left { box-shadow: 14px 0 44px rgb(0 0 0 / 42%); }
.door-left::after { right: 0; }
.door-right { background: linear-gradient(270deg, #0b0b0a, #151514 72%, #1c1b19); box-shadow: -14px 0 44px rgb(0 0 0 / 42%); }
.door-right::after { left: 0; }
.entry-doors.is-open .door-left { transform: translateX(-101%); }
.entry-doors.is-open .door-right { transform: translateX(101%); }
.entry-doors.is-gone { display: none; }

.nav-control[hidden],
.artwork[hidden],
.artwork-info[hidden],
.status[hidden],
img[hidden] { display: none; }

@media (max-width: 640px), (max-height: 640px) {
  :root { --frame: 16px; }
  .viewing-space { padding: 0; }
  .artwork.is-portrait .artwork-light,
  .artwork.is-landscape .artwork-light,
  .artwork.is-square .artwork-light {
    width: 100vw;
  }
  .artwork.is-portrait .artwork-light img,
  .artwork.is-landscape .artwork-light img,
  .artwork.is-square .artwork-light img {
    width: 100%;
    height: auto;
    max-height: none;
  }
  .artwork.is-portrait .artwork-light img { max-width: none; }
  .artwork-light::before { display: none; }
  .nav-control {
    top: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 40px;
    height: 54px;
    font-size: 34px;
    transform: none;
  }
  .nav-previous { right: auto; left: calc(50% - 76px); }
  .nav-next { right: auto; left: calc(50% + 36px); }
  .exit-control {
    right: auto;
    bottom: max(15px, env(safe-area-inset-bottom));
    left: calc(50% - 24px);
    width: 48px;
    height: 48px;
    font-size: 11px;
  }
  .exit-control svg { width: 20px; height: 20px; }
  .artwork-info {
    right: calc(50% + 84px);
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    align-items: flex-start;
    font-size: 11px;
    text-align: left;
    transform: none;
  }
  .exhibit.ui-visible .artwork-info { transform: none; }
  .about-details { display: none; }
  .about-details {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    width: min(86vw, 280px);
  }
  .about-toggle {
    display: inline-flex;
    min-height: 42px;
    max-width: 100%;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid rgb(231 225 214 / 14%);
    border-radius: 2px;
    background: rgb(15 15 14 / 38%);
    color: #aaa59b;
    font: 500 10px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .04em;
    pointer-events: auto;
    cursor: pointer;
  }
  .about-toggle:hover,
  .about-toggle:focus-visible {
    border-color: rgb(231 225 214 / 34%);
    background: rgb(35 34 32 / 78%);
    color: #e4e0d7;
  }
  .about-toggle:focus-visible { outline: 2px solid #e1d8c6; outline-offset: 4px; }
  .about-chevron { font-size: 10px; }
  .artwork-info.is-expanded .about-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .artwork-info.is-expanded .artwork-placard {
    max-width: 100%;
    grid-template-areas:
      "title carrots"
      "creator creator";
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 3px;
  }
  .artwork-info.is-expanded .placard-title { grid-area: title; text-align: left; }
  .artwork-info.is-expanded .placard-carrots { grid-area: carrots; white-space: nowrap; }
  .artwork-info.is-expanded .placard-creator { grid-area: creator; text-align: left; }
  .artwork-info.is-expanded .placard-creator::before { content: "by "; }
  .exhibit-position {
    position: fixed;
    z-index: 3;
    right: 12px;
    bottom: max(32px, calc(env(safe-area-inset-bottom) + 32px));
    text-align: right;
  }
}

@media (orientation: landscape) and (max-height: 640px) {
  .artwork.is-portrait .artwork-light,
  .artwork.is-landscape .artwork-light,
  .artwork.is-square .artwork-light {
    width: fit-content;
    height: auto;
  }
  .artwork.is-portrait .artwork-light img,
  .artwork.is-landscape .artwork-light img,
  .artwork.is-square .artwork-light img {
    width: auto;
    height: calc(100dvh - var(--frame) - var(--frame));
    max-width: none;
    max-height: none;
  }
  .nav-previous,
  .nav-next {
    top: calc(50% - 27px);
    bottom: auto;
  }
  .nav-previous { right: auto; left: 7px; }
  .nav-next { right: 7px; left: auto; }
  .exit-control {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
  }
  .artwork-info {
    top: auto;
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    width: min(24vw, 180px);
    align-items: flex-start;
    text-align: left;
  }
  .about-details { width: min(42vw, 280px); }
  .exhibit-position {
    top: auto;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .artwork-placard {
    max-width: 100%;
    padding: 6px 8px;
  }
  .exhibit-position { text-align: right; }
}

@media (hover: none) {
  .exhibit:not(.ui-visible) .nav-control { opacity: .76; pointer-events: auto; }
  .exhibit:not(.ui-visible) .artwork-info { opacity: .78; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; }
  .door { transition-duration: 140ms; }
  .artwork-light img, .hall-title, .nav-control, .artwork-info { transition-duration: 120ms; }
  .artwork.is-fading-out .artwork-light img { transition-duration: 120ms; }
}

@media (forced-colors: active) {
  .nav-control { border: 1px solid ButtonText; color: ButtonText; }
  .nav-control:focus-visible { outline: 2px solid Highlight; }
}