@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/c940764593d0fe5d596b.woff2") format("woff2");
}

:root {
  --viewport-height: 100vh;
  --page-padding: clamp(16px, 4vh, 32px);
  --gallery-gap: clamp(24px, 7.5vh, 72px);
  --top-inset: max(var(--page-padding), env(safe-area-inset-top, 0px));
  --bottom-inset: max(var(--page-padding), env(safe-area-inset-bottom, 0px));
  color-scheme: light;
  font-family: "Inter", sans-serif;
  background: #fdfdfd;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }

@supports (height: 100svh) {
  :root {
    --viewport-height: 100svh;
    --page-padding: clamp(16px, 4svh, 32px);
    --gallery-gap: clamp(24px, 7.5svh, 72px);
  }
}

@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
    --page-padding: clamp(16px, 4dvh, 32px);
    --gallery-gap: clamp(24px, 7.5dvh, 72px);
  }
}

.gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow: clip;
  min-block-size: 100vh;
  min-block-size: var(--viewport-height);
  padding-block: var(--top-inset) var(--bottom-inset);
  padding-inline:
    max(clamp(16px, 6vw, 24px), env(safe-area-inset-left, 0px))
    max(clamp(16px, 6vw, 24px), env(safe-area-inset-right, 0px));
}

.composition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gallery-gap);
  min-inline-size: 0;
  inline-size: min(728px, 100%, max(64px, calc((var(--viewport-height) - var(--top-inset) - var(--bottom-inset) - var(--gallery-gap) - 42px) * 730 / 718)));
  container-type: inline-size;
}

.artwork {
  position: relative;
  flex: none;
  inline-size: 100%;
  aspect-ratio: 730 / 718;
  margin: 0;
  isolation: isolate;
}

.artwork-fallback {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #e9e9e8;
  box-shadow:
    0 30px 44px -18px rgb(15 16 22 / 34%),
    0 6px 10px -3px rgb(15 16 22 / 18%);
}

/* Native reference viewport; replaced only by an approved faithful restoration. */
.artwork-source {
  position: absolute;
  top: -6.406685%;
  left: -64.520548%;
  display: block;
  inline-size: 229.041096%;
  max-inline-size: none;
  block-size: auto;
}

.artwork-source.flat-texture {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.artwork-canvas {
  position: absolute;
  inset: -10%;
  display: block;
  inline-size: 120%;
  block-size: 120%;
  opacity: 0;
  pointer-events: none;
  filter:
    drop-shadow(0 22px 20px rgb(15 16 22 / 23%))
    drop-shadow(0 3px 4px rgb(15 16 22 / 12%));
}

.artwork.webgl-ready .artwork-canvas { opacity: 1; }
.artwork.webgl-ready .artwork-fallback { visibility: hidden; }

.coming-soon {
  margin: 0;
  padding-inline-start: 0.65em;
  color: #63428a;
  font-size: clamp(14px, 2vw, 28px);
  font-weight: 250;
  line-height: 1.5;
  letter-spacing: 0.65em;
  white-space: nowrap;
}

@supports (font-size: 1cqi) {
  .coming-soon { font-size: clamp(14px, 3.85cqi, 28px); }
}

@media (max-width: 260px) {
  .coming-soon { font-size: 12px; }
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .coming-soon {
    background: linear-gradient(90deg, #329cd6 0%, #304899 34%, #662c87 66%, #e33099 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .coming-soon {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}