:root {
    /* Colors */
    --color-primary: #2c1810;
    --color-accent: #8b4513;
    --color-background: #f4e4bc;
    --color-background-light: #fff;
    --color-notice: #ffe4b5;
    
    /* Transparencies */
    --transparency-light: rgba(255, 255, 255, 0.55);
    --transparency-medium: rgba(255, 249, 239, 0.55);
    
    /* Spacing */
    --spacing-xs: 0.5em;
    --spacing-sm: 1em;
    --spacing-md: 1.25em;
    --spacing-lg: 2em;
    --spacing-xl: 2.5em;
    
    /* Borders */
    --border-width: 0.0625em;
    --border-width-accent: 0.1875em;
    
    /* Shadows */
    --shadow-small: 0.1875em 0.1875em 0.625em rgba(0, 0, 0, 0.2);
    --shadow-large: 2px 3px 10px rgba(0, 0, 0, 0.2);
    
    /* Animation timings */
    --timing-wave: 9s;
    --timing-curl: 11s;
    --timing-float: 13s;
    
    /* Animation properties */
    --page-translateY: 0;
    --page-rotateX: 1.7deg;
    --page-rotateY: -1.2deg;
    --page-scale: 1.03;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Base styles */
html {
    height: 100%;
    font-size: 16px;
}

body {
    min-height: 100vh;
    background-image: url('../assets/planks.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--color-primary);
    font-family: 'IM Fell English', Georgia, serif;
    line-height: 1.6;
    padding: var(--spacing-md);
}

/* Container */
.page-container {
    max-width: 52.5em;
    margin: var(--spacing-xl) auto;
    padding: var(--spacing-md);
    perspective: 62.5em;
    /* Drop shadow follows clip-path shape rather than bounding box */
    filter:
        drop-shadow(0 4px 18px rgba(0, 0, 0, 0.38))
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22))
        drop-shadow(-2px -1px 4px rgba(0,0,0,0.12));
}

/* Content wrapper */
.content {
    position: relative;
    z-index: 2;
}

/* ---- Page texture & crease layer ---- */
.page-texture {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: var(--color-background);
    opacity: 0.85;

    background-image:

        /* === EDGE DARKENING (oxidised paper vignette) === */
        /* Left edge burn */
        linear-gradient(to right,
            rgba(101, 55, 10, 0.28) 0%,
            rgba(139, 69, 19, 0.12) 4%,
            transparent 12%
        ),
        /* Right edge burn */
        linear-gradient(to left,
            rgba(101, 55, 10, 0.28) 0%,
            rgba(139, 69, 19, 0.12) 4%,
            transparent 12%
        ),
        /* Top edge burn + subtle curl brightening */
        linear-gradient(to bottom,
            rgba(80, 40, 8, 0.22) 0%,
            rgba(139, 69, 19, 0.09) 3%,
            rgba(255, 248, 230, 0.06) 6%,
            transparent 13%
        ),
        /* Bottom edge burn */
        linear-gradient(to top,
            rgba(80, 40, 8, 0.25) 0%,
            rgba(139, 69, 19, 0.10) 4%,
            transparent 12%
        ),

        /* === DOG-EAR (top-right corner) === */
        linear-gradient(
            45deg,
            transparent 95.5%,
            rgba(0, 0, 0, 0.10) 95.75%,
            rgba(255, 255, 255, 0.10) 96%,
            transparent 96.25%
        ),
        linear-gradient(40deg, transparent 96%, rgba(0,0,0,0.05) 96.25%, transparent 96.5%),
        linear-gradient(50deg, transparent 96%, rgba(0,0,0,0.05) 96.25%, transparent 96.5%),

        /* === CREASES === */

        /* 1 — Main horizontal fold (slightly above centre, the primary crease) */
        linear-gradient(180deg,
            transparent 43.5%,
            rgba(0, 0, 0, 0.005) 44.2%,
            rgba(0, 0, 0, 0.09) 44.7%,
            rgba(255, 255, 255, 0.14) 45.0%,
            rgba(0, 0, 0, 0.06) 45.3%,
            transparent 46.0%
        ),

        /* 2 — Secondary horizontal crease, lower third */
        linear-gradient(180deg,
            transparent 68%,
            rgba(0, 0, 0, 0.003) 68.5%,
            rgba(0, 0, 0, 0.055) 68.9%,
            rgba(255, 255, 255, 0.08) 69.15%,
            rgba(0, 0, 0, 0.03) 69.4%,
            transparent 69.9%
        ),

        /* 3 — Diagonal crease (bottom-left to top-right */
        linear-gradient(
            32deg,
            transparent 34%,
            rgba(0, 0, 0, 0.003) 37%,
            rgba(0, 0, 0, 0.06) 38.2%,
            rgba(255, 255, 255, 0.09) 38.7%,
            rgba(0, 0, 0, 0.04) 39.2%,
            transparent 42%
        ),

        /* 4 — Subtle vertical crease, slightly left of centre */
        linear-gradient(90deg,
            transparent 38%,
            rgba(0, 0, 0, 0.002) 61%,
            rgba(0, 0, 0, 0.045) 62.0%,
            rgba(255, 255, 255, 0.06) 62.4%,
            rgba(0, 0, 0, 0.025) 62.8%,
            transparent 45%
        ),

        /* 5 — Ghost crease, upper area (old partial fold) */
        linear-gradient(180deg,
            transparent 22%,
            rgba(0, 0, 0, 0.03) 22.6%,
            rgba(255, 255, 255, 0.05) 22.9%,
            transparent 23.4%
        ),

        /* === BASE NOISE TEXTURE === */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

    background-blend-mode:
        multiply, multiply, multiply, multiply,   /* edge darkening */
        multiply, multiply, multiply,             /* dog-ear */
        multiply, multiply, multiply, multiply, multiply, /* creases */
        overlay;                                  /* noise */
}

/* Tiny shadow for the dog-ear corner */
.page-texture::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5%;
    height: 5%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(0, 0, 0, 0.06) 50%,
        transparent 80%
    );
    pointer-events: none;
}

/* Stains & foxing layer */
.page-texture::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 15%, rgba(139,69,19,0.08) 0%, rgba(139,69,19,0.02) 1.5%, transparent 4%),
        radial-gradient(circle at 85% 30%, rgba(139,69,19,0.06) 0%, rgba(139,69,19,0.02) 2%, transparent 5%),
        radial-gradient(ellipse at 80% 40%, rgba(160,82,45,0.04) 0%, rgba(160,82,45,0.02) 15%, transparent 30%),
        radial-gradient(circle at 20% 85%, transparent 8%, rgba(101,67,33,0.07) 9%, rgba(101,67,33,0.03) 12%, transparent 14%);
    background-blend-mode: multiply;
    pointer-events: none;
}

.foxing {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.9;
    mix-blend-mode: multiply;
    background-image: 
        /* More larger spots with slightly fuzzy edges - first set of clusters */
        radial-gradient(circle at 12% 15%, rgba(139, 69, 19, 0.25) 0%, rgba(139, 69, 19, 0.20) 0.3%, rgba(139, 69, 19, 0.15) 0.6%, transparent 1.2%),
        radial-gradient(circle at 15% 17%, rgba(160, 82, 45, 0.22) 0%, rgba(160, 82, 45, 0.18) 0.2%, rgba(160, 82, 45, 0.12) 0.4%, transparent 1%),
        radial-gradient(circle at 45% 32%, rgba(139, 69, 19, 0.25) 0%, rgba(139, 69, 19, 0.20) 0.3%, rgba(139, 69, 19, 0.15) 0.6%, transparent 1.2%),
        radial-gradient(circle at 47% 30%, rgba(160, 82, 45, 0.22) 0%, rgba(160, 82, 45, 0.18) 0.2%, rgba(160, 82, 45, 0.12) 0.4%, transparent 1%),
        radial-gradient(circle at 78% 67%, rgba(139, 69, 19, 0.25) 0%, rgba(139, 69, 19, 0.20) 0.3%, rgba(139, 69, 19, 0.15) 0.6%, transparent 1.2%),
        radial-gradient(circle at 76% 65%, rgba(160, 82, 45, 0.22) 0%, rgba(160, 82, 45, 0.18) 0.2%, rgba(160, 82, 45, 0.12) 0.4%, transparent 1%),
        /* Additional larger spots */
        radial-gradient(circle at 25% 82%, rgba(139, 69, 19, 0.25) 0%, rgba(139, 69, 19, 0.20) 0.3%, rgba(139, 69, 19, 0.15) 0.6%, transparent 1.2%),
        radial-gradient(circle at 62% 12%, rgba(160, 82, 45, 0.22) 0%, rgba(160, 82, 45, 0.18) 0.2%, rgba(160, 82, 45, 0.12) 0.4%, transparent 1%),
        radial-gradient(circle at 88% 45%, rgba(139, 69, 19, 0.25) 0%, rgba(139, 69, 19, 0.20) 0.3%, rgba(139, 69, 19, 0.15) 0.6%, transparent 1.2%),
        /* Original small spots doubled */
        radial-gradient(circle at 8% 65%, rgba(139, 69, 19, 0.20) 0%, transparent 0.5%),
        radial-gradient(circle at 22% 92%, rgba(160, 82, 45, 0.22) 0%, transparent 0.4%),
        radial-gradient(circle at 38% 56%, rgba(139, 69, 19, 0.19) 0%, transparent 0.3%),
        radial-gradient(circle at 52% 83%, rgba(160, 82, 45, 0.21) 0%, transparent 0.4%),
        radial-gradient(circle at 71% 44%, rgba(139, 69, 19, 0.23) 0%, transparent 0.5%),
        radial-gradient(circle at 85% 73%, rgba(160, 82, 45, 0.20) 0%, transparent 0.3%),
        radial-gradient(circle at 95% 88%, rgba(139, 69, 19, 0.21) 0%, transparent 0.4%),
        radial-gradient(circle at 5% 29%, rgba(139, 69, 19, 0.20) 0%, transparent 0.3%),
        radial-gradient(circle at 19% 53%, rgba(160, 82, 45, 0.22) 0%, transparent 0.4%),
        radial-gradient(circle at 28% 38%, rgba(139, 69, 19, 0.23) 0%, transparent 0.5%),
        radial-gradient(circle at 42% 67%, rgba(160, 82, 45, 0.19) 0%, transparent 0.3%),
        radial-gradient(circle at 63% 88%, rgba(139, 69, 19, 0.21) 0%, transparent 0.4%),
        radial-gradient(circle at 77% 12%, rgba(160, 82, 45, 0.22) 0%, transparent 0.5%),
        radial-gradient(circle at 88% 29%, rgba(139, 69, 19, 0.20) 0%, transparent 0.3%),
        radial-gradient(circle at 31% 12%, rgba(139, 69, 19, 0.21) 0%, transparent 0.3%),
        radial-gradient(circle at 44% 95%, rgba(160, 82, 45, 0.20) 0%, transparent 0.2%),
        radial-gradient(circle at 59% 25%, rgba(139, 69, 19, 0.22) 0%, transparent 0.4%),
        radial-gradient(circle at 74% 61%, rgba(160, 82, 45, 0.21) 0%, transparent 0.3%),
        radial-gradient(circle at 91% 92%, rgba(139, 69, 19, 0.20) 0%, transparent 0.2%),
        /* Additional small spots */
        radial-gradient(circle at 15% 45%, rgba(139, 69, 19, 0.20) 0%, transparent 0.4%),
        radial-gradient(circle at 33% 72%, rgba(160, 82, 45, 0.21) 0%, transparent 0.3%),
        radial-gradient(circle at 55% 18%, rgba(139, 69, 19, 0.22) 0%, transparent 0.4%),
        radial-gradient(circle at 68% 95%, rgba(160, 82, 45, 0.19) 0%, transparent 0.3%),
        radial-gradient(circle at 82% 42%, rgba(139, 69, 19, 0.21) 0%, transparent 0.4%),
        radial-gradient(circle at 92% 15%, rgba(160, 82, 45, 0.20) 0%, transparent 0.3%),
        radial-gradient(circle at 12% 78%, rgba(139, 69, 19, 0.22) 0%, transparent 0.4%),
        radial-gradient(circle at 25% 22%, rgba(160, 82, 45, 0.19) 0%, transparent 0.3%),
        radial-gradient(circle at 48% 88%, rgba(139, 69, 19, 0.21) 0%, transparent 0.4%),
        radial-gradient(circle at 65% 35%, rgba(160, 82, 45, 0.20) 0%, transparent 0.3%),
        radial-gradient(circle at 85% 82%, rgba(139, 69, 19, 0.22) 0%, transparent 0.4%),
        radial-gradient(circle at 95% 52%, rgba(160, 82, 45, 0.19) 0%, transparent 0.3%),
        radial-gradient(circle at 18% 8%, rgba(139, 69, 19, 0.21) 0%, transparent 0.4%),
        radial-gradient(circle at 38% 45%, rgba(160, 82, 45, 0.20) 0%, transparent 0.3%),
        radial-gradient(circle at 58% 72%, rgba(139, 69, 19, 0.22) 0%, transparent 0.4%),
        radial-gradient(circle at 72% 25%, rgba(160, 82, 45, 0.19) 0%, transparent 0.3%),
        radial-gradient(circle at 88% 62%, rgba(139, 69, 19, 0.21) 0%, transparent 0.4%),
        radial-gradient(circle at 98% 32%, rgba(160, 82, 45, 0.20) 0%, transparent 0.3%);
    filter: contrast(1.1) brightness(1);
}

/* Add subtle noise texture */
.foxing::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.2;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* Stains */
.main-stain {
    position: absolute;
    top: 7%;
    left: 15%;
    transform: translate(-50%, -50%);
    width: 24%;
    aspect-ratio: 1;
    border-radius: 100%;
    opacity: 0.7;
    background: 
        radial-gradient(circle at 70% 15%, #9B1B30 15%, #0000 0),
        radial-gradient(circle at 81% 70%, #9B1B30 9%, #0000 0),
        radial-gradient(circle at 20% 8%, #9B1B30 3%, #0000 0),
        #f4e4bc;
    box-shadow: 
        inset 4vmin -0.75vmin 0 -2.75vmin #800020,
        inset -1vmin -1vmin #9B1B30,
        inset -1.5vmin 1vmin #9B1B30,
        1vmin 1.5vmin #9B1B30,
        -1vmin 0vmin 0 -1vmin #9B1B30,
        0 0 0 1vmin #f4e4bc;
    filter: blur(0.7vmin) contrast(2.4);
    mix-blend-mode: multiply;
    z-index: 2;
}

.medium-stain {
    position: absolute;
    top: 17%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 10%;
    aspect-ratio: 1;
    border-radius: 40%;
    opacity: 0.7;
    background: 
        radial-gradient(circle at 35% 15%, #8b725a 6%, #0000 0),
        radial-gradient(circle at 18% 30%, #8b725a 2%, #0000 0),
        radial-gradient(circle at 4% 8%, #8b725a 3%, #0000 0),
        #f4e4bc;
    box-shadow: 
        inset 0vmin -0.75vmin 0 -2.75vmin #2c1810,
        inset -1vmin -1vmin #80654a,
        inset -1.5vmin 0vmin #80654a,
        1vmin 1.2vmin #80654a,
        -1vmin 0vmin 0 -1vmin #80654a,
        0 0 0 1vmin #f4e4bc;
    filter: blur(0.5vmin) contrast(2.4);
    mix-blend-mode: multiply;
    z-index: 2;
}

.small-stain {
    position: absolute;
    top: 16%;
    left: 29%;
    transform: translate(-50%, -50%);
    width: 4%;
    aspect-ratio: 1;
    border-radius: 40%;
    opacity: 0.7;
    background: 
        radial-gradient(circle at 35% 15%, #8b725a 6%, #0000 0),
        radial-gradient(circle at 18% 30%, #8b725a 2%, #0000 0),
        radial-gradient(circle at 4% 8%, #8b725a 3%, #0000 0),
        #f4e4bc;
    box-shadow: 
        inset 0vmin -0.75vmin 0 -2.75vmin #2c1810,
        inset -1vmin -1vmin #80654a,
        inset -1.5vmin 0vmin #80654a,
        1vmin 1.2vmin #80654a,
        -1vmin 0vmin 0 -1vmin #80654a,
        0 0 0 1vmin #f4e4bc;
    filter: blur(0.5vmin) contrast(2.4);
    mix-blend-mode: multiply;
    z-index: 2;
}

.tiny-stain {
    position: absolute;
    top: 35%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 5%;
    aspect-ratio: 1;
    border-radius: 40%;
    opacity: 0.7;
    background: 
        radial-gradient(circle at 75% 15%, #8b725a 6%, #0000 0),
        radial-gradient(circle at 18% 30%, #8b725a 2%, #0000 0),
        radial-gradient(circle at 4% 8%, #8b725a 3%, #0000 0),
        #f4e4bc;
    box-shadow: 
        inset 0.5vmin -0.75vmin 0 -2.75vmin #2c1810,
        inset -1vmin -1vmin #8b725a,
        inset -1.5vmin 0vmin #8b725a,
        1vmin 1.2vmin #8b725a,
        -1vmin 0vmin 0 -1vmin #8b725a,
        0 0 0 1vmin #f4e4bc;
    filter: blur(0.5vmin) contrast(2.4);
    mix-blend-mode: multiply;
    z-index: 2;
}

.particle-container {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: visible;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(139, 69, 19, 0.3);
    border-radius: 50%;
    pointer-events: none;
}

@keyframes floatParticle1 {
    0% {
        transform: translate(calc(var(--start-x) - 50%), 110vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translate(calc(var(--start-x) + 50vw), -10vh) rotate(360deg);
        opacity: 0;
    }
}

@keyframes floatParticle2 {
    0% {
        transform: translate(calc(var(--start-x) + 50%), 110vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translate(calc(var(--start-x) - 50vw), -10vh) rotate(-360deg);
        opacity: 0;
    }
}

@keyframes floatParticle3 {
    0% {
        transform: translate(var(--start-x), 110vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translate(calc(var(--start-x) - 25vw), -10vh) rotate(180deg);
        opacity: 0;
    }
}

/* Particle animations */
.particle:nth-child(3n + 1) {
    animation: floatParticle1 12s infinite linear;
    animation-delay: calc(var(--delay) * 1s);
}

.particle:nth-child(3n + 2) {
    animation: floatParticle2 15s infinite linear;
    animation-delay: calc(var(--delay) * 1s);
}

.particle:nth-child(3n + 3) {
    animation: floatParticle3 18s infinite linear;
    animation-delay: calc(var(--delay) * 1s);
}

/* Particle variations */
.particle.small {
    width: 3px;
    height: 3px;
    background: rgba(139, 69, 19, 0.2);
}

.particle.large {
    width: 6px;
    height: 6px;
    background: rgba(139, 69, 19, 0.4);
}

.particle:nth-child(2n) {
    filter: blur(1px);
}

.particle::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: radial-gradient(circle, rgba(139, 69, 19, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}
@keyframes cornerWave {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-2deg);
    }
    50% {
        transform: rotate(1deg);
    }
    75% {
        transform: rotate(-1deg);
    }
}

@keyframes edgeWave {
    0%, 100% {
        transform: scaleY(1) rotate(0deg);
    }
    25% {
        transform: scaleY(1.01) rotate(0.5deg);
    }
    50% {
        transform: scaleY(0.99) rotate(-0.5deg);
    }
    75% {
        transform: scaleY(1.01) rotate(0.25deg);
    }
}

.page::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 20%;
    background: linear-gradient(45deg, transparent 50%, rgba(244, 228, 188, 0.8) 51%);
    transform-origin: top right;
    animation: cornerWave 8s infinite ease-in-out;
    pointer-events: none;
}

.page::after {
    content: '';
    position: absolute;
    top: 0;
    right: 20%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(244, 228, 188, 0.1), transparent);
    transform-origin: right center;
    animation: edgeWave 7s infinite ease-in-out;
    pointer-events: none;
}

@keyframes paperMovement {
    0%, 100% {
        transform: 
            translate3d(0, 0, 0)
            scale(var(--page-scale))
            rotateY(-0.8deg)
            rotateX(0.4deg)
            rotate(0.2deg);
    }
    25% {
        transform: 
            translate3d(2px, 2px, 0)
            scale(var(--page-scale))
            rotateY(0.4deg)
            rotateX(0.6deg)
            rotate(-0.3deg);
    }
    50% {
        transform: 
            translate3d(-1px, 3px, 0)
            scale(var(--page-scale))
            rotateY(0.8deg)
            rotateX(-0.4deg)
            rotate(0.1deg);
    }
    75% {
        transform: 
            translate3d(1px, 1px, 0)
            scale(var(--page-scale))
            rotateY(0.4deg)
            rotateX(-0.6deg)
            rotate(-0.2deg);
    }
}

.page {
    position: relative;
    max-width: 50em;
    margin: 0 auto;
    padding: var(--spacing-xl);
    background-color: var(--color-background);
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow: 
        var(--shadow-large),
        inset 0 0 50px rgba(0, 0, 0, 0.1),
        inset 0 0 100px rgba(139, 69, 19, 0.07);
    animation: paperMovement 12s infinite ease-in-out;
    transition: transform 0.8s ease-out, box-shadow 0.8s ease-out;
    overflow: hidden;
}

.page:hover {
    animation-play-state: paused;
    transform: 
        translate3d(0, -0.25em, 0)
        scale(var(--page-scale))
        rotateY(0deg)
        rotateX(0deg)
        perspective(62.5em);
    box-shadow: 
        var(--shadow-large),
        0 0.5em 1em rgba(0, 0, 0, 0.2),
        inset 0 0 50px rgba(0, 0, 0, 0.1),
        inset 0 0 100px rgba(139, 69, 19, 0.07);
}


/* Layout components */
.header {
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.storefront {
    background-color: var(--transparency-medium);
    border: var(--border-width) solid var(--color-accent);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-small);
    backdrop-filter: blur(0.3125em);
}

.department {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-sm);
    border-left: var(--border-width-accent) solid var(--color-accent);
    background-color: var(--transparency-light);
    backdrop-filter: blur(0.1875em);
    transition: transform 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.department:hover {
    backdrop-filter: blur(0);
    background-color: rgba(255, 255, 255, 0.95);
    transform: translateX(0.3125em);
}

.department h2 {
    color: var(--color-accent);
    font-variant: small-caps;
    margin-top: 0;
}

.notice {
    background-color: var(--color-notice);
    padding: var(--spacing-sm);
    border: var(--border-width) dashed var(--color-accent);
    margin: var(--spacing-sm) 0;
}

/* Decorative elements */
.fancy-divider {
    text-align: center;
    position: relative;
    margin: var(--spacing-lg) 0;
}

.fancy-divider::before,
.fancy-divider::after {
    content: "";
    display: inline-block;
    width: 30%;
    height: var(--border-width);
    background: linear-gradient(to right, transparent, var(--color-accent), transparent);
    vertical-align: middle;
    margin: 0 var(--spacing-sm);
}

.fancy-divider span {
    color: var(--color-accent);
    font-size: 1.5em;
}

/* Grid components */
.shelf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr));
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
}

.item {
    background: var(--color-background-light);
    padding: var(--spacing-xs);
    border: var(--border-width) solid var(--color-accent);
}

/* Print styles */
@media print {
    body {
        background: none;
    }
    
    .page {
        box-shadow: none;
        animation: none;
        transform: none;
    }
    
    .page-texture {
        display: none;
    }
    
    .department {
        break-inside: avoid;
        border-left: 1pt solid var(--color-accent);
    }
    
    .fancy-divider::before,
    .fancy-divider::after {
        display: none;
    }
}

/* Responsive design */
@media (max-width: 48em) {
    :root {
        --spacing-xl: 1.5em;
        --spacing-lg: 1.25em;
    }
    
    .page-container {
        padding: var(--spacing-xs);
    }
    
    .shelf {
        grid-template-columns: 1fr;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .page {
        animation: none;
        transform: 
            translate3d(0, 0, 0)
            scale(var(--page-scale))
            rotateY(0deg)
            rotateX(0deg)
            perspective(62.5em);
    }
    
    .page:hover {
        transform: 
            translate3d(0, -0.25em, 0)
            scale(var(--page-scale))
            rotateY(0deg)
            rotateX(0deg)
            perspective(62.5em);
    }
}

.seal-container {
  position: relative;
  width: 18.75rem;  /* 300px / 16px (base font size) */
  height: 18.75rem;
}

.main-stain {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0.5;
  background: 
      radial-gradient(circle at 100% 15%, #A31B30 20%, #0000 0),
      radial-gradient(circle at 81% 70%, #9f1B30 9%, #0000 0),
      radial-gradient(circle at 20% 8%, #B91F32 3%, #0000 0),
      #f4e4bc;
  box-shadow: 
      inset 4vmin -0.75vmin 0 -2.75vmin #800020,
      inset -1vmin -1vmin #6B1B30,
      inset -1.5vmin 1vmin #9B1B30,
      1vmin 1.5vmin #f4d4ac,
      -1vmin 0vmin 0 -1vmin #f4d4ac,
      0 0 0 1vmin #f4e4bc;
  filter: blur(0.7vmin) contrast(2.4);
  mix-blend-mode: multiply;
  z-index: 2;
}

.inner-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 97%;
  height: 97%;
  background: #AD1509;
  border-radius: 50%;
  z-index: 1;
  opacity: 1;
  filter: blur(0.1vmin);
}

.outer-ring-1, .outer-ring-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 0.225rem solid rgba(130, 10, 22, 0.7);
  z-index: 3;
}

.outer-ring-1 {
  width: 88%;
  height: 88%;
}

.outer-ring-2 {
  width: 74%;
  height: 74%;
  background: #8D0503;
}

.text-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 95%;
  left: 100%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.text-circle.shadow {
  top: calc(95% + 0.0625rem); /* 1px */
  left: calc(100% + 0.0625rem);
  z-index: 2;
}

.text-circle span {
  position: absolute;
  transform-origin: center;
  font-family: 'Times New Roman', 'Segoe UI Emoji', 'Noto Color Emoji', serif;
  color: rgba(130, 10, 22, 0.7);
  font-size: 1.2rem;
  font-weight: bold;
  width: 1.25rem;
  text-align: center;
  margin-left: -0.625rem;
  top: 0;
}

.text-circle.shadow span {
  color: rgba(244, 228, 188, 0.6);
}

.text-circle span.emoji {
  width: 1.875rem;
  margin-left: -0.9375rem;
}

.center-crown-white {
  position: absolute;
  top: calc(52% - 0.0625rem);
  left: calc(50% - 0.0625rem);
  transform: translate(-50%, -50%);
  font-size: 9.375rem;
  z-index: 3;
  background-image: radial-gradient(circle at 50% 50%, #FFDDDD 0%, #C51509 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(inset 0 0.125rem 0.25rem rgba(0,0,0,0.4));
}

.center-crown {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9.375rem;
  z-index: 4;
  background-image: radial-gradient(circle at 50% 50%, 
    rgba(165, 0, 0, 1) 0%, 
    rgba(145, 0, 0, 1) 60%, 
    rgba(155, 15, 34, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 
    inset 0 0.125rem 0.25rem rgba(0,0,0,0.4),
    0 0.125rem 0.125rem rgba(0,0,0,0.3);
  filter: 
    drop-shadow(0 0.125rem 0.125rem rgba(0,0,0,0.3))
    drop-shadow(inset 0 0.125rem 0.25rem rgba(0,0,0,0.4));
}

.center-crown::after {
  content: "👑";
  position: absolute;
  top: 0%;
  left: 0%;
  font-size: 9.375rem;
  background: linear-gradient(-45deg, 
    rgba(140,0,0,1) 30%,
    transparent 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  z-index: 5;
  mix-blend-mode: overlay;
}


/* ============================================================
   SCROLL CURL OVERLAYS
   ============================================================ */

.curl-top,
.curl-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 48px;
    pointer-events: none;
    z-index: 10;
}

.curl-top {
    top: 0;
    background: linear-gradient(
        to bottom,
        rgba(40, 18, 4, 0.30) 0%,
        rgba(60, 28, 8, 0.18) 15%,
        rgba(180, 140, 80, 0.10) 35%,
        rgba(255, 248, 220, 0.08) 55%,
        transparent 100%
    );
    mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
}

/* Extra inner highlight stripe for top curl */
.curl-top::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 3%;
    right: 3%;
    height: 3px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 248, 220, 0.45) 15%,
        rgba(255, 252, 235, 0.60) 50%,
        rgba(255, 248, 220, 0.45) 85%,
        transparent 100%
    );
    border-radius: 50%;
    filter: blur(1.5px);
}

.curl-bottom {
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(40, 18, 4, 0.28) 0%,
        rgba(60, 28, 8, 0.16) 18%,
        rgba(160, 120, 60, 0.08) 38%,
        transparent 100%
    );
    mask-image: linear-gradient(to top, black 0%, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 0%, black 60%, transparent 100%);
}

.curl-bottom::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 3%;
    right: 3%;
    height: 3px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 248, 220, 0.40) 15%,
        rgba(255, 252, 235, 0.55) 50%,
        rgba(255, 248, 220, 0.40) 85%,
        transparent 100%
    );
    border-radius: 50%;
    filter: blur(1.5px);
}


/* ============================================================
   LINK STYLES
   ============================================================ */

/* All links in the main content */
.content a {
    color: #6b3010;
    text-decoration: underline;
    text-decoration-color: rgba(107, 48, 16, 0.4);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    font-style: italic;
}

.content a:visited {
    color: #4a2510;
}

.content a:hover,
.content a:focus {
    color: #3a1a08;
    text-decoration-color: rgba(58, 26, 8, 0.8);
    outline: none;
}

.content a:focus-visible {
    outline: 1px dashed rgba(107, 48, 16, 0.6);
    outline-offset: 3px;
    border-radius: 1px;
}


/* ============================================================
   TOOLTIPS
   ============================================================ */

.tooltip-link {
    position: relative;
}

/* The tooltip bubble */
.tooltip-link::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.6em);
    left: 50%;
    transform: translateX(-50%) translateY(0.3em);
    
    /* Sizing & text */
    width: max-content;
    max-width: 16em;
    padding: 0.45em 0.75em;
    font-size: 0.8rem;
    font-style: normal;
    line-height: 1.45;
    text-align: center;
    
    /* Parchment styling */
    background-color: #f9edd5;
    color: #2c1810;
    border: 1px solid rgba(139, 69, 19, 0.5);
    box-shadow: 
        1px 2px 6px rgba(0, 0, 0, 0.18),
        inset 0 0 12px rgba(139, 69, 19, 0.06);
    
    /* Visibility */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 100;
    
    /* Prevent tooltip from inheriting link italic */
    font-style: italic;
    letter-spacing: 0.01em;
}

/* The little downward-pointing caret */
.tooltip-link::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 0.25em);
    left: 50%;
    transform: translateX(-50%) translateY(0.3em);
    
    width: 0;
    height: 0;
    border-left: 0.4em solid transparent;
    border-right: 0.4em solid transparent;
    border-top: 0.4em solid rgba(139, 69, 19, 0.5);
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 101;
}

/* Show on hover/focus */
.tooltip-link:hover::before,
.tooltip-link:focus::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.tooltip-link:hover::after,
.tooltip-link:focus::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Keep tooltip on screen when near left/right edges */
@media (max-width: 48em) {
    .tooltip-link::before {
        max-width: 12em;
        left: 0;
        transform: translateX(0) translateY(0.3em);
    }
    .tooltip-link:hover::before,
    .tooltip-link:focus::before {
        transform: translateX(0) translateY(0);
    }
    .tooltip-link::after {
        left: 1em;
    }
}

/* ============================================================
   FLYERS
   ============================================================ */


/* Painters Workshop flyer pin */
.flyer-pin {
  position: fixed;
  top: 40%;
  right: 4%;
  width: 16rem;                         
  text-decoration: none;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.35);
  transform-origin:  50% 0%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 5px 8px 20px rgba(0, 0, 0, 0.45);
  z-index: 100;
}

.flyer-pin:hover {
  transform-origin:  50% 0%;
  transform: translateY(-50%) rotate(2deg);
  box-shadow: 5px 8px 20px rgba(0, 0, 0, 0.45);
}

.flyer-pin::before {
  content: '';
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 40% 35%, #aa6b6b, #80392b);
  border-radius: 50%;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  z-index: 1;
  pointer-events: none;
}

.flyer-pin img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
}

@media (max-content: 65em) {
  .flyer-pin { display: none; }
}


/* ============================================================
   Envelope
   ============================================================ */


/* letter pin */
.letter-pin {
  position: fixed;
  top: 30%;
  left: 5%;
  width: 24rem;                         
  text-decoration: none;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.35);
  transform-origin:  0% 0%;
  transform: translateY(-50%) rotate(60deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 100;             
}

.letter-pin:hover {
  transform-origin:  0% 0%;
  transform: translateY(-50%)  rotate(58deg);
  box-shadow: 5px 8px 20px rgba(0, 0, 0, 0.45);
}

.letter-pin::before {
  content: '';
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 40% 35%, #aa6b6b, #80392b);
  border-radius: 50%;
  position: absolute;
  top:-5px;
  left: 1px;
  transform: translateX(-50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  z-index: 1;
  pointer-events: none;
}

.letter-pin img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
}

@media (max-content: 65em) {
  .letter-pin { display: none; }
}