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

:root {
  --photography-font:
    "Departure Mono",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;
  --photography-edge: 3.125rem;
  --photography-gallery-left: 30.2083vw;
  --photography-gallery-right: 5.787vw;
  --photography-gallery-top: 15.75rem;
}

.photography-page {
  position: relative;
  z-index: 1;
  display: none;
  min-height: 100vh;
  padding-bottom: 8rem;
  background: #000;
  color: #fff;
  font-family: var(--photography-font);
}

html[data-site-accent] .photography-page {
  background: var(--site-background);
  color: #000;
}

body[data-page="photography"] {
  --background: #000;
  --foreground: #fff;
  --bubble-blue: #fff;
  --overlay-foreground: #000;
  --projects-rail-left: var(--photography-edge);
  --projects-rail-top: var(--photography-edge);
  --bubble-size: 5.5rem;
  background: #000;
}

html[data-site-accent] body[data-page="photography"] {
  --background: var(--site-background);
  --foreground: #000;
  --bubble-blue: #000;
  --overlay-foreground: #fff;
  background: var(--site-background);
}

body[data-page="photography"] .photography-page {
  display: block;
}

body[data-page="photography"] .menu-bubble,
body[data-page="photography"] .bubble-core {
  border-radius: 0;
}

body[data-page="photography"] .navigation-list a {
  font-family: var(--photography-font);
}

body[data-page="photography"].is-intro .menu-bubble {
  width: var(--bubble-size);
  height: var(--bubble-size);
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

body[data-page="photography"].is-intro .bubble-core {
  transform: rotate(var(--bubble-rotation)) scale(1);
}

body[data-page="photography"] .menu-bubble:focus-visible {
  outline: none;
}

body[data-page="photography"].is-photography-keyboard .menu-bubble:focus-visible .bubble-core {
  opacity: 0.72;
}

body[data-page="photography"] .navigation-list a:not([aria-current="page"]) {
  color: rgb(0 0 0 / 30%);
}

body[data-page="photography"] .navigation-list a:hover,
body[data-page="photography"] .navigation-list a:focus-visible {
  color: #000;
}

html[data-site-accent] body[data-page="photography"] .navigation-list a:not([aria-current="page"]) {
  color: rgb(255 255 255 / 30%);
}

html[data-site-accent] body[data-page="photography"] .navigation-list a:hover,
html[data-site-accent] body[data-page="photography"] .navigation-list a:focus-visible {
  color: #fff;
}

.photography-years {
  position: fixed;
  top: var(--photography-gallery-top);
  left: var(--photography-edge);
  z-index: 3;
  display: grid;
  width: 23.25rem;
  gap: 0.75rem;
}

.photography-year {
  width: fit-content;
  border: 0;
  padding: 0;
  color: rgb(255 255 255 / 30%);
  background: transparent;
  font: 400 2rem/1.28 var(--photography-font);
  letter-spacing: -0.01em;
  outline: none;
  cursor: pointer;
  text-align: left;
  transition: color 160ms var(--ease-out);
}

.photography-year.is-active,
.photography-year:hover {
  color: #fff;
}

body.is-photography-keyboard .photography-year:focus-visible {
  color: #fff;
  opacity: 0.72;
}

.photography-year:disabled {
  cursor: default;
  opacity: 1;
}

html[data-site-accent] .photography-year {
  color: rgb(0 0 0 / 30%);
}

html[data-site-accent] .photography-year.is-active,
html[data-site-accent] .photography-year:hover,
html[data-site-accent] body.is-photography-keyboard .photography-year:focus-visible {
  color: #000;
}

.photography-gallery {
  --photography-grid-gap: 24px;
  --photography-grid-row-height: 20vw;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--photography-grid-row-height);
  grid-auto-flow: dense;
  gap: var(--photography-grid-gap);
  width: auto;
  margin-right: var(--photography-gallery-right);
  margin-left: var(--photography-gallery-left);
  padding-top: var(--photography-gallery-top);
}

.photography-card {
  --photography-grid-ratio: 3 / 2;
  position: relative;
  width: auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.photography-card.is-portrait {
  --photography-grid-ratio: 4 / 5;
  grid-row: span 2;
}

.photography-card.is-landscape:nth-child(4n + 3) {
  --photography-grid-ratio: 16 / 9;
}

.photography-card.is-landscape:nth-child(4n) {
  --photography-grid-ratio: 4 / 3;
}

.photography-card:last-child.is-landscape {
  --photography-grid-ratio: 3 / 2;
  grid-column: 1 / -1;
  grid-row: span 2;
}

.photography-thumbnail {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.photography-thumbnail .progressive-media {
  background: #000;
}

body.is-photography-keyboard .photography-thumbnail:focus-visible {
  opacity: 0.72;
}

.photography-detail {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 2rem;
  visibility: hidden;
  padding: 11.86vh var(--photography-edge) max(2rem, 8vh);
  overflow: hidden;
  background: #000;
  pointer-events: none;
}

html[data-site-accent] .photography-detail {
  background: var(--site-background);
}

.photography-detail.is-open {
  visibility: visible;
  pointer-events: auto;
}

.photography-detail-close {
  position: absolute;
  top: var(--photography-edge);
  right: var(--photography-edge);
  z-index: 2;
  display: grid;
  width: var(--bubble-size);
  height: var(--bubble-size);
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: 400 1.5rem/1 var(--photography-font);
  outline: none;
  opacity: 0.6;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  place-items: center;
}

html[data-site-accent] .photography-detail-close {
  color: #000;
}

body.is-photography-keyboard .photography-detail-close:focus-visible {
  opacity: 0.45;
}

.photography-detail-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
}

.photography-detail-image-button {
  display: grid;
  width: fit-content;
  max-width: 100%;
  height: fit-content;
  max-height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
  outline: none;
  opacity: 1;
  filter: none;
  touch-action: none;
  transform: translate3d(0, 0, 0);
  user-select: none;
  will-change: transform;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  place-items: center;
}

.photography-detail-image-button.is-dragging {
  cursor: grabbing;
}

.photography-detail-image-button:hover,
.photography-detail-image-button:focus-visible,
.photography-detail-image-button:active {
  background: transparent;
  opacity: 1;
  filter: none;
}

.photography-detail-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

.photography-detail-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.125rem;
  align-items: center;
  justify-self: center;
  width: min(100%, var(--photography-detail-controls-width, 100%));
  color: #fff;
  font: 400 1.25rem/1.5 var(--photography-font);
  white-space: nowrap;
}

html[data-site-accent] .photography-detail-controls {
  color: #000;
}

.photography-detail-direction {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: inherit;
  outline: none;
}

body.is-photography-keyboard .photography-detail-direction:focus-visible {
  opacity: 0.45;
}

.photography-detail-metadata {
  display: flex;
  justify-content: center;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgb(255 255 255 / 40%);
  font-size: 0.75em;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
}

html[data-site-accent] .photography-detail-metadata {
  color: rgb(0 0 0 / 40%);
}

.photography-detail-metadata span {
  min-width: 0;
}

body.is-photography-detail-open {
  overflow: hidden;
}

.photography-image-morph {
  position: fixed;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  will-change: left, top, width, height;
}

.photography-image-morph img {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  pointer-events: none;
  will-change: left, top, width, height;
}

.photography-image-push-frame {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.photography-image-push-frame img {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  pointer-events: none;
}

::view-transition-group(photography-image) {
  z-index: 50;
  animation-duration: 620ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(photography-image),
::view-transition-new(photography-image) {
  height: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
}

@keyframes photography-push-out-left {
  to {
    transform: translateX(-100%);
  }
}

@keyframes photography-push-in-right {
  from {
    transform: translateX(100%);
  }
}

@keyframes photography-push-out-right {
  to {
    transform: translateX(100%);
  }
}

@keyframes photography-push-in-left {
  from {
    transform: translateX(-100%);
  }
}

@keyframes photography-metadata-out {
  to {
    opacity: 0;
  }
}

@keyframes photography-metadata-in {
  from {
    opacity: 0;
  }
}

html[data-photography-transition="next"]::view-transition-old(photography-image) {
  animation: photography-push-out-left 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html[data-photography-transition="next"]::view-transition-new(photography-image) {
  animation: photography-push-in-right 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html[data-photography-transition="previous"]::view-transition-old(photography-image) {
  animation: photography-push-out-right 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html[data-photography-transition="previous"]::view-transition-new(photography-image) {
  animation: photography-push-in-left 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html[data-photography-transition]::view-transition-group(photography-metadata) {
  z-index: 52;
}

html[data-photography-transition]::view-transition-group(photography-controls) {
  z-index: 51;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-photography-transition]::view-transition-old(photography-controls),
html[data-photography-transition]::view-transition-new(photography-controls) {
  mix-blend-mode: normal;
}

html[data-photography-transition]::view-transition-old(photography-metadata) {
  animation: photography-metadata-out 180ms ease-out both;
}

html[data-photography-transition]::view-transition-new(photography-metadata) {
  animation: photography-metadata-in 260ms 160ms ease-out both;
}

@media (max-width: 980px) {
  :root {
    --photography-edge: 1.5rem;
    --photography-gallery-left: 1.5rem;
    --photography-gallery-right: 1.5rem;
    --photography-gallery-top: 10.5rem;
  }

  body[data-page="photography"] {
    --bubble-size: 3.5rem;
  }

  .photography-years {
    display: none;
  }

  .photography-detail {
    gap: 1.5rem;
    padding: 6.5rem var(--photography-edge) 2rem;
  }

  .photography-detail-image {
    max-height: calc(100vh - 13rem);
  }

  .photography-detail-controls {
    font-size: 0.875rem;
  }
}

@media (max-width: 620px) {
  .photography-gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .photography-card {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    aspect-ratio: var(--photography-grid-ratio);
  }

  .photography-card:last-child.is-landscape {
    grid-column: auto;
    grid-row: auto;
  }

  .photography-detail-metadata {
    display: block;
    white-space: normal;
  }

  .photography-detail-metadata span + span::before {
    content: " · ";
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(photography-image),
  ::view-transition-group(photography-controls) {
    animation-duration: 1ms;
  }
}