/* back.css: alles wat er ooit op de achterkant is geplakt, geschreven of gaan wonen */

.face > * { position: absolute; margin: 0; }

.pencil {
  font: 400 max(10px, calc(var(--k) * 1.55cqw)) / 1.1 var(--f-pencil);
  color: var(--pencil);
  opacity: .75;
  white-space: nowrap;
}

/* ---------- doorschijnend logo van de voorkant (gespiegeld) ---------- */

.ghost {
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  transform: translate(-50%, -50%) scaleX(-1) rotate(-2deg);
  opacity: .1;
  filter: blur(1.5px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.ghost-mark {
  width: calc(var(--k) * 6cqw);
  height: calc(var(--k) * 6cqw);
  border: calc(var(--k) * 1.2cqw) solid #1a2a6c;
  border-right-color: #e0592a;
  border-radius: 50%;
}
.ghost-word {
  font: 800 calc(var(--k) * 6.4cqw) / 1 var(--f-sans);
  letter-spacing: -.04em;
  color: #1a2a6c;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .ghost { flex-direction: column; }
  .ghost-word { font-size: 9cqw; }
}

/* ---------- etiketten ---------- */

.label {
  font: 400 max(8.5px, calc(var(--k) * 1.15cqw)) / 1.35 var(--f-sans);
  color: #222;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.label p { margin: 0 0 .4em; }
.label p:last-child { margin-bottom: 0; }

.museum {
  left: 4%;
  top: 6%;
  width: 30%;
  padding: 1.2em 1.3em;
  background: #fbfaf6;
  font-family: var(--f-type);
  transform: rotate(-.8deg);
}
.museum-title { font-weight: 700; font-size: 1.25em; font-style: italic; }
.museum-title span { font-weight: 400; }
.museum-inv { color: #666; border-top: 1px solid #ccc; padding-top: .4em; }

.expo {
  right: 4%;
  top: 6%;
  width: 24%;
  padding: 1em 1.1em;
  background: #f4f1e6;
  border: .35em double #2c4a8a;
  border-radius: .3em;
  transform: rotate(2.5deg);
}
.expo-head {
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #2c4a8a;
}
.expo-stamp {
  position: absolute;
  right: .4em;
  bottom: .2em;
  padding: .1em .4em;
  border: 2px solid rgba(190, 30, 30, .6);
  color: rgba(190, 30, 30, .6);
  font: 800 1.2em/1 var(--f-sans);
  letter-spacing: .1em;
  transform: rotate(-14deg);
}

.ingredients {
  right: 4%;
  top: 37%;
  width: 28%;
  padding: .9em 1em;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .5em;
  transform: rotate(-1.5deg);
}
.tht { border-top: 1px solid #000; padding-top: .3em; }
.tht span { font-family: var(--f-type); }
.barcode {
  height: 2.6em;
  margin-top: .4em;
  background: repeating-linear-gradient(90deg,
    #111 0 2px, transparent 2px 3px, #111 3px 4px, transparent 4px 7px,
    #111 7px 10px, transparent 10px 11px, #111 11px 12px, transparent 12px 15px);
}
.barcode-nr { font: .9em/1 var(--f-type); text-align: center; letter-spacing: .2em; }

/* ---------- potloodnotities ---------- */

.note-wall { left: 38%; top: 5%; transform: rotate(-3deg); }
.note-up { left: 44%; top: 15%; transform: rotate(4deg); }
.note-final {
  left: 5%;
  bottom: 4%;
  transform: rotate(-2deg);
  text-decoration: line-through wavy rgba(74, 70, 64, .5);
}

/* ---------- post-it, afgescheurd ---------- */

.postit {
  left: 7%;
  top: 40%;
  width: 17%;
  aspect-ratio: 1 / .62;
  padding: .8em;
  background: linear-gradient(170deg, #fff58a, #f5e45c);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
  transform: rotate(-6deg);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 92% 100%, 84% 90%, 75% 98%, 66% 87%, 55% 97%,
    46% 86%, 37% 96%, 27% 88%, 18% 99%, 9% 89%, 0 97%);
}
.postit p {
  margin: 0;
  font: 700 max(10px, calc(var(--k) * 1.7cqw)) / 1 var(--f-marker);
  color: #1d3fa0;
}

/* ---------- schilderstape ---------- */

.tape {
  left: 2%;
  top: 74%;
  width: 34%;
  padding: .55em 1em;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 5px),
    rgba(232, 214, 160, .9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  transform: rotate(5deg);
  clip-path: polygon(1% 8%, 4% 0, 7% 9%, 96% 4%, 99% 14%, 100% 92%, 97% 100%, 93% 91%, 3% 97%, 0 86%);
  text-align: center;
}
.tape span {
  font: 400 max(10px, calc(var(--k) * 1.45cqw)) / 1 var(--f-marker);
  color: #222;
  white-space: nowrap;
}

/* ---------- prijssticker ---------- */

.price {
  right: 8%;
  bottom: 8%;
  width: calc(var(--k) * 11cqw);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb15a, #f07c1c);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  color: #3a1a00;
  text-align: center;
  transform: rotate(-10deg);
}
.price s {
  font: 800 max(9px, calc(var(--k) * 1.6cqw)) / 1 var(--f-sans);
  text-decoration-thickness: 2px;
  text-decoration-color: #1d3fa0;
}
.price span {
  margin-top: .3em;
  font: 400 max(9px, calc(var(--k) * 1.45cqw)) / 1 var(--f-pencil);
  color: #1d3fa0;
  transform: rotate(-6deg);
}

/* ---------- stofvlak (de kras-kaart zit in dust.js) ---------- */

.dustzone {
  left: 36%;
  top: 66%;
  width: 34%;
  height: 28%;
  display: grid;
  place-items: center;
  touch-action: none;
}
.dust-secret {
  margin: 0;
  padding: 0 6%;
  font: 400 max(10px, calc(var(--k) * 1.5cqw)) / 1.3 var(--f-pencil);
  color: #1d3fa0;
  text-align: center;
}

/* ---------- op het kale hout ---------- */

.pencil-code {
  position: absolute;
  z-index: 2;
  right: calc(var(--bar) * 1.6);
  bottom: calc(var(--wrap) + (var(--bar) - var(--wrap)) * .12);
  font-size: max(8px, calc(var(--k) * 1.25cqw));
  opacity: .6;
  transform: rotate(-1deg);
}

.dustbunny {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--wrap) * .9);
  width: calc(var(--k) * 3cqw);
  height: calc(var(--k) * 1.8cqw);
  border-radius: 50% 50% 40% 40%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .35) 0 10%, transparent 30%),
    radial-gradient(ellipse, #9b958b 0 45%, rgba(155, 149, 139, .6) 60%, transparent 72%);
  filter: blur(.3px);
  box-shadow: -.4cqw -.2cqw 0 -.2cqw rgba(140, 134, 124, .6), .5cqw -.3cqw 0 -.25cqw rgba(140, 134, 124, .5);
  transition: transform .6s ease-out, opacity .6s;
}
.dustbunny.b1 { left: 14%; }
.dustbunny.b2 { left: 42%; transform: scale(.7); }
.dustbunny.b3 { left: 63%; transform: scale(1.2) rotate(8deg); }

/* ---------- telefoon: staand doek, alles schuift op ---------- */

@media (max-width: 640px) {
  .museum { left: 4%; top: 3%; width: 54%; }
  .expo { right: 3%; top: 4%; width: 39%; padding: .7em; }
  .expo-head { font-size: .85em; letter-spacing: .03em; }
  .note-up { left: 56%; top: 25.5%; }
  .note-wall { left: 6%; top: 29%; }
  .ingredients { right: 3%; top: 34%; width: 56%; }
  .postit { left: 5%; top: 38%; width: 36%; }
  .tape { left: 3%; top: 60.5%; width: 56%; }
  .dustzone { left: 5%; top: 70%; width: 56%; height: 20%; }
  .price { right: 5%; bottom: 11%; width: 22cqw; }
  .note-final { left: 22%; bottom: 2.5%; }
}