.bhtc-pile {
  --bhtc-pile-color: #302d1f;
  --bhtc-pile-height: 100svh;
  --bhtc-note-paper: #f6e477;
  --bhtc-note-ink: var(--bhtc-pile-color);
  --bhtc-note-shadow: rgba(44, 38, 17, 0.28);
  --bhtc-note-size-min: clamp(8.5rem, 13vw, 10.5rem);
  --bhtc-note-size-max: clamp(11rem, 20vw, 15.5rem);
  --bhtc-note-font: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --bhtc-wall-padding: clamp(0.65rem, 1.5vw, 1.5rem);
  box-sizing: border-box;
  color: var(--bhtc-note-ink);
  height: var(--bhtc-pile-height);
  isolation: isolate;
  min-height: 28rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.bhtc-pile__scene {
  box-sizing: border-box;
  display: grid;
  gap: clamp(0.6rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  height: 100%;
  margin: 0;
  overflow: auto;
  padding: var(--bhtc-wall-padding);
  position: relative;
  scrollbar-width: thin;
  width: 100%;
}

.bhtc-pile__thought {
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: block;
  min-width: 0;
  pointer-events: none;
  position: relative;
  user-select: none;
}

.bhtc-pile__paper {
  align-items: stretch;
  background-color: var(--bhtc-note-paper);
  box-sizing: border-box;
  clip-path: var(--bhtc-note-clip, polygon(1% 0.5%, 99.4% 1%, 99% 99.2%, 0.6% 99%));
  color: var(--bhtc-note-ink);
  display: flex;
  filter: drop-shadow(
    var(--bhtc-note-shadow-x, 1px)
    var(--bhtc-note-shadow-y, 9px)
    var(--bhtc-note-shadow-blur, 10px)
    var(--bhtc-note-shadow)
  );
  flex-direction: column;
  font-family: var(--bhtc-note-font);
  font-size: clamp(0.86rem, 0.78rem + 0.42vw, 1.17rem);
  height: 100%;
  justify-content: space-between;
  line-height: 1.34;
  overflow: hidden;
  padding: clamp(0.85rem, 9%, 1.45rem);
  position: relative;
  transform: rotate(var(--bhtc-note-rotation, -1deg));
  transform-origin: 50% 48%;
  width: 100%;
}

.bhtc-pile__paper::before,
.bhtc-pile__paper::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.bhtc-pile__paper::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.31), rgba(255, 255, 255, 0) 18%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 48%, rgba(142, 111, 21, 0.08));
}

.bhtc-pile__paper::after {
  background-image:
    repeating-linear-gradient(3deg, rgba(86, 65, 11, 0.018) 0, rgba(86, 65, 11, 0.018) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 7px);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.bhtc-pile__quote,
.bhtc-pile__person {
  position: relative;
  z-index: 1;
}

.bhtc-pile__quote {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--bhtc-note-lines, 7);
  display: -webkit-box;
  flex: 1 1 auto;
  font-weight: 650;
  min-height: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.bhtc-pile__person {
  display: block;
  flex: 0 0 auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.68em;
  font-style: italic;
  font-weight: 600;
  margin-top: 0.65em;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bhtc-pile__thought--short .bhtc-pile__paper {
  --bhtc-note-lines: 6;
  font-size: clamp(1rem, 0.88rem + 0.62vw, 1.38rem);
}

.bhtc-pile__thought--medium .bhtc-pile__paper {
  --bhtc-note-lines: 8;
  font-size: clamp(0.9rem, 0.82rem + 0.46vw, 1.2rem);
}

.bhtc-pile__thought--long .bhtc-pile__paper {
  --bhtc-note-lines: 10;
  font-size: clamp(0.79rem, 0.74rem + 0.3vw, 1rem);
}

.bhtc-pile__thought--extra-long .bhtc-pile__paper {
  --bhtc-note-lines: 12;
  font-size: clamp(0.7rem, 0.66rem + 0.22vw, 0.88rem);
}

.bhtc-pile__thought:nth-child(4n + 1) .bhtc-pile__paper {
  --bhtc-note-rotation: -2.2deg;
}

.bhtc-pile__thought:nth-child(4n + 2) .bhtc-pile__paper {
  --bhtc-note-rotation: 1.6deg;
}

.bhtc-pile__thought:nth-child(4n + 3) .bhtc-pile__paper {
  --bhtc-note-rotation: -0.8deg;
}

.bhtc-pile__thought:nth-child(4n) .bhtc-pile__paper {
  --bhtc-note-rotation: 2.5deg;
}

.bhtc-pile--enhanced .bhtc-pile__scene {
  display: block;
  overflow: hidden;
  padding: 0;
}

.bhtc-pile--enhanced .bhtc-pile__thought {
  aspect-ratio: auto;
  height: var(--bhtc-note-height);
  left: 0;
  position: absolute;
  top: 0;
  transform-origin: top left;
  width: var(--bhtc-note-width);
  will-change: transform;
}

.bhtc-pile--enhanced .bhtc-pile__paper {
  clip-path: var(--bhtc-note-clip);
  transform: rotate(var(--bhtc-note-rotation));
}

.bhtc-pile__empty {
  left: 50%;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(32rem, 85%);
}

@media (max-width: 680px) {
  .bhtc-pile {
    --bhtc-note-size-min: clamp(7.5rem, 37vw, 9.25rem);
    --bhtc-note-size-max: clamp(9.25rem, 53vw, 12rem);
    --bhtc-wall-padding: clamp(0.45rem, 2vw, 0.8rem);
    min-height: 24rem;
  }

  .bhtc-pile__paper {
    padding: clamp(0.72rem, 8%, 1.1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhtc-pile--enhanced .bhtc-pile__thought {
    will-change: auto;
  }
}