SCP基金会中文分部

:where(.estrella-paper,.estrella-note) {
    --_p-unit: min(calc(.75vw + .475rem), .95rem);
    --p-inline: 1.5;
    --p-block: 1;
    --w: 54;
    --shadow-depth: 1;
    --shadow-spread: 1;
}
.estrella-paper {
    position: relative;
    isolation: isolate;

    width: min(100%,calc((var(--_p-unit) + .05rem)* var(--w)));
    box-sizing: border-box;
    padding: calc(var(--_p-unit)*var(--p-block)) calc(var(--_p-unit)*var(--p-inline));
    margin-block: 1.5rem;
    margin-inline: auto;
}
.estrella-paper::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;

    border-image: var(--paper-img) 100 fill;
    border-image-width: 100px;
    border-image-repeat: round;
    filter: drop-shadow(0 0 calc(.125rem*var(--shadow-spread)) rgb(0 0 0 / calc(.25*var(--shadow-depth))))
}

.washi {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/washi.png);
    --p-inline: 2.25;
    --p-block: 2.5;
    --w: 36;
}

.verso {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/verso.png);
    --p-inline: 1.625;
    --p-block: .475;
    --w: 42;
}

.vintage {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/vintage.png);
    --p-inline: 1.875;
    --p-block: 1.25;
}

.weathered {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/weathered.png);
    --p-inline: 2;
    --shadow-depth: 0.25;
}

.snote {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/snote.png);
    --p-inline: 3;
    --p-block: 2;
    --w: 28;
    --shadow-depth: .5;
    --shadow-spread: .75;
    --hue: 61;
    --_base-img-hue-offset: -61deg;
    font-size: 0.925em;
}
.estrella-paper.snote::before {
    filter: hue-rotate(calc(var(--_base-img-hue-offset) + 1deg*var(--hue))) drop-shadow(0 0 calc(.125rem*var(--shadow-spread)) rgb(0 0 0 / calc(.25*var(--shadow-depth))));
}

/*-------------------------------*/

.estrella-note {
    width: min(100%,calc((var(--_p-unit) + .05rem)* var(--w)));
    box-sizing: border-box;
    padding: calc(var(--_p-unit)*var(--p-block)) calc(var(--_p-unit)*var(--p-inline));
    margin-block: 1.5rem;
    margin-inline: auto;
}

.nlined {
    --p-block: 1.75;

    --page-indent: calc(var(--_p-unit)* var(--p-inline)* 3.25);
    --writing-margin: calc(var(--_p-unit)* 1.5);
    --line-x: #a5d0f2;
    --line-y: #c1666e;
    --line-width: .075rem;
    --row-height: 2.125em;

    line-height: var(--row-height);
    padding-left: var(--page-indent);
    background-color: #f9f9f9;
    background-image: linear-gradient(to right,
        transparent calc(var(--page-indent) - var(--writing-margin)),
        var(--line-y) calc(var(--page-indent) - var(--writing-margin)),
        var(--line-y) calc(var(--page-indent) - var(--writing-margin) + var(--line-width)),
        transparent calc(var(--page-indent) - var(--writing-margin) + var(--line-width))
        ),
        linear-gradient(
        var(--line-x) var(--line-width),
        transparent var(--line-width)
        );
    background-size: auto, 100% var(--row-height);
    background-position: 0 calc(var(--_p-unit)* var(--p-block) + calc(var(--row-height)*.875));
}

.nlined * { line-height: inherit; }
.nlined p { margin-block: 1lh; }
.nlined > p:first-child { margin-block-start: 0; }
.nlined > p:last-child { margin-block-end: 0; }

/*--------------------*/

.courtrep {
    --p-inline: 1;
    --p-block: 1.25;
    --row-height: 1.675em;
    --line-color: #d2d2d2;
    --num-color: var(--line-color);
    --num-pad: .25rem;
    --content-pad: 1rem;
    --hr-thick: .05rem;

    line-height: var(--row-height);
    position: relative;
    background-color: #fafafa;
    padding-inline-start: calc(var(--_p-unit)*var(--p-inline) + 2.5ch + var(--num-pad));
    border: solid var(--line-color) 0.05rem;
}

.linenum {
    position: absolute;
    inset-inline-start: calc(var(--_p-unit)*var(--p-inline));
    inset-block-start: calc(var(--_p-unit)*var(--p-block));
    height: calc(100% - var(--_p-unit)*var(--p-block)*2);
    overflow: hidden;

    counter-reset: hund 0;
    font-size: .825em;
    -webkit-user-select: none;
    user-select: none;
}
.linenum > tt {
    display: flex;
    color: transparent;
    font-size: 1em;
    font-weight: bold;
}
.linenum > tt:first-child {
    margin-block-start: calc(-1lh + .5ex);
}

/* .linenum > tt::after {
    content: "0123456789";
    color: var(--num-color);
    display: block;
    width: 1ch;
} */
.linenum > tt::before {
    content: counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero);
    color: var(--num-color);
    display: block;
    width: 2ch;
    margin-inline-end: -1ch;
}
.linenum > tt:nth-child(n+2)::before {
    counter-increment: hund;
}

.courtrep-content {
    border-inline-start: double var(--line-color) .25rem;
    padding-inline-start: var(--content-pad);
}
.courtrep-content p {
    margin-block: 1lh;
    line-height: inherit;
}
.courtrep-content > p:first-child { margin-block-start: 0; }
.courtrep-content > p:last-child { margin-block-end: 0; }

.courtrep-content > hr {
    height: var(--hr-thick);
    margin: 0;
    margin-block: calc(1.5lh - var(--hr-thick)/2);
}