:root {color-scheme: dark;}
* {box-sizing: border-box;}
html {scroll-behavior: smooth; scroll-padding-top: 24px; scrollbar-gutter: stable;}
body {margin: 0; font-family: 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased;}
a {color: inherit; text-decoration: none;}
button {font: inherit; color: inherit; cursor: pointer; border: 0;}
button:disabled {cursor: default; opacity: .45;}
button, a {-webkit-tap-highlight-color: transparent;}
img {display: block; max-width: 100%;}
[hidden] {display: none !important;}
a:focus-visible, button:focus-visible, .beautiful-carousel:focus-visible {outline: 2px solid #fff; outline-offset: 5px;}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.skip {position: fixed; top: -80px; left: 20px; z-index: 20; padding: 14px 20px; background: white; color: black;}
.skip:focus {top: 12px;}
.beautiful {
  --paper: #000;
  --ink: #fff;
  --muted: #a1a1a1;
  --line: #292929;
  background: #000;
  color: #fff;
  padding-bottom: 0;
}

.beautiful-width {
  width: calc(100% - 80px);
  max-width: 1600px;
  margin-inline: auto;
}

.beautiful-header {
  min-height: 83px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  border-bottom: 1px solid #242424;
  font-size: 12px;
}

.beautiful-brand {font-weight: 600; letter-spacing: -.25px;}
.beautiful-brand span {color: #a1a1a1; font-weight: 400;}
.beautiful-header nav {display: flex; gap: 30px;}
.beautiful-header nav a {padding: 12px 0;}
.beautiful-header nav a:hover {text-decoration: underline; text-underline-offset: 5px;}
.beautiful-opening {padding-top: 35px;}

.beautiful h1 {
  font-family: 'Grenze', 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(48px, 6.2vw, 100px);
  line-height: 1.2;
  text-align: center;
  margin: 0 20px 44px;
  letter-spacing: 0;
  color: #fff;
}

.beautiful-carousel {outline-offset: 8px;}
.beautiful-carousel:focus:not(:focus-visible) {outline: none;}
.beautiful-frame {position: relative;}

.beautiful-stage {
  position: relative;
  width: calc(100% - 112px);
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  max-height: min(980px, calc(100svh - 320px));
  min-height: 320px;
  background: #000;
  isolation: isolate;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  contain: paint;
}

.beautiful-slide {position: absolute; inset: 0; isolation: isolate;}
.beautiful-photo {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none;}
.beautiful-stage[data-dragging] {cursor: grabbing;}
.beautiful-stage[data-dragging] .beautiful-slide {will-change: transform;}

.beautiful-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 64px;
  background: transparent;
  color: #bbb;
  padding: 0;
}
.beautiful-arrow svg {width: 16px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.3;}
.beautiful-arrow:hover {color: #fff;}
.beautiful-previous {left: 0;}
.beautiful-next {right: 0;}

.beautiful-lettering {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  overflow: hidden;
}

.beautiful-lettering text {visibility: hidden;}
.beautiful-slide[data-fitted] .beautiful-lettering text {visibility: visible;}

.beautiful-caption {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin-inline: 56px;
  padding: 2px 0;
  font-size: 12px;
}
.beautiful-caption time {font-size: 11px; color: #aaa;}
.beautiful-caption time:empty {visibility: hidden;}
.beautiful-full {justify-self: end;}

.beautiful-count {font-family: 'SFMono-Regular', Consolas, monospace; color: #aaa; font-size: 11px;}
.beautiful-full {color: #aaa; background: transparent; min-height: 44px; padding: 8px 0 8px 12px; font-size: 11px;}
.beautiful-full:hover {text-decoration: underline; text-underline-offset: 5px;}

.beautiful-work {padding-block: 80px 90px;}
.beautiful-section-head {display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 32px;}
.beautiful-section-head h2 {font-size: 26px; font-weight: 400; letter-spacing: -.8px; margin: 0;}
.work-filters {display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none;}
.work-filters button {background: transparent; padding: 10px 0; min-height: 44px; min-width: 44px; color: #999; font-size: 12px; border-bottom: 1px solid transparent; flex-shrink: 0;}
.work-filters button[aria-pressed=true] {color: #fff; border-color: #ddd;}
.work-filters button:hover {color: #fff;}
.photo-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 20px;}
.photo-card {margin: 0; min-width: 0;}
.photo-card figcaption {font-size: 11px; color: #aaa; padding-top: 12px;}
.photo-card figcaption:has(time:empty) {display: none;}
.image-button {display: block; position: relative; width: 100%; padding: 0; aspect-ratio: 3 / 2; background: #080808; overflow: hidden;}
.work-photo {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;}
.beautiful-contact {display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; border-top: 1px solid #292929; padding-block: 60px;}
.beautiful-identity h2 {font-size: clamp(32px, 3.5vw, 48px); font-weight: 400; letter-spacing: -1.5px; line-height: 1.1; margin: 0 0 16px;}
.beautiful-identity p {font-size: 13px; line-height: 1.7; color: #aaa; margin: 0;}
.beautiful-contact-links {justify-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;}
.beautiful-email {display: inline-flex; align-items: center; gap: 18px; min-height: 44px; font-size: clamp(18px, 2vw, 28px); letter-spacing: -.6px; border-bottom: 1px solid #555; padding-block: 6px;}
.beautiful-email:hover {border-color: #fff;}
.beautiful-instagram {display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; color: #aaa;}
.beautiful-instagram:hover {color: #fff;}
.beautiful-footer {border-top: 1px solid #292929; padding-block: 10px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #888; font-size: 10px;}
.beautiful-footer a {display: inline-flex; align-items: center; min-height: 44px;}
.beautiful :focus-visible {outline-color: #fff;}
.viewer-open {overflow: hidden;}
#viewer {width: calc(100vw - 32px); max-width: 1800px; height: calc(100dvh - 32px); max-height: none; padding: 0; color: #fff; border: 1px solid #383838; background: #000;}
#viewer::backdrop {background: #000e;}
.viewer-top {height: 60px; padding-inline: 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;}
.viewer-top h2 {font-size: 12px; font-weight: 400; margin: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.viewer-top [data-viewer-count] {font: 10px 'SFMono-Regular',Consolas,monospace; color: #aaa;}
.viewer-top button {justify-self: end; width: 44px; height: 44px; font-size: 27px; background: transparent;}
.viewer-frame {position: relative; height: calc(100% - 120px);}
.viewer-image-area {position: relative; margin-inline: 56px; width: calc(100% - 112px); height: 100%; overflow: hidden; touch-action: pan-y pinch-zoom;}
.viewer-image {position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: transform 160ms ease;}
.viewer-image-area[data-dragging] .viewer-image {transition: none; will-change: transform;}
[data-viewer-loading], [data-viewer-error] {position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; color: #aaa; font-size: 12px; text-align: center; pointer-events: none;}
.loading-spinner {width: 18px; height: 18px; border: 1.5px solid #ffffff30; border-top-color: #eee; border-radius: 50%; animation: buffer 750ms linear infinite;}
@keyframes buffer {to {transform: rotate(360deg);}}
.beautiful-stage, .viewer-image-area {-webkit-touch-callout: none; -webkit-user-select: none;}
.viewer-bottom {height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: 24px;}
.viewer-bottom time {font-size: 11px; color: #aaa; line-height: 1.5;}
.viewer-bottom button {min-width: 44px; min-height: 44px; background: transparent; font-size: 11px;}
#viewer.zoomed .viewer-image-area {overflow: auto; touch-action: auto;}
#viewer.zoomed .viewer-image {position: static; width: auto; height: auto; margin: auto; object-fit: initial;}

@media(max-width:1099px) {
  .photo-grid {grid-template-columns: repeat(2,minmax(0,1fr));}
}

@media(max-width:900px) {
  .beautiful-width {width: calc(100% - 40px);}
  .beautiful-brand span {display: none;}
  .beautiful-header nav {gap: 24px;}
}

@media(max-width:700px) {
  .beautiful-width {width: calc(100% - 28px);}
  .beautiful-header {min-height: 72px; font-size: 11px; gap: 18px;}
  .beautiful-header nav {gap: 18px;}
  .beautiful-header nav a {min-height: 44px; display: inline-flex; align-items: center;}
  .beautiful-opening {padding-top: 34px;}
  .beautiful h1 {font-size: clamp(41px, 11vw, 65px); margin: 0 10px 32px; line-height: 1.2;}
  .beautiful-stage {width: 100%; aspect-ratio: 3 / 2; max-height: none; min-height: 0;}
  .beautiful-arrow {color: #fff; background: #0005; width: 44px; height: 60px;}
  .beautiful-arrow svg {width: 12px; height: 22px;}
  .beautiful-caption {font-size: 10px; gap: 12px; margin-inline: 0;}
  .beautiful-count {font-size: 10px;}
  .beautiful-caption time {font-size: 10px;}
  .beautiful-full {min-height: 44px; font-size: 10px; padding-left: 0;}
  .beautiful-work {padding-block: 48px;}
  .beautiful-section-head {margin-bottom: 25px;}
  .beautiful-section-head h2 {font-size: 23px;}
  .beautiful-section-head {display: block;}
  .work-filters {gap: 22px; margin-top: 14px;}
  .work-filters button {font-size: 11px;}
  .photo-grid {grid-template-columns: 1fr; gap: 20px;}
  .beautiful-contact {grid-template-columns: 1fr; padding-block: 38px 28px; gap: 24px;}
  .beautiful-identity h2 {font-size: 34px; letter-spacing: -1px; margin-bottom: 12px;}
  .beautiful-identity p {font-size: 12px;}
  .beautiful-contact-links {justify-self: start; gap: 4px;}
  .beautiful-email {font-size: 20px; letter-spacing: -.4px;}
  .beautiful-footer {gap: 12px; font-size: 9px;}
  #viewer {width: calc(100vw - 12px); height: calc(100dvh - 12px);}
  .viewer-top {padding-inline: 12px; grid-template-columns: 1fr auto 44px; gap: 12px;}
  .viewer-top h2 {font-size: 11px;}
  .viewer-image-area {margin-inline: 0; width: 100%;}
  .viewer-bottom {padding-inline: 14px; gap: 16px;}
  .viewer-bottom time {font-size: 10px;}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior: auto;} .viewer-image {transition: none;} .loading-spinner {animation-duration: 1600ms;}}
/* Keep the blend confined to the photo, including during slide changes. */
.beautiful-header,.beautiful h1{position:relative;z-index:1;isolation:isolate;background:#000}