/* ============================================================
   The hero sticker on a post peels (peel.js). Drag its bottom-right
   corner and it lifts and folds back, showing its white backing; let go
   past halfway, or press it, and it rolls up off the wall. Sprayed on the
   wall under it: WALANG FOREVER, with a marker note that a gift card is
   the exception. Without the script the sticker sits as on the blog home.
   ============================================================ */

.peel { position: relative; }

/* The sticker is the button: no button chrome, the die-cut shape keeps its focus ring. */
.peel .slap { display: block; width: 100%; padding: 0; border: 0; border-radius: 22px; background: none; color: inherit; font: inherit; text-align: left;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:where(.peel .slap) span { display: block; }
.peel .slap:focus-visible { outline: 3px solid var(--kp-ink); outline-offset: 5px; box-shadow: 0 0 0 5px var(--on-dark); }
.peel.is-live .slap { cursor: pointer; will-change: transform; }
.peel .slap:disabled { cursor: default; }

/* The face darkens where it starts to lift into the curl (--curl, set by the script). */
.peel .slap__face::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: var(--curl, none); }
/* The wall under the lifted part, in the curl's shadow. */
.slap__shade { position: absolute; inset: 0; border-radius: 22px; pointer-events: none; }
/* The backing, folded back over the face: a wrapper so its shadow is not clipped with it. */
.slap__flap { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(1px 3px 3px rgba(28, 20, 32, .28)) drop-shadow(3px 9px 9px rgba(28, 20, 32, .2)); }
.peel.is-live .slap__peel { inset: 0; width: auto; height: auto; border-radius: 22px; transform-origin: 0 0; }
/* The corner to grab: a thumb-sized target; only it stops the page from scrolling under a finger. */
.slap__grip { position: absolute; right: -14px; bottom: -14px; width: 64px; height: 64px; touch-action: none; cursor: grab; }
.peel.is-dragging .slap__grip { cursor: grabbing; }
.peel:not(.is-live) .slap__grip, .peel:not(.is-live) .slap__shade, .peel.is-off .slap__grip { display: none; }

/* ---- Under the sticker ---- */
.peel__wall { position: absolute; inset: 0; container-type: inline-size; pointer-events: none; will-change: transform; }
/* Where it was stuck: a slightly cleaner patch and a faint glue line, seen once it is off. */
.peel__wall::before { content: ""; position: absolute; inset: 0; border-radius: 22px; background: rgba(250, 246, 240, .07); box-shadow: inset 0 0 0 1px rgba(28, 20, 32, .07); }
.peel__spray { position: absolute; left: 5%; top: 26%; font-weight: 800; font-size: 14.6cqw; line-height: .88; letter-spacing: -.02em;
  color: var(--kp-pink); -webkit-text-stroke: .05em var(--kp-cream); paint-order: stroke fill;
  text-shadow: .02em .025em 0 var(--kp-amber), .04em .05em 0 var(--kp-amber), .06em .075em 0 var(--kp-orange);
  transform: rotate(-11deg); filter: url(#spray); }
.peel__spray > span { display: block; width: fit-content; }
.peel__spray > span + span { margin-left: .5em; }
.dr--p { --x: 18%; --h: .5em; }
.dr--q { --x: 66%; --h: .7em; --t: .3s; }
/* The asterisk's footnote, in marker. */
.peel__note { position: absolute; left: 10%; top: 77%; font-weight: 650; font-size: 5cqw; line-height: 1; letter-spacing: -.01em; color: var(--kp-ink); white-space: nowrap; transform: rotate(-9deg); }
.peel__arrow { position: absolute; left: 77%; top: 48%; width: 11cqw; transform: rotate(-12deg); }

/* ---- First view: a marker hint at the corner ---- */
.peel__hint { position: absolute; right: 14%; top: calc(100% + 4px); display: flex; align-items: flex-start; gap: 2px;
  font-weight: 700; font-size: 16px; line-height: 1; color: var(--kp-ink); white-space: nowrap; pointer-events: none;
  transform: rotate(-14deg); transition: opacity .3s, visibility .3s; }
.peel__hint svg { width: 34px; margin-top: -22px; }
.peel:not(.is-live) .peel__hint, .peel.is-known .peel__hint { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .peel__hint { animation: nudge 2.4s ease-in-out 1.2s infinite; }
  @keyframes nudge { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 3px -3px; } 90% { translate: 0 0; } }
}
@media (max-width: 860px) {
  /* Lower, so the patch's drip above does not run into WALANG. */
  .peel__spray { top: 31%; transform: rotate(-8deg); }
  .peel__note { top: 80%; transform: rotate(-6deg); }
}
/* Where the sticker hangs under the patch's middle drip, that drip ran onto the sticker and stops at its top edge, so it never crosses WALANG. */
@media (max-width: 456px) { .piece__drips i:nth-child(3) { height: 30px; } }