@font-face {
  font-family: "EB Garamond";
  src: url("assets/EBGaramond-VariableFont_wght.ttf")
    format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
}

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

body {
  font-family: "EB Garamond", serif;
  background-color: #e8e4df;
  color: #333;
  overflow: hidden;
  position: relative;
  height: 100svh;
}

/* Pottery layer - full page draggable area */
.pottery-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  pointer-events: none;
  z-index: 1;
}

.pottery-layer .pottery-img {
  pointer-events: auto;
}

.content {
  height: 100%;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  font-size: 20px;
  font-weight: 460;
}

/* Sidebar */

.sidebar {
  margin-top: 8px;
  margin-bottom: -16px;
}

.sidebar-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
  justify-content: space-between;
  height: 32px;
}

.category-link {
  text-decoration: none;
  color: inherit;
}

.category {
  color: #999999;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: default;
}

.category.highlight {
  color: #333333;
}

.pottery-img {
  position: absolute;
  width: 9vw;
  height: auto;
  object-fit: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

.pottery-img:hover {
  z-index: 100;
}

.pottery-img.dragging {
  opacity: 0.7;
  z-index: 1000;
  cursor: grabbing;
}

/* Footer */
.footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: -10px;
}

.info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #333;
  pointer-events: auto;
  gap: 8px;
}

.label {
  font-weight: normal;
  color: #999;
}

.instagram-link {
  color: #4a4a4a;
  text-decoration: none;
  transition: color 0.3s ease;
}

.instagram-link:hover {
  color: #888;
}

/* Individual positioning for each asset - triangle formation aligned to right */
/* DSC00832.png */
.pottery-img:nth-child(1) {
  top: 12.22vw;
  right: 18.5146vw;
  width: 12vw;
}
/* DSC00836.png */
.pottery-img:nth-child(2) {
  top: 10.16vw;
  right: 41.0789vw;
  width: 8vw;
}
/* DSC00818.png */
.pottery-img:nth-child(3) {
  top: 30.81vw;
  right: 22.0663vw;
  width: 9vw;
}

/* DSC00830.png */
.pottery-img:nth-child(4) {
  top: 8.71vw;
  right: 3.89722vw;
  width: 14vw;
}
/* DSC00819.png */
.pottery-img:nth-child(5) {
  top: 3.75vw;
  right: 31.7225vw;
  width: 12vw;
}
/* DSC00800.png */
.pottery-img:nth-child(6) {
  top: 21.48vw;
  right: 21.5264vw;
  width: 9vw;
}
/* DSC00828.png */
.pottery-img:nth-child(7) {
  top: 21.3vw;
  right: 11.8017vw;
  width: 9vw;
}

/* DSC00815.png */
.pottery-img:nth-child(8) {
  top: 2.82vw;
  right: 2.38202vw;
  width: 14vw;
}
/* DSC00817.png */
.pottery-img:nth-child(9) {
  top: 17.97vw;
  right: 3.37479vw;
  width: 9vw;
}
/* DSC00793.png */
.pottery-img:nth-child(10) {
  top: 45.82vw;
  right: 1.2vw;
  width: 9vw;
}
/* DSC00792.png */
.pottery-img:nth-child(11) {
  top: 36.9vw;
  right: 1.81548vw;
  width: 9vw;
}
/* DSC00802.png */
.pottery-img:nth-child(12) {
  top: 2.63vw;
  right: 46.1682vw;
  width: 9vw;
}

/* DSC00806.png */
.pottery-img:nth-child(13) {
  top: 26.34vw;
  right: 1.8vw;
  width: 9vw;
}
/* DSC00797.png */
.pottery-img:nth-child(14) {
  top: 13.55vw;
  right: 32vw;
  width: 9vw;
}
/* DSC00807.png */
.pottery-img:nth-child(15) {
  top: 32.03vw;
  right: 8.91635vw;
  width: 9vw;
}
/* DSC00795.png */
.pottery-img:nth-child(16) {
  top: 21.03vw;
  right: 32.3251vw;
  width: 7vw;
}
/* DSC00805.png */
.pottery-img:nth-child(17) {
  top: 1.92vw;
  right: 18.6139vw;
  width: 12vw;
}

/* DSC00811.png */
.pottery-img:nth-child(18) {
  top: 37.04vw;
  right: 9.62372vw;
  width: 15vw;
}
/* DSC00817-1.png */
.pottery-img:nth-child(19) {
  top: 14.66vw;
  right: 11.5582vw;
  width: 7vw;
}

@media (max-width: 720px) {
  .content {
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Individual positioning for each asset - triangle formation aligned to right */
  /* DSC00832.png */
  .pottery-img:nth-child(1) {
    top: 48.0525vh;
    right: 49.3447vw;
    width: 23vw;
  }
  /* DSC00836.png */
  .pottery-img:nth-child(2) {
    top: 54.3989vh;
    right: 85.7752vw;
    width: 19vw;
  }
  /* DSC00818.png */
  .pottery-img:nth-child(3) {
    top: 51.4141vh;
    right: 17.0246vw;
    width: 24vw;
  }

  /* DSC00830.png */
  .pottery-img:nth-child(4) {
    top: 48.0877vh;
    right: 4.92188vw;
    width: 21vw;
  }
  /* DSC00819.png */
  .pottery-img:nth-child(5) {
    top: 59.0539vh;
    right: 24.6487vw;
    width: 18vw;
  }
  /* DSC00800.png */
  .pottery-img:nth-child(6) {
    top: 43.2792vh;
    right: -1.63457vw;
    width: 22vw;
  }
  /* DSC00828.png */
  .pottery-img:nth-child(7) {
    top: 44.7581vh;
    right: 70.6232vw;
    width: 17vw;
  }

  /* DSC00815.png */
  .pottery-img:nth-child(8) {
    top: 48.257vh;
    right: 80.5148vw;
    width: 21vw;
  }
  /* DSC00817.png */
  .pottery-img:nth-child(9) {
    top: 54.4718vh;
    right: -5.78973vw;
    width: 25vw;
  }
  /* DSC00793.png */
  .pottery-img:nth-child(10) {
    top: 61.7489vh;
    right: 16.2688vw;
    width: 20vw;
  }
  /* DSC00792.png */
  .pottery-img:nth-child(11) {
    top: 54.6369vh;
    right: 6.32752vw;
    width: 20vw;
  }
  /* DSC00802.png */
  .pottery-img:nth-child(12) {
    top: 64.4962vh;
    right: 4.79348vw;
    width: 17vw;
  }

  /* DSC00806.png */
  .pottery-img:nth-child(13) {
    top: 53.8233vh;
    right: 66.0683vw;
    width: 19vw;
  }
  /* DSC00797.png */
  .pottery-img:nth-child(14) {
    top: 54.8063vh;
    right: 41.984vw;
    width: 22vw;
  }
  /* DSC00807.png */
  .pottery-img:nth-child(15) {
    top: 43.691vh;
    right: 37.2299vw;
    width: 17vw;
  }
  /* DSC00795.png */
  .pottery-img:nth-child(16) {
    top: 47.3492vh;
    right: 24.9425vw;
    width: 20vw;
  }
  /* DSC00805.png */
  .pottery-img:nth-child(17) {
    top: 59.6899vh;
    right: 36.5564vw;
    width: 25vw;
  }

  /* DSC00811.png */
  .pottery-img:nth-child(18) {
    top: 64.4207vh;
    right: 60.9327vw;
    width: 30vw;
  }
  /* DSC00817-1.png */
  .pottery-img:nth-child(19) {
    top: 60.7128vh;
    right: 64.9612vw;
    width: 20vw;
  }
}