@font-face {
  font-family: 'Excessive';
  src: url('assets/fonts/Excessive-ExtraCondensed.woff2') format('woff2'),
       url('assets/fonts/Excessive-ExtraCondensed.otf')   format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PleaseWriteMeASong';
  src: url('assets/fonts/PleaseWriteMeASong-70vV.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Dymo';
  src: url('assets/fonts/Dymo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --card-w:    300px;
  --card-h:    225px;
  --frame-size: 14px;
  /* Label height: JustLove (682×58) scaled to fill the label strip content width */
  --label-h:   calc(var(--card-w) * 0.0851);
}

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

body {
  min-height: 100vh;
  overflow: hidden;
  background-color: #8a9a3a;
  font-family: 'Dymo', 'Courier New', monospace;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('assets/Wallpaper-tile.png');
  background-repeat: repeat;
  background-size: 220px 220px;
  filter: saturate(90%);
}

/* Film grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
  opacity: 0.038;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Header ---- */
.site-header {
  position: relative;
  z-index: 10;
  background-color: #f5f5e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  border-bottom: 8px solid #512e2a;
}

.site-title {
  font-family: 'Excessive', sans-serif;
  font-size: 128px;
  color: #000000;
  font-weight: normal;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
}

.site-nav {
  display: flex;
  gap: 8px;
}

.dymo-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  user-select: none;
  display: block;
  transition: transform 0.08s, box-shadow 0.08s;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  line-height: 0;
}

.dymo-btn img {
  display: block;
  height: 36px;
  width: auto;
}

.dymo-btn:active {
  transform: translate(1px, 2px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

/* ---- Carousel scene ---- */
.carousel-scene {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 66px);
  perspective: 1400px;
  cursor: grab;
  user-select: none;
}

.carousel-scene:active {
  cursor: grabbing;
}

/* ---- Carousel ring ---- */
.carousel {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  transform-style: preserve-3d;
}

/* ---- Card wrapper — positioned in 3D by JS ---- */
.card-wrapper {
  position: absolute;
  width: var(--card-w);
  transform-style: preserve-3d;
  cursor: pointer;
}

/* ---- Photo frame ---- */
.card-frame {
  width: var(--card-w);
  height: var(--card-h);
  border-style: solid;
  border-width: var(--frame-size, 14px);
  /* Lighter warm tones top/left simulate light catching the curved face;
     darker bottom/right fall into shadow — gives the subtle moulding profile. */
  border-top-color:    #6b3820;
  border-left-color:   #6b3820;
  border-right-color:  #38180c;
  border-bottom-color: #38180c;
  border-radius: 4px;
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.45),
    inset 0 1px 0   rgba(220, 140, 70, 0.10),
    0 6px 0         rgba(0, 0, 0, 0.28);
}

/* ---- Image inside frame ---- */
.card-img-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(12%) contrast(1.04);
}

/* Placeholder shown when no image path is set */
.card-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #c8956a 0%, #7a4820 100%);
}

/* ---- DYMO label ---- */
.card-label {
  display: block;
  width: var(--card-w);
  margin-top: 12px;
  text-align: center;
}

.label-text {
  display: block;
  background: #ffffff;
  color: #000000;
  font-family: 'Dymo', 'Courier New', monospace;
  font-size: 20px;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  border-radius: 1px;
}

.label-img {
  display: block;
  height: var(--label-h);
  width: auto;
  margin: 0 auto;
}

/* ---- Control panel ---- */
.ctrl-anchor {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 800;
}

.ctrl-gear {
  display: block;
  width: 52px;
  height: auto;
  margin-left: auto;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s, transform 0.4s;
}

.ctrl-gear:hover {
  opacity: 1;
  transform: rotate(45deg);
}

.ctrl-panel {
  display: none;
  position: absolute;
  bottom: 64px;
  right: 0;
  width: 260px;
  background: #f5f5e0;
  border: 3px solid #512e2a;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.ctrl-panel.open {
  display: block;
}

.ctrl-row {
  margin-bottom: 14px;
}

.ctrl-row:last-child {
  margin-bottom: 0;
}

.ctrl-label {
  display: block;
  font-family: 'PleaseWriteMeASong', cursive;
  font-size: 16px;
  color: #512e2a;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ctrl-panel input[type=range] {
  display: block;
  width: 100%;
  accent-color: #80461b;
  cursor: pointer;
}

/* ================================================================
   MOBILE — vertical rotateX carousel
   ================================================================ */
@media (max-width: 1024px) {
  :root {
    --card-w:  225px;
    --card-h:  169px;
  }

  .ctrl-anchor {
    display: none;
  }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .site-nav {
    flex-direction: row;
    gap: 8px;
  }

  .dymo-btn img {
    height: min(36px, 8vw);
  }

  .carousel-scene.mobile {
    perspective-origin: 50% 50%;
    cursor: grab;
  }

  .carousel-scene.mobile:active {
    cursor: grabbing;
  }

  /* On mobile the carousel ring is taller than it is wide */
  .carousel-scene.mobile .carousel {
    width: var(--card-w);
    height: var(--card-h);
  }
}