/* Aged parchment shared by the sheet pages and the cards: a flat base colour,
   a rough-edged texture layer (grain, fibre streaks, clouds, one stain and a
   warm centre glow) and an ink layer multiplied onto it. Each surface name
   seeds its own noise so neighbouring pages never look stamped. */

.parchment {
    position: relative;
    overflow: hidden;
    color: var(--ink);
    font-family: "Cormorant Garamond", serif;
    font-size: 16px;
    font-weight: 400;
    background: oklch(0.9 0.03 78);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.parchment-surface {
    position: absolute;
    inset: -2px;
    pointer-events: none;
    filter: url(#parchment-rough);
    background-image:
        var(--parchment-grain),
        var(--parchment-streaks),
        var(--parchment-clouds),
        var(--parchment-stain),
        radial-gradient(ellipse 80% 72% at 50% 46%, oklch(0.972 0.019 86) 30%, oklch(0.948 0.028 82) 74%, oklch(0.9 0.044 74) 100%);
    background-size: 240px 240px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    box-shadow: inset 0 0 70px oklch(0.55 0.08 55 / 0.28), inset 0 0 16px oklch(0.48 0.08 50 / 0.26);
}

.parchment-ink {
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply;
}

.parchment[data-surface="core"] {
    --parchment-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20seed%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.3%200%200%200%200%200.2%200%200%200%200%200.1%200%200%200%200.55%20-0.17%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
    --parchment-streaks: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%271130%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0025%200.07%27%20numOctaves%3D%273%27%20seed%3D%276%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.45%200%200%200%200%200.32%200%200%200%200%200.16%200%200%200%200.34%20-0.13%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
    --parchment-clouds: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%271130%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.007%27%20numOctaves%3D%274%27%20seed%3D%2710%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.42%200%200%200%200%200.27%200%200%200%200%200.11%200%200%200%200.5%20-0.18%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
    --parchment-stain: radial-gradient(ellipse 22% 14% at 12% 92%, oklch(0.78 0.06 66 / 0.35), transparent);
}

.parchment[data-surface="equipment"] {
    --parchment-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20seed%3D%2720%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.3%200%200%200%200%200.2%200%200%200%200%200.1%200%200%200%200.55%20-0.17%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
    --parchment-streaks: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%271130%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0025%200.07%27%20numOctaves%3D%273%27%20seed%3D%2723%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.45%200%200%200%200%200.32%200%200%200%200%200.16%200%200%200%200.34%20-0.13%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
    --parchment-clouds: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%271130%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.007%27%20numOctaves%3D%274%27%20seed%3D%2727%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.42%200%200%200%200%200.27%200%200%200%200%200.11%200%200%200%200.5%20-0.18%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
    --parchment-stain: radial-gradient(ellipse 18% 12% at 90% 88%, oklch(0.76 0.06 64 / 0.32), transparent);
}

.parchment[data-surface="spells"] {
    --parchment-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20seed%3D%2737%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.3%200%200%200%200%200.2%200%200%200%200%200.1%200%200%200%200.55%20-0.17%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
    --parchment-streaks: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%271130%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0025%200.07%27%20numOctaves%3D%273%27%20seed%3D%2740%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.45%200%200%200%200%200.32%200%200%200%200%200.16%200%200%200%200.34%20-0.13%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
    --parchment-clouds: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%271130%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.007%27%20numOctaves%3D%274%27%20seed%3D%2744%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.42%200%200%200%200%200.27%200%200%200%200%200.11%200%200%200%200.5%20-0.18%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
    --parchment-stain: radial-gradient(ellipse 20% 13% at 14% 8%, oklch(0.78 0.06 66 / 0.3), transparent);
}

.parchment[data-surface="card"] {
    --parchment-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20seed%3D%2751%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.3%200%200%200%200%200.2%200%200%200%200%200.1%200%200%200%200.55%20-0.17%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
    --parchment-streaks: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%271130%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0025%200.07%27%20numOctaves%3D%273%27%20seed%3D%2754%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.45%200%200%200%200%200.32%200%200%200%200%200.16%200%200%200%200.34%20-0.13%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
    --parchment-clouds: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%271130%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.007%27%20numOctaves%3D%274%27%20seed%3D%2758%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.42%200%200%200%200%200.27%200%200%200%200%200.11%200%200%200%200.5%20-0.18%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
    --parchment-stain: radial-gradient(ellipse 20% 12% at 86% 10%, oklch(0.78 0.06 66 / 0.28), transparent);
}