.art-paper-anchor {
  position: relative;
  z-index: 12;
  display: inline-block;
  white-space: nowrap;
}

.art-paper-trigger {
  --paper-grain: url("./assets/art-paper-fibers.svg?v=8");
  --strip-edge: polygon(0% 3.8%, 0.88% 3.8%, 2.76% 5.15%, 4.21% 4.67%, 5.46% 4.42%, 6.35% 5.05%, 7.91% 3.45%, 9.17% 5.02%, 10.52% 5.58%, 12.58% 4.55%, 13.46% 1.38%, 14.6% 2.13%, 16.3% 3.48%, 17.8% 2.52%, 19.33% 0.2%, 20.79% 0.82%, 22.11% 0.2%, 23.74% 3.98%, 24.58% 2.95%, 25.36% 2.3%, 26.33% 4.53%, 28.06% 5.15%, 29.11% 4.75%, 30.8% 4.25%, 32.78% 4.82%, 33.92% 5.13%, 35.32% 3.02%, 36.9% 2.05%, 38.26% 3.63%, 39.01% 3.77%, 39.88% 3.48%, 41.09% 0.78%, 43.19% 0.43%, 44.15% 1.98%, 45.23% 2%, 46.62% 2.18%, 48.1% 1.27%, 49.14% 3%, 50.47% 2.63%, 52.45% 1.27%, 53.58% 3.72%, 54.41% 4.67%, 55.7% 3.28%, 56.71% 5.97%, 57.52% 5.52%, 59.22% 5.85%, 60.92% 3.63%, 62.41% 5.53%, 63.22% 5.08%, 64.88% 2.12%, 66.93% 1.92%, 67.69% 1.58%, 69.14% 0.33%, 70.68% 1.72%, 71.88% 2.83%, 73.47% 3.72%, 75.39% 3.63%, 77.4% 4.12%, 78.81% 1.53%, 80.16% 4.03%, 82.22% 4.67%, 83.75% 2.7%, 85.37% 2.57%, 86.31% 2.55%, 88.06% 5.73%, 89.61% 2.12%, 91.36% 1.93%, 93.06% 3.35%, 95.09% 0.93%, 96.16% 1.33%, 97% 3.63%, 98.59% 0.37%, 99.99% 0.45%, 100% 3.78%, 99.76% 11.67%, 100% 18.33%, 99.47% 26.67%, 99.79% 33.33%, 99.55% 45%, 99.44% 53.33%, 99.98% 63.33%, 99.62% 71.67%, 99.31% 81.67%, 99.86% 91.67%, 100% 96.85%, 98.22% 95.83%, 96.23% 98.33%, 94.06% 97.88%, 92.42% 95.97%, 90.84% 96.3%, 88.62% 94.03%, 87.11% 95.07%, 85.95% 93.95%, 84.02% 95.75%, 82.22% 94.75%, 80.72% 94.68%, 79.7% 94.87%, 77.96% 98.13%, 76.33% 98.28%, 75.42% 97.48%, 74.42% 97.7%, 73.25% 96.82%, 71.12% 98.15%, 69.97% 97.9%, 68.76% 99.03%, 67.38% 99.03%, 65.72% 97.95%, 64.04% 97.27%, 63.15% 97.83%, 61.45% 95.17%, 59.94% 97.65%, 58.19% 95.75%, 56.62% 93.63%, 55.1% 95%, 53.37% 94.78%, 52.36% 96.82%, 51.2% 94.55%, 49.77% 97.68%, 47.95% 94.98%, 47.02% 96.65%, 46.12% 95.82%, 45.16% 98.55%, 43.08% 99.05%, 41.33% 96.03%, 40.13% 99.23%, 39.27% 97.95%, 37.31% 96.9%, 36.01% 98.22%, 34.26% 95.97%, 32.31% 95.2%, 31.29% 95.85%, 30.19% 96.1%, 28.88% 96.85%, 26.9% 96.62%, 24.86% 94.33%, 23.1% 96.4%, 21.09% 95.12%, 18.98% 95.23%, 16.89% 96.97%, 16% 98.17%, 14.08% 97.23%, 11.89% 99.05%, 9.93% 98.9%, 8.09% 96.43%, 6.44% 95.97%, 4.91% 96.43%, 3.08% 99.03%, 1.99% 97.37%, 0.78% 98.68%, 0% 96.22%, 0.1% 88.33%, 0.5% 81.67%, 0.35% 73.33%, 0.4% 65%, 0.34% 56.67%, 0.1% 46.67%, 0.06% 36.67%, 0.47% 28.33%, 0.07% 20%, 0.29% 11.67%);
  appearance: none;
  position: relative;
  display: inline-block;
  z-index: 12;
  margin: 0 6px 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
  perspective: 650px;
  perspective-origin: 0 50%;
  isolation: isolate;
}

/* The cut-out stays in the page while its printed surface peels away. */
.art-paper-trigger::before,
.art-paper-trigger::after {
  position: absolute;
  content: "";
  inset: -8px -6px -5px -12px;
  clip-path: var(--strip-edge);
  pointer-events: none;
}

.art-paper-trigger::before {
  inset: -11px -9px -8px -15px;
  z-index: -2;
  clip-path: none;
  background: url('./assets/art-paper-cut-edge.svg?v=8') center / 100% 100% no-repeat;
  opacity: .9;
  transition: opacity 400ms ease;
}

.art-paper-trigger::after {
  z-index: -1;
  background-color: var(--paper);
  background-image: linear-gradient(180deg, #dcd4dcb3, #ece6ec80 16%, transparent 65%), var(--paper-grain);
  background-size: 100% 100%;
  box-shadow: inset 0 2px 4px #82738632, inset -1px 0 2px #99879a28,
    inset 0 -1px 1px #fffdfdc0;
  opacity: 0;
  transition: opacity 280ms 550ms ease;
}

.art-paper-trigger[aria-expanded="true"]::after {
  opacity: 1;
  transition: opacity 160ms 60ms ease;
}

.art-paper-trigger[aria-expanded="true"]::before { opacity: 1; }

.art-paper-trigger:focus-visible {
  outline: 2px solid var(--d1);
  outline-offset: 11px;
}

.art-paper-label { opacity: 0; pointer-events: none; }

.art-paper-flap {
  position: absolute;
  /* Match the opening's bounds, including when the text line height changes. */
  inset: -8px -6px -5px -12px;
  pointer-events: none;
}

.art-paper-flat {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1200ms cubic-bezier(.35, 0, .2, 1);
}

.art-paper-trigger[aria-expanded="true"] .art-paper-flat {
  clip-path: inset(0 calc(100% - 12px) 0 0);
}

.art-paper-skin {
  position: absolute;
  inset: 0;
  clip-path: var(--strip-edge);
  background-color: var(--paper);
  background-image: var(--paper-grain), linear-gradient(173deg,
    #fffdfb70, transparent 25%, transparent 63%, #b6a7b214 88%, #fffdfb60);
  background-size: 100% 100%;
}

/* The paper turn starts flat and grows only as material peels into it. */
.art-paper-roll {
  position: absolute;
  top: -3px;
  left: 0;
  display: block;
  width: 24px;
  height: calc(100% + 6px);
  max-width: none;
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(.7px 1px .9px #5d4d5a1c);
  transform-origin: 12px 50%;
  transform: translateX(calc(var(--strip-width) - 12px)) scale(.001, .94);
  transition: transform 1200ms cubic-bezier(.35, 0, .2, 1),
    opacity 120ms 1080ms ease, visibility 0s 1200ms;
}

.art-paper-trigger[aria-expanded="true"] .art-paper-roll {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1, 1);
  transition: transform 1200ms cubic-bezier(.35, 0, .2, 1),
    opacity 160ms 60ms ease, visibility 0s;
}

.art-paper-print {
  position: absolute;
  top: 10px;
  left: 12px;
  line-height: 1.12;
}

.site-canvas { padding-bottom: var(--art-paper-space, 0px); }

.art-paper {
  position: absolute;
  width: 360px;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 400ms;
}

.art-paper[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* The leader skirts the paragraph before branching toward the two entries. */
.art-paper-sketch {
  --line-draw-duration: 650ms;
  position: absolute;
  z-index: 13;
  top: 0;
  left: 0;
  width: 360px;
  height: 196px;
  overflow: visible;
  pointer-events: none;
  color: #71686e;
  filter: url('./assets/signature-pencil-edge.svg#pencil-edge');
  -webkit-mask-image: url('./assets/signature-ink-grain.svg?v=pencil-tooth-1');
  mask-image: url('./assets/signature-ink-grain.svg?v=pencil-tooth-1');
}

.art-paper-sketch path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity 180ms ease, stroke-dashoffset 280ms ease;
}

.art-paper[data-open="true"] .art-paper-sketch path {
  stroke-dashoffset: 0;
  opacity: .78;
  transition: stroke-dashoffset var(--line-draw-duration) var(--draw-delay) ease,
    opacity 120ms var(--draw-delay) ease;
}

/* Finish each curved line before drawing its separate arrowhead. */
.art-paper[data-open="true"] .art-paper-sketch .art-paper-arrowhead {
  transition-duration: 160ms, 120ms;
  transition-delay: calc(var(--draw-delay) + var(--line-draw-duration));
}

/* Both words start inside the hole and settle below the intro text. */
.art-paper-list {
  display: block;
  position: relative;
  z-index: 10;
  margin: 0;
  padding: 70px 0 12px 18px;
  color: #49453f;
  font-family: 'Reenie Beanie', 'Segoe Print', cursive;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  list-style: none;
}

.art-paper-list [role="listitem"] {
  --fly-x: 112px;
  --fly-y: -64px;
  --rest-x: 0px;
  --rest-angle: -2.5deg;
  --flight-delay: 420ms;
  display: block;
  width: max-content;
  opacity: 0;
  transform: translate(var(--fly-x), var(--fly-y)) rotate(-12deg) scale(.28);
  transform-origin: 0 50%;
  filter: url('./assets/signature-pencil-edge.svg#pencil-edge');
  -webkit-mask-image: url('./assets/signature-ink-grain.svg?v=pencil-tooth-1');
  mask-image: url('./assets/signature-ink-grain.svg?v=pencil-tooth-1');
  translate: 0 0;
  rotate: 0deg;
  transition: transform 380ms cubic-bezier(.5, 0, .7, .5), opacity 220ms ease,
    translate 240ms ease, rotate 240ms ease;
}

.art-paper-list [role="listitem"] + [role="listitem"] {
  --fly-y: -101px;
  --rest-x: 18px;
  --rest-angle: 1.5deg;
  --flight-delay: 560ms;
  margin-top: 0;
}

.art-paper-list a,
.art-paper-list a:hover {
  color: inherit;
  text-decoration: none;
}

.art-paper-list a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 900px) {
  /* Reserve room below this text line for the handwritten links. */
  .art-paper-anchor:has([aria-expanded="true"]) { margin-bottom: 176px; }
  .art-paper-sketch { width: 100%; }
  .art-paper-list { font-size: 30px; }
  .art-paper-list a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  .art-paper-list [role="listitem"]:hover,
  .art-paper-list [role="listitem"]:focus-within {
    translate: 3px -3px;
    rotate: -1.5deg;
  }
}

.art-paper[data-open="true"] [role="listitem"] {
  opacity: 1;
  transform: translate(var(--rest-x), 0) rotate(var(--rest-angle));
  animation: pencil-flight 900ms var(--flight-delay) both;
}

@keyframes pencil-flight {
  0% {
    opacity: 0;
    transform: translate(var(--fly-x), var(--fly-y)) rotate(-12deg) scale(.28);
  }
  24% { opacity: 1; }
  72% {
    opacity: 1;
    transform: translate(calc(var(--rest-x) + 8px), -7px) rotate(calc(var(--rest-angle) + 3deg)) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translate(var(--rest-x), 0) rotate(var(--rest-angle)) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-paper,
  .art-paper-list [role="listitem"],
  .art-paper-sketch path,
  .art-paper-flat,
  .art-paper-roll,
  .art-paper-trigger::before,
  .art-paper-trigger::after {
    animation: none !important;
    transition: none !important;
  }

  .art-paper-list [role="listitem"] {
    transform: translate(var(--rest-x), 0) rotate(var(--rest-angle));
  }
}