/* paper pieces: each is tilted per instance with --tilt (between -3deg and 3deg) */

.notebook, .polaroid, .sticky, .grid-paper, .letter, .envelope, .index-card, .kraft, .lift {
  transform: rotate(var(--tilt, 0deg));
}

.hand { font-family: var(--hand); }

/* hover lift: straighten and rise */
.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover, .lift:focus-within { transform: rotate(0deg) translateY(-4px); box-shadow: 0 14px 28px rgba(60,40,20,.22); }

@media (prefers-reduced-motion: reduce) {
  .lift:hover, .lift:focus-within { transform: none; }
}

/* washi tape */
.tape {
  position: absolute; z-index: 3; height: 26px; width: 96px; opacity: .78;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
}
.tape--rose { background-color: var(--rose); }
.tape--teal { background-color: var(--teal); }
.tape--mustard { background-color: var(--mustard); }
.tape--lilac { background-color: var(--lilac); }
.tape--sky { background-color: var(--sky); }
.tape--sage { background-color: var(--sage); }
.tape--peach { background-color: var(--peach); }
.tape--bluegrey { background-color: var(--bluegrey); }

/* topic dot */
.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.dot--rose { background-color: var(--rose); }
.dot--teal { background-color: var(--teal); }
.dot--mustard { background-color: var(--mustard); }
.dot--lilac { background-color: var(--lilac); }
.dot--sky { background-color: var(--sky); }
.dot--sage { background-color: var(--sage); }
.dot--peach { background-color: var(--peach); }
.dot--bluegrey { background-color: var(--bluegrey); }

/* notebook page: punch holes, red margin line at --margin-line, teal ruled lines (--ruled; none on .notebook--plain) */
.notebook {
  --margin-line: 46px; --ruled: rgba(95,158,148,.22);
  position: relative; background-color: var(--paper); padding: 34px 34px 40px 64px;
  box-shadow: 0 6px 18px rgba(60,40,20,.18);
  background-image:
    linear-gradient(90deg, transparent var(--margin-line), rgba(217,130,107,.55) var(--margin-line) calc(var(--margin-line) + 2px), transparent calc(var(--margin-line) + 2px)),
    repeating-linear-gradient(transparent 0 29px, var(--ruled) 29px 30px);
  background-position: 0 0, 0 22px;
}
.notebook--plain { --ruled: transparent; }
.notebook--torn {
  clip-path: polygon(0 0, 100% 0, 100% 97%, 96% 99%, 91% 97.5%, 85% 99.5%, 78% 97.8%, 70% 99.3%, 62% 97.6%, 55% 99.6%, 47% 98%, 40% 99.4%, 32% 97.7%, 25% 99.5%, 17% 97.9%, 10% 99.3%, 4% 97.8%, 0 99%);
}
.notebook .holes { position: absolute; left: 16px; top: 30px; bottom: 30px; display: flex; flex-direction: column; justify-content: space-around; }
.notebook .holes i { width: 14px; height: 14px; border-radius: 50%; background: var(--linen); box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); }
.notebook .ring {
  position: absolute; right: 40px; bottom: 50px; width: 120px; height: 120px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 54%, rgba(150,100,55,.13) 56%, rgba(150,100,55,.2) 60%, rgba(150,100,55,.06) 64%, transparent 67%);
}

/* polaroid: photo with a wide bottom border and a handwritten caption */
.polaroid { position: relative; background: var(--paper); padding: 12px 12px 40px; box-shadow: 0 6px 16px rgba(60,40,20,.2); }
.polaroid img { display: block; width: 100%; height: auto; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--hand); font-size: 25px; }

/* sticky note */
.sticky { position: relative; background: var(--sticky); padding: 20px 18px 22px; box-shadow: 0 8px 12px -6px rgba(60,40,20,.35); }

/* grid paper */
.grid-paper {
  position: relative; background-color: var(--paper); padding: 16px 18px; box-shadow: 0 3px 8px rgba(60,40,20,.12);
  background-image: linear-gradient(rgba(143,183,207,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(143,183,207,.25) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* letter: stationery with a thin rose inner border and a stamp */
.letter { position: relative; background: var(--letter); padding: 32px 36px 34px; box-shadow: 0 6px 18px rgba(60,40,20,.16); }
.letter::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(217,130,107,.35); pointer-events: none; }

/* stamp, on letters and envelopes */
.letter .stamp, .envelope .stamp {
  position: absolute; right: 24px; top: 20px; width: 70px; height: 84px; background: var(--paper); padding: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15); transform: rotate(5deg);
  -webkit-mask: radial-gradient(circle 4px at 4px 4px, transparent 98%, #000) -4px -4px / 9px 9px;
  mask: radial-gradient(circle 4px at 4px 4px, transparent 98%, #000) -4px -4px / 9px 9px;
}
.letter .stamp > *, .envelope .stamp > * { width: 100%; height: 100%; background: #f2d7c9; display: flex; align-items: center; justify-content: center; }
.letter .stamp svg, .envelope .stamp svg { width: 40px; height: 32px; color: var(--lilac); /* decor */ }

/* envelope: flap drawn with a clip-path, stamp and postmark */
.envelope { position: relative; background: #f3e6d3; min-height: 190px; box-shadow: 0 6px 16px rgba(60,40,20,.18); overflow: hidden; }
.envelope::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 58%; background: #ead9c1; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.envelope .stamp { right: 16px; top: 14px; width: 62px; height: 74px; transform: rotate(4deg); box-shadow: none; }
.envelope .stamp svg { width: 36px; height: 28px; }
.envelope .postmark {
  position: absolute; right: 60px; top: 36px; width: 74px; height: 74px; border: 2px solid rgba(91,77,64,.35); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transform: rotate(-12deg);
  font-family: var(--type); font-size: 9.5px; line-height: 1.3; text-align: center; color: rgba(91,77,64,.55);
}

/* index card: a red top line --card-line from the top; .index-card--ruled adds a lower, stronger red line and blue ruled lines under it */
.index-card {
  --card-line: 30px; --card-red: rgba(217,130,107,.45); --card-ruled: transparent;
  position: relative; background-color: var(--paper); padding: 14px 16px 16px 14px; box-shadow: 0 4px 10px rgba(60,40,20,.13);
  background-image:
    linear-gradient(transparent var(--card-line), var(--card-red) var(--card-line) calc(var(--card-line) + 1px), transparent calc(var(--card-line) + 1px)),
    repeating-linear-gradient(transparent 0 25px, var(--card-ruled) 25px 26px);
  background-position: 0 0, 0 calc(var(--card-line) + 1px);
}
.index-card--ruled { --card-line: 40px; --card-red: rgba(217,130,107,.6); --card-ruled: rgba(143,183,207,.35); }

/* kraft cardboard: dotted texture */
.kraft {
  position: relative; background-color: var(--kraft); padding: 26px 22px 24px; box-shadow: 0 6px 16px rgba(60,40,20,.18);
  background-image: radial-gradient(rgba(90,60,30,.12) 1px, transparent 1px); background-size: 5px 5px;
}

/* phones: every notebook page gets a narrower margin line, smaller holes and a smaller coffee ring */
@media (max-width: 600px) {
  .notebook { --margin-line: 32px; padding: 26px 18px 30px 46px; }
  .notebook .holes { left: 9px; }
  .notebook .holes i { width: 12px; height: 12px; }
  .notebook .ring { right: 10px; width: 90px; height: 90px; }
}