/* =========================================================
   Parchment textures
   -----------------------------------------------------------
   Shared "paper" look lives in the base rules below, on a
   dedicated .parchment-bg layer that sits behind the content.
   Each .parchment-variant-N (N = 1..25) then layers on a
   slightly different hue tint, a faint stain/ink-mark, a
   hand-tilt, and a jagged torn edge along the top and bottom -
   so no two adjacent cells look quite the same. The hue tint
   and stains live only on .parchment-bg (never on the text),
   so readability is unaffected by the variant.
   ========================================================= */

.parchment-card {
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow:
        0 14px 26px rgba(0, 0, 0, 0.5),
        0 2px 0 rgba(0, 0, 0, 0.25);
    will-change: transform;
}

.parchment-card:hover {
    transform: translateY(-3px) scale(1.005) rotate(var(--p-rotate, 0deg));
}

/* the actual paper: gradient + grain, sits behind the content, gets clipped
   to the jagged variant shape along with everything else in the card */
.parchment-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(160deg, rgba(255,255,255,0.10), transparent 45%),
        repeating-linear-gradient(115deg, rgba(90, 65, 30, 0.05) 0px, rgba(90, 65, 30, 0.05) 1px, transparent 1px, transparent 5px),
        linear-gradient(175deg, #ecdfbc 0%, #e2cd9d 55%, #d9c091 100%);
    box-shadow: inset 0 0 60px rgba(120, 85, 40, 0.18);
}

.parchment-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.15), transparent 70%);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.parchment-content {
    position: relative;
    z-index: 1;
}


.parchment-variant-1 {
    --p-rotate: -0.14deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 3.0%, 12.5% 0.19%, 25.0% 2.68%, 37.5% 1.29%, 50.0% 1.78%, 62.5% 1.71%, 75.0% 1.96%, 87.5% 2.59%, 100.0% 0.4%, 100.0% 98.37%, 87.5% 97.65%, 75.0% 98.8%, 62.5% 98.35%, 50.0% 99.14%, 37.5% 97.92%, 25.0% 97.57%, 12.5% 98.33%, 0.0% 97.58%);
}

.parchment-variant-1 .parchment-bg {
    background-color: hsl(34.7, 58.9%, 62.7%);
    background-blend-mode: hue;
}

.parchment-variant-1 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 65.9% 33.5%, rgba(94, 56, 20, 0.16), transparent 18.6%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-2 {
    --p-rotate: 0.2deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 0.57%, 12.5% 1.01%, 25.0% 1.45%, 37.5% 1.28%, 50.0% 0.32%, 62.5% 2.69%, 75.0% 0.92%, 87.5% 3.16%, 100.0% 0.93%, 100.0% 99.36%, 87.5% 97.37%, 75.0% 98.79%, 62.5% 99.09%, 50.0% 99.62%, 37.5% 98.26%, 25.0% 99.71%, 12.5% 98.15%, 0.0% 98.2%);
}

.parchment-variant-2 .parchment-bg {
    background-color: hsl(61.8, 58.7%, 59.7%);
    background-blend-mode: hue;
}

.parchment-variant-2 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 71.5% 50.2%, rgba(40, 30, 15, 0.20), transparent 19.9%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-3 {
    --p-rotate: 1.12deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 0.6%, 12.5% 2.97%, 25.0% 0.23%, 37.5% 0.25%, 50.0% 0.7%, 62.5% 2.39%, 75.0% 2.09%, 87.5% 1.15%, 100.0% 2.94%, 100.0% 97.64%, 87.5% 97.62%, 75.0% 97.04%, 62.5% 99.6%, 50.0% 99.18%, 37.5% 98.7%, 25.0% 97.85%, 12.5% 97.88%, 0.0% 99.76%);
}

.parchment-variant-3 .parchment-bg {
    background-color: hsl(98.5, 38.2%, 60.3%);
    background-blend-mode: hue;
}

.parchment-variant-3 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 71.0% 66.4%, rgba(40, 30, 15, 0.20), transparent 18.0%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-4 {
    --p-rotate: 0.78deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.68%, 12.5% 1.17%, 25.0% 1.28%, 37.5% 0.54%, 50.0% 2.55%, 62.5% 3.15%, 75.0% 0.31%, 87.5% 2.89%, 100.0% 1.07%, 100.0% 98.09%, 87.5% 98.03%, 75.0% 96.94%, 62.5% 97.79%, 50.0% 98.87%, 37.5% 98.87%, 25.0% 97.44%, 12.5% 99.76%, 0.0% 97.38%);
}

.parchment-variant-4 .parchment-bg {
    background-color: hsl(135.4, 56.2%, 57.9%);
    background-blend-mode: hue;
}

.parchment-variant-4 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 32.7% 51.5%, rgba(40, 30, 15, 0.20), transparent 29.8%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-5 {
    --p-rotate: 0.47deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.87%, 12.5% 1.9%, 25.0% 1.82%, 37.5% 0.76%, 50.0% 1.22%, 62.5% 2.4%, 75.0% 0.12%, 87.5% 2.59%, 100.0% 0.45%, 100.0% 96.84%, 87.5% 99.35%, 75.0% 97.11%, 62.5% 97.98%, 50.0% 97.63%, 37.5% 97.0%, 25.0% 97.43%, 12.5% 98.01%, 0.0% 98.2%);
}

.parchment-variant-5 .parchment-bg {
    background-color: hsl(166.0, 57.3%, 56.0%);
    background-blend-mode: hue;
}

.parchment-variant-5 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 79.6% 45.9%, rgba(40, 30, 15, 0.20), transparent 21.7%),
            radial-gradient(circle at 20.7% 36.2%, rgba(122, 31, 31, 0.14), transparent 17.4%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.parchment-variant-5::after {
    content: "";
    position: absolute;
    left: 76.9%;
    top: 82.1%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(122,31,31,0.6), rgba(90,15,15,0.4) 70%, transparent 76%);
    z-index: 2;
    pointer-events: none;
}

.parchment-variant-6 {
    --p-rotate: -0.66deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.28%, 12.5% 1.15%, 25.0% 0.9%, 37.5% 3.17%, 50.0% 0.96%, 62.5% 1.58%, 75.0% 2.25%, 87.5% 0.94%, 100.0% 2.7%, 100.0% 99.58%, 87.5% 98.19%, 75.0% 98.01%, 62.5% 99.11%, 50.0% 97.82%, 37.5% 97.68%, 25.0% 97.28%, 12.5% 99.52%, 0.0% 98.0%);
}

.parchment-variant-6 .parchment-bg {
    background-color: hsl(202.3, 39.6%, 55.0%);
    background-blend-mode: hue;
}

.parchment-variant-6 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 12.5% 50.5%, rgba(94, 56, 20, 0.16), transparent 24.6%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-7 {
    --p-rotate: -1.12deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 2.48%, 12.5% 0.95%, 25.0% 0.85%, 37.5% 1.12%, 50.0% 2.15%, 62.5% 1.88%, 75.0% 0.79%, 87.5% 1.31%, 100.0% 2.2%, 100.0% 97.37%, 87.5% 96.95%, 75.0% 98.36%, 62.5% 98.72%, 50.0% 98.68%, 37.5% 97.43%, 25.0% 98.03%, 12.5% 97.49%, 0.0% 98.34%);
}

.parchment-variant-7 .parchment-bg {
    background-color: hsl(225.3, 56.4%, 56.2%);
    background-blend-mode: hue;
}

.parchment-variant-7 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 83.4% 20.9%, rgba(122, 31, 31, 0.14), transparent 21.4%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-8 {
    --p-rotate: 0.06deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.57%, 12.5% 3.04%, 25.0% 1.7%, 37.5% 2.48%, 50.0% 0.09%, 62.5% 2.78%, 75.0% 1.4%, 87.5% 0.72%, 100.0% 2.84%, 100.0% 98.74%, 87.5% 97.19%, 75.0% 98.09%, 62.5% 98.0%, 50.0% 99.26%, 37.5% 98.43%, 25.0% 98.3%, 12.5% 99.87%, 0.0% 97.15%);
}

.parchment-variant-8 .parchment-bg {
    background-color: hsl(266.6, 50.2%, 63.1%);
    background-blend-mode: hue;
}

.parchment-variant-8 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 26.5% 78.0%, rgba(70, 90, 60, 0.10), transparent 20.4%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-9 {
    --p-rotate: 0.53deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.05%, 12.5% 1.5%, 25.0% 1.21%, 37.5% 0.99%, 50.0% 2.74%, 62.5% 2.05%, 75.0% 0.06%, 87.5% 1.57%, 100.0% 3.18%, 100.0% 97.64%, 87.5% 99.36%, 75.0% 98.35%, 62.5% 97.32%, 50.0% 97.0%, 37.5% 97.19%, 25.0% 97.71%, 12.5% 98.45%, 0.0% 98.82%);
}

.parchment-variant-9 .parchment-bg {
    background-color: hsl(300.1, 42.9%, 54.7%);
    background-blend-mode: hue;
}

.parchment-variant-9 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 14.9% 43.3%, rgba(40, 30, 15, 0.20), transparent 22.0%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-10 {
    --p-rotate: -0.95deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 2.03%, 12.5% 0.95%, 25.0% 0.93%, 37.5% 0.03%, 50.0% 2.75%, 62.5% 1.14%, 75.0% 2.41%, 87.5% 2.68%, 100.0% 3.13%, 100.0% 98.78%, 87.5% 98.45%, 75.0% 99.57%, 62.5% 98.7%, 50.0% 97.83%, 37.5% 99.24%, 25.0% 98.34%, 12.5% 97.87%, 0.0% 97.31%);
}

.parchment-variant-10 .parchment-bg {
    background-color: hsl(335.6, 46.5%, 56.8%);
    background-blend-mode: hue;
}

.parchment-variant-10 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 33.3% 55.2%, rgba(40, 30, 15, 0.20), transparent 16.8%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.parchment-variant-10::after {
    content: "";
    position: absolute;
    left: 78.1%;
    top: 88.1%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(122,31,31,0.6), rgba(90,15,15,0.4) 70%, transparent 76%);
    z-index: 2;
    pointer-events: none;
}

.parchment-variant-11 {
    --p-rotate: 0.37deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.91%, 12.5% 1.1%, 25.0% 1.65%, 37.5% 2.44%, 50.0% 3.11%, 62.5% 3.05%, 75.0% 0.77%, 87.5% 2.85%, 100.0% 2.13%, 100.0% 97.64%, 87.5% 98.14%, 75.0% 98.24%, 62.5% 99.82%, 50.0% 97.31%, 37.5% 98.24%, 25.0% 99.17%, 12.5% 97.33%, 0.0% 99.26%);
}

.parchment-variant-11 .parchment-bg {
    background-color: hsl(6.2, 44.6%, 54.6%);
    background-blend-mode: hue;
}

.parchment-variant-11 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 55.0% 18.0%, rgba(122, 31, 31, 0.14), transparent 25.2%),
            radial-gradient(circle at 21.2% 37.3%, rgba(70, 90, 60, 0.10), transparent 31.1%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-12 {
    --p-rotate: -0.72deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 0.45%, 12.5% 0.25%, 25.0% 1.58%, 37.5% 1.76%, 50.0% 2.97%, 62.5% 0.97%, 75.0% 1.15%, 87.5% 1.31%, 100.0% 2.49%, 100.0% 97.36%, 87.5% 97.35%, 75.0% 98.43%, 62.5% 97.87%, 50.0% 99.11%, 37.5% 97.97%, 25.0% 99.84%, 12.5% 97.97%, 0.0% 97.98%);
}

.parchment-variant-12 .parchment-bg {
    background-color: hsl(39.6, 36.7%, 59.4%);
    background-blend-mode: hue;
}

.parchment-variant-12 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 26.7% 54.7%, rgba(122, 31, 31, 0.14), transparent 29.0%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-13 {
    --p-rotate: 0.47deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 0.61%, 12.5% 0.51%, 25.0% 0.31%, 37.5% 3.07%, 50.0% 0.63%, 62.5% 2.28%, 75.0% 0.73%, 87.5% 3.07%, 100.0% 1.97%, 100.0% 99.31%, 87.5% 97.13%, 75.0% 98.46%, 62.5% 99.95%, 50.0% 97.28%, 37.5% 98.77%, 25.0% 99.01%, 12.5% 99.61%, 0.0% 97.28%);
}

.parchment-variant-13 .parchment-bg {
    background-color: hsl(71.0, 54.9%, 52.6%);
    background-blend-mode: hue;
}

.parchment-variant-13 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 70.9% 18.3%, rgba(122, 31, 31, 0.14), transparent 24.4%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-14 {
    --p-rotate: -0.44deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 3.05%, 12.5% 2.12%, 25.0% 0.87%, 37.5% 2.43%, 50.0% 3.04%, 62.5% 2.36%, 75.0% 0.08%, 87.5% 1.23%, 100.0% 2.04%, 100.0% 98.16%, 87.5% 98.95%, 75.0% 97.38%, 62.5% 99.0%, 50.0% 99.5%, 37.5% 99.44%, 25.0% 98.97%, 12.5% 99.35%, 0.0% 99.78%);
}

.parchment-variant-14 .parchment-bg {
    background-color: hsl(105.6, 39.7%, 58.9%);
    background-blend-mode: hue;
}

.parchment-variant-14 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 81.4% 63.9%, rgba(94, 56, 20, 0.16), transparent 16.3%),
            radial-gradient(circle at 21.5% 35.6%, rgba(70, 90, 60, 0.10), transparent 21.5%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-15 {
    --p-rotate: -1.28deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 2.2%, 12.5% 2.07%, 25.0% 2.39%, 37.5% 0.42%, 50.0% 2.31%, 62.5% 1.07%, 75.0% 0.03%, 87.5% 0.97%, 100.0% 2.28%, 100.0% 98.02%, 87.5% 99.59%, 75.0% 97.28%, 62.5% 97.16%, 50.0% 97.18%, 37.5% 99.99%, 25.0% 99.02%, 12.5% 98.76%, 0.0% 99.42%);
}

.parchment-variant-15 .parchment-bg {
    background-color: hsl(131.3, 35.8%, 62.7%);
    background-blend-mode: hue;
}

.parchment-variant-15 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 21.1% 60.9%, rgba(122, 31, 31, 0.14), transparent 18.3%),
            radial-gradient(circle at 71.3% 54.1%, rgba(60, 45, 20, 0.15), transparent 32.2%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.parchment-variant-15::after {
    content: "";
    position: absolute;
    left: 75.5%;
    top: 89.8%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(122,31,31,0.6), rgba(90,15,15,0.4) 70%, transparent 76%);
    z-index: 2;
    pointer-events: none;
}

.parchment-variant-16 {
    --p-rotate: 0.77deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.62%, 12.5% 3.1%, 25.0% 0.43%, 37.5% 2.46%, 50.0% 0.74%, 62.5% 2.26%, 75.0% 2.5%, 87.5% 2.97%, 100.0% 1.1%, 100.0% 97.92%, 87.5% 99.52%, 75.0% 99.13%, 62.5% 98.85%, 50.0% 99.88%, 37.5% 97.7%, 25.0% 98.21%, 12.5% 97.9%, 0.0% 99.54%);
}

.parchment-variant-16 .parchment-bg {
    background-color: hsl(172.3, 47.4%, 59.5%);
    background-blend-mode: hue;
}

.parchment-variant-16 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 54.3% 43.0%, rgba(60, 45, 20, 0.15), transparent 33.5%),
            radial-gradient(circle at 46.5% 47.9%, rgba(122, 31, 31, 0.14), transparent 17.3%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-17 {
    --p-rotate: 0.31deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 2.17%, 12.5% 2.87%, 25.0% 1.48%, 37.5% 0.6%, 50.0% 0.46%, 62.5% 1.71%, 75.0% 0.81%, 87.5% 0.1%, 100.0% 0.93%, 100.0% 98.27%, 87.5% 97.15%, 75.0% 99.8%, 62.5% 97.57%, 50.0% 98.19%, 37.5% 97.74%, 25.0% 97.46%, 12.5% 98.41%, 0.0% 98.06%);
}

.parchment-variant-17 .parchment-bg {
    background-color: hsl(202.9, 36.8%, 54.4%);
    background-blend-mode: hue;
}

.parchment-variant-17 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 74.4% 27.9%, rgba(122, 31, 31, 0.14), transparent 23.5%),
            radial-gradient(circle at 66.4% 53.0%, rgba(70, 90, 60, 0.10), transparent 24.7%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-18 {
    --p-rotate: 0.18deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.18%, 12.5% 1.22%, 25.0% 1.58%, 37.5% 0.96%, 50.0% 2.65%, 62.5% 1.85%, 75.0% 0.57%, 87.5% 2.03%, 100.0% 1.38%, 100.0% 99.53%, 87.5% 97.61%, 75.0% 99.97%, 62.5% 97.21%, 50.0% 97.89%, 37.5% 99.33%, 25.0% 98.05%, 12.5% 97.26%, 0.0% 98.82%);
}

.parchment-variant-18 .parchment-bg {
    background-color: hsl(238.8, 49.8%, 57.0%);
    background-blend-mode: hue;
}

.parchment-variant-18 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 48.0% 56.1%, rgba(122, 31, 31, 0.14), transparent 19.1%),
            radial-gradient(circle at 55.8% 51.9%, rgba(60, 45, 20, 0.15), transparent 21.9%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-19 {
    --p-rotate: -1.58deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 0.92%, 12.5% 0.83%, 25.0% 2.82%, 37.5% 2.2%, 50.0% 2.81%, 62.5% 3.03%, 75.0% 2.09%, 87.5% 2.22%, 100.0% 1.9%, 100.0% 98.15%, 87.5% 96.87%, 75.0% 97.78%, 62.5% 98.54%, 50.0% 98.87%, 37.5% 99.18%, 25.0% 99.33%, 12.5% 97.54%, 0.0% 99.83%);
}

.parchment-variant-19 .parchment-bg {
    background-color: hsl(272.6, 58.6%, 63.2%);
    background-blend-mode: hue;
}

.parchment-variant-19 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 26.0% 45.7%, rgba(94, 56, 20, 0.16), transparent 32.2%),
            radial-gradient(circle at 27.3% 53.3%, rgba(70, 90, 60, 0.10), transparent 27.1%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-20 {
    --p-rotate: -0.08deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.25%, 12.5% 1.87%, 25.0% 1.74%, 37.5% 1.18%, 50.0% 2.25%, 62.5% 1.69%, 75.0% 2.26%, 87.5% 3.06%, 100.0% 0.66%, 100.0% 99.94%, 87.5% 97.44%, 75.0% 97.58%, 62.5% 98.54%, 50.0% 97.47%, 37.5% 99.0%, 25.0% 99.13%, 12.5% 97.55%, 0.0% 99.44%);
}

.parchment-variant-20 .parchment-bg {
    background-color: hsl(296.0, 46.4%, 61.1%);
    background-blend-mode: hue;
}

.parchment-variant-20 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 51.8% 44.3%, rgba(122, 31, 31, 0.14), transparent 17.9%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.parchment-variant-20::after {
    content: "";
    position: absolute;
    left: 77.7%;
    top: 82.5%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(122,31,31,0.6), rgba(90,15,15,0.4) 70%, transparent 76%);
    z-index: 2;
    pointer-events: none;
}

.parchment-variant-21 {
    --p-rotate: -0.75deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.14%, 12.5% 0.52%, 25.0% 1.01%, 37.5% 1.9%, 50.0% 0.56%, 62.5% 1.86%, 75.0% 2.91%, 87.5% 1.72%, 100.0% 1.19%, 100.0% 99.48%, 87.5% 98.98%, 75.0% 98.32%, 62.5% 98.37%, 50.0% 96.82%, 37.5% 99.7%, 25.0% 98.26%, 12.5% 97.49%, 0.0% 98.81%);
}

.parchment-variant-21 .parchment-bg {
    background-color: hsl(336.6, 48.2%, 53.1%);
    background-blend-mode: hue;
}

.parchment-variant-21 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 61.7% 36.2%, rgba(70, 90, 60, 0.10), transparent 21.7%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-22 {
    --p-rotate: -0.82deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.34%, 12.5% 0.78%, 25.0% 2.93%, 37.5% 2.78%, 50.0% 1.29%, 62.5% 1.11%, 75.0% 2.41%, 87.5% 1.92%, 100.0% 3.07%, 100.0% 96.94%, 87.5% 99.48%, 75.0% 98.71%, 62.5% 99.13%, 50.0% 98.03%, 37.5% 99.34%, 25.0% 98.13%, 12.5% 97.06%, 0.0% 97.05%);
}

.parchment-variant-22 .parchment-bg {
    background-color: hsl(0.9, 36.4%, 56.2%);
    background-blend-mode: hue;
}

.parchment-variant-22 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 59.9% 36.9%, rgba(94, 56, 20, 0.16), transparent 30.0%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-23 {
    --p-rotate: 0.99deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.29%, 12.5% 2.1%, 25.0% 2.24%, 37.5% 0.69%, 50.0% 3.18%, 62.5% 1.3%, 75.0% 0.72%, 87.5% 1.8%, 100.0% 0.93%, 100.0% 99.03%, 87.5% 98.31%, 75.0% 99.13%, 62.5% 96.93%, 50.0% 99.08%, 37.5% 99.6%, 25.0% 99.73%, 12.5% 98.58%, 0.0% 96.84%);
}

.parchment-variant-23 .parchment-bg {
    background-color: hsl(40.9, 43.5%, 58.9%);
    background-blend-mode: hue;
}

.parchment-variant-23 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 29.1% 75.0%, rgba(122, 31, 31, 0.14), transparent 31.0%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-24 {
    --p-rotate: 0.53deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 0.85%, 12.5% 0.0%, 25.0% 2.15%, 37.5% 0.0%, 50.0% 0.13%, 62.5% 1.16%, 75.0% 0.98%, 87.5% 2.8%, 100.0% 2.26%, 100.0% 98.95%, 87.5% 97.01%, 75.0% 99.71%, 62.5% 98.32%, 50.0% 99.88%, 37.5% 98.9%, 25.0% 97.17%, 12.5% 98.31%, 0.0% 99.23%);
}

.parchment-variant-24 .parchment-bg {
    background-color: hsl(68.7, 35.8%, 55.5%);
    background-blend-mode: hue;
}

.parchment-variant-24 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 15.5% 75.2%, rgba(60, 45, 20, 0.15), transparent 27.8%),
            radial-gradient(circle at 80.4% 21.1%, rgba(122, 31, 31, 0.14), transparent 27.7%);
    mix-blend-mode: multiply;
    pointer-events: none;
}


.parchment-variant-25 {
    --p-rotate: 0.54deg;
    transform: rotate(var(--p-rotate));
    clip-path: polygon(0% 1.15%, 12.5% 2.86%, 25.0% 2.92%, 37.5% 3.08%, 50.0% 1.51%, 62.5% 0.22%, 75.0% 1.43%, 87.5% 3.2%, 100.0% 1.48%, 100.0% 97.93%, 87.5% 99.73%, 75.0% 98.58%, 62.5% 98.23%, 50.0% 98.4%, 37.5% 99.03%, 25.0% 99.71%, 12.5% 97.01%, 0.0% 99.95%);
}

.parchment-variant-25 .parchment-bg {
    background-color: hsl(100.8, 41.4%, 63.0%);
    background-blend-mode: hue;
}

.parchment-variant-25 .parchment-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 51.0% 30.6%, rgba(60, 45, 20, 0.15), transparent 25.0%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.parchment-variant-25::after {
    content: "";
    position: absolute;
    left: 79.0%;
    top: 87.9%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(122,31,31,0.6), rgba(90,15,15,0.4) 70%, transparent 76%);
    z-index: 2;
    pointer-events: none;
}