:root {
  color-scheme: dark;
  --ground: #050605;
  --ink: #f3f1e9;
  --muted: rgba(243, 241, 233, .48);
  --faint: rgba(243, 241, 233, .14);
  --line: rgba(243, 241, 233, .2);
  --glow-rgb: 74 109 255;
  --pointer-x: 50%;
  --pointer-y: 48%;
  --focus-x: 50%;
  --focus-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --drag-x: 0px;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 300;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
a {
  color: inherit;
  font: inherit;
}

button { -webkit-tap-highlight-color: transparent; }
img { display: block; height: auto; max-width: 100%; }

.skip-link {
  background: var(--ink);
  color: var(--ground);
  font-size: .68rem;
  left: 1rem;
  padding: .75rem 1rem;
  position: fixed;
  text-decoration: none;
  text-transform: uppercase;
  top: 1rem;
  transform: translateY(-200%);
  z-index: 100;
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  align-items: center;
  display: flex;
  height: 4.5rem;
  justify-content: space-between;
  left: 0;
  padding: 0 clamp(1.25rem, 2.8vw, 3rem);
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 450ms ease;
  z-index: 20;
}

.site-header > * { pointer-events: auto; }

.wordmark {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-header nav {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.chrome-button {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: .65rem;
  font-weight: 300;
  letter-spacing: .08em;
  min-height: 2.75rem;
  padding: .75rem 0;
  position: relative;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.chrome-button::after {
  background: currentColor;
  bottom: .48rem;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
  width: 100%;
}

.chrome-button:hover,
.chrome-button:focus-visible { color: var(--ink); }

.chrome-button:hover::after,
.chrome-button:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.installation,
.stage {
  height: 100svh;
  min-height: 32rem;
  width: 100%;
}

.stage {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.stage::before {
  background:
    linear-gradient(90deg, transparent 49.96%, rgba(255, 255, 255, .025) 50%, transparent 50.04%),
    linear-gradient(transparent 49.96%, rgba(255, 255, 255, .02) 50%, transparent 50.04%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.stage-glow {
  background:
    radial-gradient(
      circle 28rem at var(--pointer-x) var(--pointer-y),
      rgb(var(--glow-rgb) / .13),
      rgb(var(--glow-rgb) / .035) 38%,
      transparent 72%
    );
  filter: blur(18px);
  inset: -4rem;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 1.4s ease;
  z-index: -1;
}

body.is-ready .stage-glow { opacity: 1; }

.artwork-control {
  align-items: center;
  background: none;
  border: 0;
  cursor: zoom-in;
  display: flex;
  inset: 4.5rem 4rem 5.25rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: absolute;
  touch-action: none;
}

.artwork-viewport {
  aspect-ratio: 4 / 5;
  background: #080808;
  display: block;
  max-width: 100%;
  overflow: hidden;
  outline: 1px solid rgba(255, 255, 255, .1);
  position: relative;
  transform:
    perspective(80rem)
    translate3d(var(--drag-x), 0, 0)
    rotateX(var(--tilt-y))
    rotateY(var(--tilt-x));
  transition:
    opacity 260ms ease,
    transform 700ms cubic-bezier(.16, 1, .3, 1),
    width 700ms cubic-bezier(.16, 1, .3, 1);
  width: min(52vw, 61svh, 42rem);
  will-change: transform;
}

.artwork-viewport::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 0 5rem rgba(0, 0, 0, .08);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

#current-artwork {
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transform-origin: var(--focus-x) var(--focus-y);
  transition:
    filter 800ms ease,
    opacity 280ms ease,
    transform 900ms cubic-bezier(.16, 1, .3, 1);
  user-select: none;
  width: 100%;
  -webkit-user-drag: none;
}

.artwork-control:hover #current-artwork { filter: saturate(1.04); }

.artwork-control:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}

.stage.is-changing .artwork-viewport {
  opacity: 0;
  transform:
    perspective(80rem)
    translate3d(calc(var(--drag-x) * .25), 0, 0)
    scale(.985);
}

body.is-inspecting .artwork-control { cursor: zoom-out; }

body.is-inspecting #current-artwork {
  filter: saturate(1.08);
  transform: scale(1.72);
}

body.is-inspecting .site-header,
body.is-inspecting .nav-arrow,
body.is-inspecting .work-caption,
body.is-inspecting .interaction-hint,
body.is-inspecting .work-rail {
  opacity: .16;
}

.nav-arrow {
  align-items: center;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  height: 4rem;
  justify-content: center;
  position: absolute;
  top: calc(50% - 2rem);
  transition: color 180ms ease, opacity 450ms ease, transform 180ms ease;
  width: 4rem;
  z-index: 4;
}

.nav-previous { left: clamp(.25rem, 2vw, 2rem); }
.nav-next { right: clamp(.25rem, 2vw, 2rem); }

.nav-arrow:hover,
.nav-arrow:focus-visible { color: var(--ink); }
.nav-arrow:active { transform: scale(.92); }

.nav-arrow:focus-visible,
.work-rail button:focus-visible,
.index-work:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.work-caption {
  align-items: baseline;
  bottom: 1.75rem;
  display: flex;
  gap: 1.2rem;
  left: clamp(1.25rem, 2.8vw, 3rem);
  position: absolute;
  transition: opacity 450ms ease;
  z-index: 5;
}

.work-caption span,
.work-caption h1 {
  font-size: .62rem;
  font-weight: 300;
  letter-spacing: .07em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.work-caption h1 { color: var(--ink); }
.work-number,
.work-kind { color: var(--muted); }

.interaction-hint {
  bottom: 1.68rem;
  color: var(--muted);
  font-size: .58rem;
  letter-spacing: .07em;
  margin: 0;
  position: absolute;
  right: clamp(1.25rem, 2.8vw, 3rem);
  text-transform: uppercase;
  transition: opacity 450ms ease;
  z-index: 5;
}

.coarse-pointer-hint { display: none; }

.work-rail {
  bottom: 1.45rem;
  display: flex;
  gap: .2rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity 450ms ease;
  z-index: 6;
}

.work-rail button {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  height: 1.5rem;
  padding: 0 .22rem;
  position: relative;
  width: 1.65rem;
}

.work-rail button::before {
  background: var(--faint);
  content: "";
  height: 1px;
  left: .22rem;
  position: absolute;
  right: .22rem;
  top: 50%;
  transition: background-color 180ms ease, transform 300ms cubic-bezier(.16, 1, .3, 1);
}

.work-rail button span {
  bottom: 1.6rem;
  font-size: .52rem;
  left: 50%;
  letter-spacing: .04em;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, .3rem);
  transition: opacity 180ms ease, transform 260ms ease;
}

.work-rail button:hover::before,
.work-rail button:focus-visible::before,
.work-rail button[aria-current="true"]::before {
  background: var(--ink);
  transform: scaleY(3);
}

.work-rail button:hover span,
.work-rail button:focus-visible span,
.work-rail button[aria-current="true"] span {
  opacity: 1;
  transform: translate(-50%, 0);
}

.overlay {
  background: rgba(5, 6, 5, .985);
  border: 0;
  color: var(--ink);
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0;
}

.overlay[open] { animation: overlay-enter 500ms cubic-bezier(.16, 1, .3, 1) both; }
.overlay::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(12px); }
.overlay[open].is-closing {
  animation: overlay-exit 320ms cubic-bezier(.4, 0, 1, 1) both;
  pointer-events: none;
}

.overlay[open].is-closing::backdrop {
  animation: backdrop-exit 320ms ease both;
}

.overlay-header {
  align-items: center;
  display: flex;
  height: 4.5rem;
  justify-content: space-between;
  left: 0;
  padding: 0 clamp(1.25rem, 2.8vw, 3rem);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

.overlay-header p {
  color: var(--muted);
  font-size: .65rem;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

.index-overlay {
  height: 100dvh;
  overflow: auto;
  width: 100vw;
}

.index-grid {
  align-items: center;
  display: flex;
  gap: clamp(.35rem, .8vw, .9rem);
  min-height: 100dvh;
  padding: 5.5rem clamp(1rem, 2vw, 2rem) 3rem;
}

.index-work {
  background: none;
  border: 0;
  cursor: pointer;
  display: grid;
  flex: 1 1 0;
  gap: .85rem;
  min-width: 0;
  opacity: .48;
  padding: 0;
  text-align: left;
  transition:
    flex 700ms cubic-bezier(.16, 1, .3, 1),
    opacity 300ms ease,
    transform 300ms ease;
}

.index-work:hover,
.index-work:focus-visible {
  flex: 2.2 1 0;
  opacity: 1;
}

.index-work:active { transform: scale(.98); }

.index-work img {
  aspect-ratio: 4 / 5;
  height: min(64svh, 43rem);
  object-fit: cover;
  outline: 1px solid rgba(255, 255, 255, .08);
  transition: filter 400ms ease, object-position 600ms ease;
  width: 100%;
}

.index-work span {
  color: var(--muted);
  display: flex;
  font-size: .56rem;
  gap: .65rem;
  letter-spacing: .05em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.index-work b {
  color: var(--ink);
  font-weight: 300;
}

.about-overlay {
  border-left: 1px solid var(--line);
  height: 100dvh;
  margin-left: auto;
  overflow: auto;
  width: min(100vw, 42rem);
}

.about-overlay[open] {
  animation: about-enter 560ms cubic-bezier(.16, 1, .3, 1) both;
}

.about-overlay[open].is-closing {
  animation: about-exit 320ms cubic-bezier(.4, 0, 1, 1) both;
}

.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 7rem clamp(1.5rem, 7vw, 5rem) 4rem;
}

.about-index {
  color: var(--muted);
  font-size: .62rem;
  letter-spacing: .08em;
  margin: 0 0 2.25rem;
  text-transform: uppercase;
}

.about-content h2 {
  font-size: clamp(1.75rem, 3.25vw, 3.1rem);
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1.1;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

.about-byline {
  color: var(--ink);
  font-size: .58rem;
  letter-spacing: .06em;
  margin: 1.5rem 0 0;
  text-transform: uppercase;
}

.about-copy {
  color: rgba(243, 241, 233, .7);
  display: grid;
  font-size: .74rem;
  gap: 1.15rem;
  line-height: 1.8;
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 2.5rem;
  max-width: 38rem;
}

.about-copy p { margin: 0; }

.about-copy blockquote {
  border-left: 1px solid var(--line);
  color: var(--ink);
  margin: .25rem 0;
  padding: 0 0 0 1.2rem;
}

.about-copy strong {
  color: var(--ink);
  font-weight: 400;
}

.about-copy .about-intent { color: var(--ink); }

.about-content dl { margin: 0; }

.about-content dl div {
  border-top: 1px solid var(--faint);
  display: grid;
  font-size: .58rem;
  grid-template-columns: 6rem 1fr;
  letter-spacing: .05em;
  padding: .9rem 0;
  text-transform: uppercase;
}

.about-content dt { color: var(--muted); }
.about-content dd { margin: 0; }

.about-content a {
  color: var(--ink);
  text-decoration-color: var(--line);
  text-underline-offset: .24em;
  transition: text-decoration-color 180ms ease;
}

.about-content a:hover,
.about-content a:focus-visible { text-decoration-color: var(--ink); }

.screen-reader-status {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@keyframes overlay-enter {
  from { opacity: 0; transform: translateY(.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes overlay-exit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-.5rem); }
}

@keyframes about-enter {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes about-exit {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes backdrop-exit {
  from { background: rgba(0, 0, 0, .72); backdrop-filter: blur(12px); }
  to { background: transparent; backdrop-filter: blur(0); }
}

@media (max-width: 900px) {
  .artwork-control { inset: 4rem 2.25rem 6.5rem; }
  .artwork-viewport { width: min(calc(100vw - 4.5rem), 55svh); }
  .work-caption {
    align-items: flex-start;
    bottom: 3.4rem;
    flex-direction: column;
    gap: .45rem;
  }
  .work-kind { display: none; }
  .interaction-hint { bottom: 3.35rem; }
  .work-rail { bottom: 1.1rem; }
}

@media (max-width: 700px) {
  .site-header,
  .overlay-header { height: 4rem; }
  .site-header { padding: 0 1rem; }
  .site-header nav { gap: 1.2rem; }
  .wordmark,
  .chrome-button { font-size: .6rem; }
  .artwork-control { inset: 4rem .5rem 6.75rem; }
  .artwork-viewport { width: min(calc(100vw - 2rem), 56svh); }
  .nav-arrow {
    background: rgba(5, 6, 5, .64);
    height: 3rem;
    top: calc(50% - 1.5rem);
    width: 2.5rem;
  }
  .nav-previous { left: 0; }
  .nav-next { right: 0; }
  .work-caption { bottom: 3.25rem; left: 1rem; }
  .work-caption span,
  .work-caption h1 { font-size: .58rem; }
  .interaction-hint { display: none; }
  .work-rail {
    bottom: .85rem;
    gap: 0;
    width: calc(100% - 1.5rem);
  }
  .work-rail button { flex: 1; width: auto; }
  .work-rail button span { display: none; }
  .index-grid {
    align-items: start;
    display: grid;
    gap: 2.5rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 6rem 1rem 3rem;
  }
  .index-work {
    gap: .65rem;
    opacity: 1;
  }
  .index-work:hover,
  .index-work:focus-visible { flex: initial; }
  .index-work img {
    height: auto;
    object-fit: cover;
  }
  .about-overlay {
    border-left: 0;
    width: 100vw;
  }
  .about-content { padding: 6rem 1.25rem 3rem; }
  .about-content h2 { font-size: clamp(1.85rem, 8vw, 2.5rem); }
}

@media (pointer: coarse) {
  .fine-pointer-hint { display: none; }
  .coarse-pointer-hint { display: inline; }
  .index-work { opacity: 1; }
}

@media (max-height: 620px) and (min-width: 701px) {
  .artwork-viewport { width: min(46vw, 58svh, 34rem); }
  .about-copy { margin: 2rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .stage-glow { display: none; }
  .artwork-viewport { transform: none; }
}