/* Sticker board for more.html — overrides site-wide .home article a button styles */

body.sticker-board {
  --board-ink: #1f2a24;
  --label-bg: #fffdf8;
  --label-ink: #1a221c;
}

body.sticker-board .sweaterContainer {
  opacity: 0.35;
  pointer-events: none;
}

body.sticker-board .mainHome .borderWrapper {
  max-width: none;
  overflow: visible;
}

body.sticker-board .miro-board {
  flex: 1 1 100%;
  width: min(1200px, 100%);
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  margin: 0.5rem auto 2rem;
  min-height: 900px;
  background: transparent;
  overflow: visible;
}

body.sticker-board .sticker-hint-desktop {
  display: none;
}

body.sticker-board .sticker-hint-mobile {
  display: inline;
}

@media (min-width: 769px) {
  body.sticker-board .sticker-hint-desktop { display: inline; }
  body.sticker-board .sticker-hint-mobile { display: none; }
}

/* Kill CTA / button chrome from .home article a */
body.sticker-board.home article a.sticker,
body.sticker-board .home article a.sticker {
  position: absolute !important;
  display: block !important;
  width: auto;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  background: none !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: inherit !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 1;
  transform-origin: center center;
  filter: grayscale(1);
  opacity: 0.8;
  transition: transform 0.22s ease, filter 0.22s ease, opacity 0.22s ease, z-index 0s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  cursor: pointer;
}

body.sticker-board.home article a.sticker:focus-visible {
  outline: 3px solid #2f6b4f;
  outline-offset: 4px;
  border-radius: 8px;
}

body.sticker-board a.sticker img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none !important;
  border-radius: 0;
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
  filter: drop-shadow(0 10px 14px rgba(20, 25, 20, 0.28));
  zoom: 1;
  pointer-events: none;
  user-select: none;
  /* Knock out solid black dither backgrounds */
  mix-blend-mode: screen;
}

/* Lean UX book has a light cover — keep normal blending */
body.sticker-board a.sticker img[src*="berst"] {
  mix-blend-mode: normal;
}

body.sticker-board a.sticker .sticker-label {
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  transform: translate(-50%, 70%) rotate(calc(var(--rot, 0deg) * -0.35));
  width: max-content;
  max-width: 14rem;
  padding: 0.35rem 0.65rem;
  background: var(--label-bg);
  color: var(--label-ink);
  font-family: "Caveat", cursive;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 5;
}

body.sticker-board a.sticker .sticker-label small {
  display: block;
  font-family: var(--font-meta);
  font-size: var(--text-meta);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a756c;
  margin-top: 0.15rem;
}

/* Desktop (wide): label on hover / focus */
@media (min-width: 769px) {
  body.sticker-board.home article a.sticker:hover,
  body.sticker-board.home article a.sticker:focus,
  body.sticker-board.home article a.sticker:focus-visible,
  body.sticker-board .home article a.sticker:hover,
  body.sticker-board .home article a.sticker:focus,
  body.sticker-board .home article a.sticker:focus-visible {
    box-shadow: none !important;
    background: none !important;
    border: none !important;
    position: absolute !important;
    cursor: pointer;
  }

  body.sticker-board.home article a.sticker:hover,
  body.sticker-board.home article a.sticker:focus-visible {
    z-index: 20;
    filter: grayscale(0) brightness(1.03);
    opacity: 1;
  }

  body.sticker-board.home article a.sticker:hover {
    transform: rotate(var(--rot, 0deg)) scale(1.08) !important;
  }

  body.sticker-board a.sticker:hover .sticker-label,
  body.sticker-board a.sticker:focus-visible .sticker-label {
    opacity: 1;
    transform: translate(-50%, 100%) rotate(calc(var(--rot, 0deg) * -0.35));
  }
}

/* Mobile / narrow: stack stickers vertically on top of each other */
@media (max-width: 768px) {
  body.sticker-board .miro-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* A label hangs about 3.4rem under its sticker. The gap leaves it 2.6rem
       clear of the next sticker, so it reads as belonging to the one above,
       and the bottom padding does the same for the last label. */
    gap: 6rem;
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 2rem;
    padding: 1rem 0 5rem;
  }

  body.sticker-board.home article a.sticker,
  body.sticker-board .home article a.sticker,
  body.sticker-board.home article a.sticker:hover,
  body.sticker-board.home article a.sticker:focus,
  body.sticker-board.home article a.sticker:focus-visible,
  body.sticker-board.home article a.sticker:active,
  body.sticker-board .home article a.sticker:hover,
  body.sticker-board .home article a.sticker:focus,
  body.sticker-board .home article a.sticker:focus-visible,
  body.sticker-board .home article a.sticker:active {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: min(220px, 72vw) !important;
    z-index: auto !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    background: none !important;
    border: none !important;
    filter: grayscale(1);
    opacity: 0.8;
  }

  /* Light alternating tilt so the stack still feels like stickers */
  body.sticker-board.home article a.sticker:nth-child(odd),
  body.sticker-board.home article a.sticker:nth-child(odd):hover,
  body.sticker-board.home article a.sticker:nth-child(odd):focus,
  body.sticker-board.home article a.sticker:nth-child(odd):focus-visible,
  body.sticker-board.home article a.sticker:nth-child(odd):active {
    transform: rotate(-3deg) !important;
  }

  body.sticker-board.home article a.sticker:nth-child(even),
  body.sticker-board.home article a.sticker:nth-child(even):hover,
  body.sticker-board.home article a.sticker:nth-child(even):focus,
  body.sticker-board.home article a.sticker:nth-child(even):focus-visible,
  body.sticker-board.home article a.sticker:nth-child(even):active {
    transform: rotate(3deg) !important;
  }

  body.sticker-board a.sticker .sticker-label {
    opacity: 1;
    left: 50%;
    bottom: auto;
    top: 100%;
    transform: translate(-50%, 0.35rem);
    font-size: 1.15rem;
    max-width: 14rem;
    width: max-content;
    padding: 0.35rem 0.65rem;
  }

  body.sticker-board a.sticker .sticker-label small {
    display: block;
  }
}

/* Tag / graffiti — behind stickers; hidden on small screens */
body.sticker-board .miro-board .graffiti {
  position: absolute;
  height: 100px;
  z-index: 1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.sticker-board a.sticker {
    transition: none;
  }
}