/* Handtuch Held room (spec 8.4): paper, ink, striped hem, illustration with hard offset shadow, sticker. */
.room[data-theme="handtuch-held"] {
  --text: #16323a;
  --text-muted: #3d5a62;
  --accent: #16323a;
  --rule: rgba(22, 50, 58, 0.3);
  --focus: #0b7280;
  --hover-bg: #ffffff;
  --status-live: #15803d;
  border-color: rgba(22, 50, 58, 0.3);
  background-color: #faf7f1;
  background-image: repeating-linear-gradient(90deg, #c8432f 0 16px, #ffffff 16px 32px);
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: 100% 8px;
  color: var(--text);
}

.room[data-theme="handtuch-held"]:hover,
.room[data-theme="handtuch-held"]:focus-within {
  border-color: #16323a;
}

.room[data-theme="handtuch-held"] .illustration {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin-top: var(--space-4);
}

.room[data-theme="handtuch-held"] .illustration img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 8px 8px 0 #16323a;
}

.room[data-theme="handtuch-held"] .sticker {
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: calc(-1 * var(--space-2));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background-color: #f6c445;
  color: #16323a;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  transform: rotate(-5deg);
}

@media (max-width: 767.98px) {
  .room[data-theme="handtuch-held"] .illustration img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .room[data-theme="handtuch-held"] {
    transition:
      border-color var(--hover-duration),
      transform var(--hover-duration),
      background-position 300ms;
  }

  .room[data-theme="handtuch-held"] .illustration img,
  .room[data-theme="handtuch-held"] .sticker {
    transition: transform 300ms;
  }

  /* The hem moves by one stripe width, the image by 3 px, the sticker turns from -5 to -3 degrees. */
  .room[data-theme="handtuch-held"]:hover,
  .room[data-theme="handtuch-held"]:focus-within {
    background-position: 16px 0;
  }

  .room[data-theme="handtuch-held"]:hover .illustration img,
  .room[data-theme="handtuch-held"]:focus-within .illustration img {
    transform: translate(3px, 3px);
  }

  .room[data-theme="handtuch-held"]:hover .sticker,
  .room[data-theme="handtuch-held"]:focus-within .sticker {
    transform: rotate(-3deg);
  }
}