/* ============================================================
   PAPER-CUT BUTTONS
   ============================================================ */
.cut-1 {
  clip-path: polygon(
    0.7% 3.8%, 15.5% 5.3%, 66.9% 2.4%, 80.5% 0%,
    100% 3.8%, 99.3% 40.2%, 100% 98.1%, 86.5% 96.2%,
    74% 100%, 52% 96.2%, 0.7% 98.1%, 1.3% 78.6%,
    0% 43.6%
  );
}
.cut-2 {
  clip-path: polygon(
    0% 1.9%, 11.3% 3.8%, 28.9% 0%, 58.7% 3.8%,
    99.3% 1.9%, 98.7% 21.4%, 100% 56.4%, 99.3% 96.2%,
    84.8% 92.3%, 35.9% 100%, 17.2% 100%, 0% 96.2%,
    0.7% 59.8%
  );
}
.cut-3 {
  clip-path: polygon(
    1.2% 4.5%, 22.4% 0%, 45.8% 3.2%, 71.3% 1.1%,
    100% 4.2%, 98.8% 55.8%, 100% 97.6%, 78.2% 94.8%,
    55.1% 100%, 30.6% 97.3%, 1.8% 100%, 0% 61.2%,
    1.5% 38.4%
  );
}
/* ============================================================
   PAPER-CUT SECTION DIVIDERS
   Add to a full-width div between sections.
   Set the div's background color to the NEXT section's color.
   Height recommendation: 40–60px.
   ============================================================ */
.divider-cut-1 {
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 79%, 95.6% 87.6%, 91.2% 68%, 87.5% 83.4%, 83.7% 71.5%,
    79.1% 92.5%, 74.8% 70.6%, 70.4% 75.5%, 66.9% 73.4%, 62.3% 89%,
    57.8% 68.5%, 53.5% 79%, 49.2% 75.4%, 44.6% 90.4%, 40.8% 72%,
    36.1% 82.5%, 31.9% 66.4%, 27.4% 78.6%, 22.7% 74.5%, 18.3% 87.6%,
    14.1% 73.4%, 10.5% 83.4%, 6.8% 68.5%, 3.2% 80.4%, 0% 70.6%
  );
}
.divider-cut-2 {
  clip-path: polygon(
    0% 35%, 4.1% 15%, 8.6% 42%, 12.3% 28%, 16.8% 8%,
    21.5% 38%, 25.2% 22%, 29.9% 45%, 33.7% 10%, 38.4% 32%,
    42.6% 48%, 46.3% 18%, 50.8% 40%, 55.1% 5%, 59.7% 35%,
    63.4% 25%, 67.9% 42%, 72.2% 15%, 76.5% 38%, 80.3% 28%,
    84.8% 8%, 88.6% 45%, 92.7% 20%, 96.4% 40%, 100% 22%,
    100% 100%, 0% 100%
  );
}
.divider-cut-3 {
  clip-path: polygon(
    0% 25%, 2.8% 40%, 5.9% 10%, 9.7% 35%, 13.4% 20%,
    17.8% 48%, 21.6% 12%, 26.1% 38%, 30.3% 30%, 34.7% 5%,
    38.9% 42%, 43.2% 18%, 47.6% 45%, 51.4% 22%, 55.8% 8%,
    60.3% 40%, 64.1% 28%, 68.7% 48%, 72.9% 15%, 77.2% 35%,
    81.5% 10%, 85.3% 42%, 89.8% 25%, 93.6% 38%, 97.4% 12%,
    100% 32%, 100% 100%, 0% 100%
  );
}
/* ============================================
   TABLET — ~30% fewer angles
   ============================================ */
@media (max-width: 1024px) {
  .divider-cut-1 {
    clip-path: polygon(
      0% 0%, 100% 0%,
      100% 79%, 91.2% 68%, 83.7% 71.5%, 74.8% 70.6%, 66.9% 73.4%,
      57.8% 68.5%, 49.2% 75.4%, 40.8% 72%, 31.9% 66.4%, 22.7% 74.5%,
      14.1% 73.4%, 6.8% 68.5%, 0% 70.6%
    );
  }
  .divider-cut-2 {
    clip-path: polygon(
      0% 35%, 8.6% 42%, 16.8% 8%, 25.2% 22%, 33.7% 10%,
      42.6% 48%, 50.8% 40%, 59.7% 35%, 67.9% 42%, 76.5% 38%,
      84.8% 8%, 92.7% 20%, 100% 22%,
      100% 100%, 0% 100%
    );
  }
  .divider-cut-3 {
    clip-path: polygon(
      0% 25%, 5.9% 10%, 13.4% 20%, 21.6% 12%, 30.3% 30%,
      38.9% 42%, 47.6% 45%, 55.8% 8%, 64.1% 28%, 72.9% 15%,
      81.5% 10%, 89.8% 25%, 97.4% 12%, 100% 32%,
      100% 100%, 0% 100%
    );
  }
}
/* ============================================================
   PAPER-CUT IMAGE WRAPPERS
   Add to any image or div wrapping an image.
   Cuts all four edges with rough, organic shapes.
   ============================================================ */
.img-cut-1 {
  clip-path: polygon(
    0.6% 0.9%, 16.7% 1.05%, 34.1% 0.75%, 51.6% 1.15%,
    68.9% 0.95%, 86.1% 1%, 100% 0.7%,
    99.6% 8.6%, 100% 17.2%, 99.4% 26.5%,
    100% 36.1%, 99.7% 45.8%, 100% 55.3%, 99.3% 64.7%,
    100% 74.2%, 99.55% 83.8%, 100% 92.4%, 99.65% 98.6%,
    84.2% 98.9%, 66.3% 98.6%, 48.4% 99.05%, 30.1% 98.75%,
    12.3% 99.15%, 0% 98.95%,
    0.55% 91.2%, 0% 82.5%, 0.7% 73.1%, 0.15% 63.8%,
    0.8% 54.4%, 0% 44.7%, 0.6% 35.6%, 0.25% 26.3%,
    0.9% 16.8%, 0% 8.2%
  );
}
.img-cut-2 {
  clip-path: polygon(
    0% 1.2%, 14.8% 1.3%, 30.9% 0.9%, 46.3% 1.45%,
    62.4% 1.1%, 78.6% 0.8%, 95.1% 1.25%, 100% 0.45%,
    99.2% 10.4%, 100% 20.8%, 99.45% 31.5%, 100% 42.1%,
    99.1% 52.6%, 100% 62.3%, 99.55% 72.9%, 100% 82.7%,
    99.35% 93.1%, 100% 98.2%,
    82.4% 98.8%, 64.5% 99.25%, 46.2% 98.55%, 28.1% 99.4%,
    10.7% 98.7%, 0% 99.25%,
    0.75% 89.8%, 0% 80.3%, 0.9% 70.6%, 0.2% 60.9%,
    0.65% 51.4%, 0% 41.7%, 0.85% 32.2%, 0.3% 22.5%,
    0.7% 12.8%
  );
}
.img-cut-3 {
  clip-path: polygon(
    0.4% 0.3%, 18.3% 0%, 36.2% 0.2%, 53.8% 0.15%,
    71.7% 0.4%, 89.4% 0.1%, 100% 0.85%,
    99.3% 11.3%, 100% 22.6%, 99.6% 33.2%, 100% 44.5%,
    99.2% 55.1%, 100% 65.8%, 99.75% 76.4%, 100% 86.3%,
    99.4% 95.7%, 100% 99.1%,
    80.7% 100%, 61.8% 99.85%, 42.9% 100%, 24.1% 99.95%,
    5.6% 100%, 0% 99.2%,
    0.8% 87.6%, 0% 76.8%, 0.65% 66.1%, 0.25% 55.5%,
    0.95% 44.9%, 0% 34.3%, 0.55% 23.6%, 0.2% 12.9%
  );
}
.textured-sun::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.75 0 0 0 0 0.72 0 0 0 0 0.68 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
.hover-underline {
  position: relative;
  text-decoration: none;
  display: inline-block;        /* so the underline matches the text width */
}
.hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 4px;
  background: currentColor;     /* matches the text color automatically */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.hover-underline:hover::after {
  transform: scaleX(1);
}
.hover-underline.is-active::after {
  transform-origin: left;
  transform: scaleX(1);
}