:root {
    --doll-porcelain: #f4e9df;
    --doll-porcelain-shadow: #c9aea0;
    --doll-skin: #d8a07e;

    --doll-oxblood: #7f252b;
    --doll-oxblood-light: #a83a40;
    --doll-wine: #481116;
    --doll-thread: #bd454d;

    --doll-black: #080708;
    --doll-charcoal: #222023;
    --doll-gray: #777074;
    --doll-white: #fffaf5;

    --doll-tilt-x: 0deg;
    --doll-tilt-y: 0deg;
    --doll-shadow-x: 0px;
    --doll-shadow-y: 28px;
}

/* The CSS is page-local, so this safely styles only this character page. */
body.wiki-page {
    --accent: var(--doll-oxblood-light);

    background:
    radial-gradient(
        circle at 18% 12%,
        rgba(168, 58, 64, 0.21),
                    transparent 22rem
    ),
    radial-gradient(
        circle at 84% 20%,
        rgba(244, 233, 223, 0.1),
                    transparent 25rem
    ),
    radial-gradient(
        circle at 50% 110%,
        rgba(127, 37, 43, 0.28),
                    transparent 38rem
    ),
    linear-gradient(
        180deg,
        #0c090a 0%,
        #201214 48%,
        #090708 100%
    );
}

/* Main cloth-and-porcelain panel */
.page-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    border: 2px solid rgba(189, 69, 77, 0.54);
    outline: 1px dashed rgba(244, 233, 223, 0.26);
    outline-offset: -13px;

    background:
    radial-gradient(
        circle at 26% 8%,
        rgba(244, 233, 223, 0.12),
                    transparent 24rem
    ),
    linear-gradient(
        135deg,
        rgba(127, 37, 43, 0.2),
                    transparent 25rem
    ),
    linear-gradient(
        225deg,
        rgba(255, 250, 245, 0.06),
                    transparent 22rem
    ),
    rgba(20, 15, 17, 0.96);

    box-shadow:
    var(--doll-shadow-x)
    var(--doll-shadow-y)
    85px
    rgba(0, 0, 0, 0.68),
    0 0 34px rgba(127, 37, 43, 0.2),
    inset 0 0 0 7px rgba(8, 7, 8, 0.28);

    transform:
    perspective(1300px)
    rotateX(var(--doll-tilt-y))
    rotateY(var(--doll-tilt-x));

    transform-style: preserve-3d;
    transition:
    transform 130ms ease-out,
    box-shadow 130ms ease-out;
}

/* Fine fabric grain and stitch marks */
.page-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    opacity: 0.28;

    background:
    repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 21px,
        rgba(244, 233, 223, 0.12) 22px,
                              transparent 23px
    ),
    repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 31px,
        rgba(127, 37, 43, 0.13) 32px,
                              transparent 33px
    ),
    repeating-linear-gradient(
        112deg,
        transparent 0,
        transparent 10px,
        rgba(255, 255, 255, 0.035) 11px,
                              transparent 12px
    );

    mask-image:
    linear-gradient(
        to bottom,
        black,
        rgba(0, 0, 0, 0.82) 60%,
                    transparent
    );
}

/* Torn oxblood ribbon in the upper-right */
.page-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 4.7rem;
    right: -4rem;

    width: 18rem;
    height: 3.4rem;

    pointer-events: none;

    border-top: 2px dashed rgba(244, 233, 223, 0.28);
    border-bottom: 2px dashed rgba(8, 7, 8, 0.7);

    background:
    repeating-linear-gradient(
        95deg,
        var(--doll-wine) 0,
                              var(--doll-wine) 12px,
                              var(--doll-oxblood) 13px,
                              var(--doll-oxblood) 28px
    );

    box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.45),
    inset 0 0 14px rgba(0, 0, 0, 0.35);

    transform: rotate(12deg);
}

.page-header,
.page-content {
    position: relative;
    z-index: 2;
}

/* Title */
.page-header h1 {
    max-width: calc(100% - 8rem);

    color: var(--doll-porcelain);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 900;
    letter-spacing: -0.055em;

    text-shadow:
    3px 3px 0 var(--doll-black),
    0 0 18px rgba(189, 69, 77, 0.27);
}

/* Placeholder tag */
.page-header h1::after {
    content: "Lorem ipsum dolor sit amet";

    display: block;
    width: fit-content;
    max-width: 100%;

    margin-top: 0.9rem;
    padding: 0.42rem 0.8rem;

    border: 1px dashed rgba(244, 233, 223, 0.6);
    border-radius: 4px;

    color: var(--doll-porcelain);
    background:
    linear-gradient(
        90deg,
        rgba(127, 37, 43, 0.74),
                    rgba(72, 17, 22, 0.68)
    );

    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.45;
    text-transform: uppercase;
    text-shadow: none;

    box-shadow:
    3px 3px 0 rgba(8, 7, 8, 0.62),
    inset 0 0 12px rgba(0, 0, 0, 0.18);

    transform: rotate(-1deg);
}

/* Metadata */
.eyebrow span,
.tags li {
    border: 1px dashed rgba(189, 69, 77, 0.62);
    border-radius: 4px;

    color: var(--doll-porcelain);

    background:
    linear-gradient(
        90deg,
        rgba(72, 17, 22, 0.68),
                    rgba(34, 32, 35, 0.72)
    );

    box-shadow:
    inset 0 0 0 2px rgba(244, 233, 223, 0.035),
    2px 2px 0 rgba(0, 0, 0, 0.28);
}

.page-description {
    max-width: 65ch;
    color: #e4cfc4;
    font-weight: 600;
}

/* Cloth-panel section titles */
.page-content h2,
.page-content h3 {
    position: relative;

    color: var(--doll-porcelain);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 900;

    text-shadow:
    2px 2px 0 var(--doll-black),
    0 0 10px rgba(127, 37, 43, 0.25);
}

.page-content h2 {
    padding: 0.7rem 1rem;
    border: 1px solid rgba(189, 69, 77, 0.43);
    border-radius: 4px;

    background:
    linear-gradient(
        90deg,
        rgba(72, 17, 22, 0.8),
                    rgba(34, 32, 35, 0.55)
    );

    box-shadow:
    inset 0 0 0 4px rgba(8, 7, 8, 0.18),
    4px 5px 0 rgba(8, 7, 8, 0.35);
}

.page-content h2::after {
    content: "";

    position: absolute;
    right: 0.8rem;
    bottom: -0.45rem;
    left: 0.8rem;

    height: 0.7rem;

    background:
    repeating-linear-gradient(
        90deg,
        transparent 0 8px,
        var(--doll-thread) 9px 11px,
                              transparent 12px 20px
    );
}

/* Text */
.page-content p,
.page-content li {
    color: #eadbd2;
}

.page-content li::marker {
    color: var(--doll-thread);
}

/* Links */
.page-content a {
    color: #dc7077;
    font-weight: 800;
    text-decoration-color: rgba(244, 233, 223, 0.42);
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
}

.page-content a:hover {
    color: var(--doll-porcelain);
    text-shadow: 0 0 10px rgba(189, 69, 77, 0.55);
}

/* Tables look like sewn fabric panels */
.page-content table {
    overflow: hidden;

    border: 2px solid rgba(189, 69, 77, 0.46);
    outline: 1px dashed rgba(244, 233, 223, 0.25);
    outline-offset: -7px;

    background: rgba(8, 7, 8, 0.52);

    box-shadow:
    6px 8px 0 rgba(8, 7, 8, 0.35),
    0 0 22px rgba(127, 37, 43, 0.12);
}

.page-content th {
    color: var(--doll-porcelain);

    background:
    linear-gradient(
        90deg,
        var(--doll-oxblood),
                    var(--doll-wine)
    );

    font-family: Georgia, "Times New Roman", serif;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.page-content td {
    color: #eadbd2;

    background:
    linear-gradient(
        90deg,
        rgba(127, 37, 43, 0.11),
                    rgba(34, 32, 35, 0.18)
    );
}

.page-content tr:hover td {
    background:
    linear-gradient(
        90deg,
        rgba(127, 37, 43, 0.22),
                    rgba(244, 233, 223, 0.07)
    );
}

/* Portrait styling */
.page-content img {
    border: 0.55rem solid var(--doll-charcoal);
    border-radius: 48% 52% 47% 53% / 51% 46% 54% 49%;

    background: var(--doll-porcelain);

    box-shadow:
    0 0 0 2px var(--doll-thread),
    0 0 0 7px var(--doll-black),
    0 26px 65px rgba(0, 0, 0, 0.6);

    filter:
    saturate(0.9)
    contrast(1.03);
}

/* Missing wiki links */
.missing-link {
    color: #df6b72;
    border-bottom: 1px dashed #df6b72;
    font-weight: 800;
}

/*
 * JS-created hinged content panels.
 * Each direct child of .page-content receives this class.
 */
.doll-jointed-section {
    --joint-angle: 0deg;
    --joint-x: 0px;
    --joint-y: 0px;

    position: relative;

    opacity: 0;

    transform:
    translate3d(
        var(--joint-x),
                calc(28px + var(--joint-y)),
                0
    )
    rotate(var(--joint-angle));

    transform-origin: top left;

    transition:
    opacity 650ms ease,
    transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.doll-jointed-section::before {
    content: "";

    position: absolute;
    top: -0.25rem;
    left: -0.7rem;

    width: 0.75rem;
    height: 0.75rem;

    border: 2px solid var(--doll-gray);
    border-radius: 50%;

    background:
    radial-gradient(
        circle at 35% 30%,
        #c9c2c5,
        #4e494c 56%,
        #0b0a0b 62%
    );

    box-shadow:
    0 0 0 3px rgba(8, 7, 8, 0.25);
}

.doll-jointed-section.is-stitched-in {
    opacity: 1;

    transform:
    translate3d(
        var(--joint-x),
                var(--joint-y),
                0
    )
    rotate(0deg);
}

/* Button eye added by script.js */
.doll-button-eye {
    --button-angle: 0deg;

    position: absolute;
    z-index: 5;
    top: 1.7rem;
    right: 1.8rem;

    width: 5.1rem;
    height: 5.1rem;

    pointer-events: none;

    border: 0.42rem solid #131113;
    border-radius: 50%;

    background:
    radial-gradient(
        circle at 34% 28%,
        #4c494b 0 7%,
        transparent 8%
    ),
    radial-gradient(
        circle at 68% 28%,
        #4c494b 0 7%,
        transparent 8%
    ),
    radial-gradient(
        circle at 34% 70%,
        #4c494b 0 7%,
        transparent 8%
    ),
    radial-gradient(
        circle at 68% 70%,
        #4c494b 0 7%,
        transparent 8%
    ),
    radial-gradient(
        circle at 40% 30%,
        #242124,
        #090809 65%
    );

    box-shadow:
    0 0 0 2px rgba(189, 69, 77, 0.55),
    6px 8px 0 rgba(0, 0, 0, 0.34),
    inset -8px -8px 14px rgba(0, 0, 0, 0.65),
    inset 6px 5px 8px rgba(255, 255, 255, 0.08);

    transform:
    rotate(var(--button-angle))
    translateZ(38px);

    transition: transform 90ms linear;
}

/* Thread crossing the button holes */
.doll-button-eye::before,
.doll-button-eye::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 3.3rem;
    height: 0.22rem;

    border-radius: 999px;

    background:
    linear-gradient(
        90deg,
        transparent,
        var(--doll-thread) 10% 90%,
                    transparent
    );

    box-shadow:
    0 0 5px rgba(189, 69, 77, 0.42);
}

.doll-button-eye::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.doll-button-eye::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Marionette strings inserted by JS */
.doll-marionette-string {
    --string-angle: 0deg;

    position: absolute;
    z-index: 1;
    top: -1rem;

    width: 1px;
    height: 8.5rem;

    pointer-events: none;

    background:
    linear-gradient(
        to bottom,
        transparent,
        rgba(244, 233, 223, 0.52) 14%,
                    rgba(189, 69, 77, 0.54) 84%,
                    transparent
    );

    filter: drop-shadow(0 0 3px rgba(244, 233, 223, 0.25));

    transform-origin: top center;
    transform: rotate(var(--string-angle));
}

.doll-marionette-string::after {
    content: "";

    position: absolute;
    right: 50%;
    bottom: -0.25rem;

    width: 0.45rem;
    height: 0.45rem;

    border: 1px solid var(--doll-thread);
    border-radius: 50%;

    background: var(--doll-black);

    transform: translateX(50%);
}

.doll-string-left {
    left: 25%;
}

.doll-string-center {
    left: 51%;
    height: 6.7rem;
}

.doll-string-right {
    right: 22%;
}

/* SVG cursor thread */
.doll-thread-overlay {
    position: fixed;
    z-index: 9997;
    inset: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;
    opacity: 0;

    transition: opacity 180ms ease;
}

.doll-thread-overlay.is-active {
    opacity: 1;
}

.doll-thread-overlay path {
    fill: none;
    stroke: var(--doll-thread);
    stroke-width: 2.1;
    stroke-linecap: round;

    filter:
    drop-shadow(0 0 3px rgba(189, 69, 77, 0.54))
    drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.8));

    stroke-dasharray: 5 4;
    animation: doll-thread-crawl 1.4s linear infinite;
}

@keyframes doll-thread-crawl {
    to {
        stroke-dashoffset: -18;
    }
}

/* Small needle at the cursor end */
.doll-thread-needle {
    fill: var(--doll-gray);
    stroke: var(--doll-black);
    stroke-width: 1;

    filter:
    drop-shadow(0 0 3px rgba(244, 233, 223, 0.35));
}

/* Mobile */
@media (max-width: 850px) {
    .page-header h1 {
        max-width: calc(100% - 4rem);
    }

    .doll-button-eye {
        top: 1.1rem;
        right: 1rem;

        width: 3.4rem;
        height: 3.4rem;

        border-width: 0.3rem;
        opacity: 0.72;
    }

    .doll-button-eye::before,
    .doll-button-eye::after {
        width: 2.1rem;
        height: 0.16rem;
    }

    .page-card::after {
        right: -8rem;
        opacity: 0.45;
    }

    .page-header h1::after {
        font-size: 0.64rem;
        letter-spacing: 0.07em;
    }

    .doll-thread-overlay {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-card {
        transform: none;
        transition: none;
    }

    .doll-jointed-section {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .doll-button-eye {
        transform: none;
        transition: none;
    }

    .doll-marionette-string,
    .doll-thread-overlay {
        display: none;
    }
}