@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Imbue:opsz,wght@10..100,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@font-face {
font-family: 'Abril Fatface';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/abrilfatface/v23/zOL64pLDlL1D99S8g8PtiKchq-lmjdLh.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Abril Fatface';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/abrilfatface/v23/zOL64pLDlL1D99S8g8PtiKchq-dmjQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--global-white-color: 247, 246, 243;
--global-pale-color: 235, 234, 232;
--global-dark-color: 91, 88, 86;
--global-black-color: 35, 31, 27;
--global-accent-1: var(--global-accent-2);
--global-accent-2: 187, 155, 120;
--global-accent-3: 157, 135, 90;
--dropdown-border: var(--topbar-hover-bg);
--heading-bg: var(--light-ui-bg);
--heading-txt: var(--global-dark-color);
--menu-txt: var(--global-dark-color);
--menu-hover-txt: var(--global-black-color);
--toc-bg: var(--body-bg);
--dark-block-bg: var(--global-black-color);
--bottombar-bg: var(--dark-block-bg);
--bottombar-txt: var(--dark-block-txt);
--banner-height: 87.5vh;
--header-title-size: clamp(0.8rem, calc(0.8rem + 1.4vw), 2.25rem);
--banner-subtitle-size: calc(0.5rem + 1.5vw);
--header-title: "后室中文月刊";
--banner-title: "Modern\A Design Style.";
--banner-subtitle: "Backrooms-CN Monthly #2025.00";
--banner-font: "Abril Fatface", "Noto Serif SC", "Noto Serif TC", serif;
--header-font: var(--banner-font);
--title-font: var(--banner-font);
--body-font: "Libre Bodoni", "Noto Serif SC", "Noto Serif TC", Arimo, Verdana, Geneva, serif;
--ui-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
--banner-img: linear-gradient(65deg, rgba(125, 205, 255, 0) 65%, rgb(125, 205, 255, 0.4) 65%), linear-gradient(-15deg, rgba(255, 255, 105, 0) 80%, rgb(255, 255, 105, 0.4) 80%), linear-gradient(105deg, rgba(255, 125, 85, 0) 70%, rgb(255, 125, 85, 0.4) 70%);
--footer-logo: url(https://lemoncat233.github.io/supreroomartists/BKRCN_journal/br%E5%8D%8A%E6%9C%88%E5%88%8A_%E5%A4%8D%E5%88%B6.svg);
/* uhhhhh newspaper */
--NP-white: var(--global-white-color);
--NP-pale: var(--global-pale-color);
--NP-light: 179, 175, 168;
--NP-dark: var(--global-dark-color);
--NP-accent: var(--global-dark-color);
--NP-black: var(--global-black-color);
--logo-image: url("https://github.backroomswiki.cn/New_BHL/image/logo.svg");
}
@media only screen and (min-width: 769px) {
:root {
--topbar-height: 3rem;
}
#header {
grid-template-columns: var(--header-ui-size) auto 1fr auto auto;
border: unset;
}
#header h2 {
grid-column: 1 / 6;
}
#search-top-box {
grid-column: 4 / 5;
}
#login-status {
grid-column: 5 / 6;
}
#top-bar {
grid-column: 3 / 4;
grid-row: 1 / 2;
top: 0;
}
#header-extra-div-1 {
grid-column: 1 / 6;
grid-row: 1 / 2;
height: var(--header-height);
}
#top-bar > div > ul {
margin: 0 0.5rem;
justify-content: flex-end;
max-width: initial;
}
#top-bar > div > ul > li {
flex-grow: 0;
flex-basis: fit-content;
}
#top-bar > div > ul > li > a {
padding: 0 0.5rem;
}
#top-bar > div > ul > li > ul {
left: initial;
right: 0;
width: auto;
}
#side-bar {
height: calc(100% - var(--header-ui-size));
top: var(--header-ui-size);
}
#side-bar:is(:hover, :focus-within)::before, #side-bar:is(:hover, :focus-within)::after {
left: 0;
}
}
#header-extra-div-1 {
border-bottom: unset;
box-shadow: 0 -7.5rem 15rem 5rem rgb(var(--global-dark-color));
}
#header h1 a {
justify-content: flex-start;
}
#header h1 a span {
font-weight: 900;
}
#header h2 {
background: var(--banner-img);
box-shadow: inset 0 -12.6rem 7.5rem -15rem rgb(var(--global-dark-color));
display: flex;
justify-content: flex-start;
align-items: center;
}
#header h2 span {
align-items: flex-start;
width: initial;
height: 50%;
margin: 0 2vw;
padding: 1rem 3vw;
background: rgba(var(--body-bg), .8);
backdrop-filter: blur(0.1rem);
box-shadow: 0 0 3rem -1.5rem rgb(var(--global-dark-color));
}
#header h2 span::before {
white-space: pre;
}
#header h2 span::after {
letter-spacing: initial;
align-self: end;
}
#top-bar > div > ul > li > ul {
border-width: 0 0.2rem 0 0;
}
#login-status .printuser > a > img.small {
box-shadow: 0 0 1.5rem -0.5rem rgb(var(--global-dark-color));
}
#side-bar {
background: rgba(var(--sidebar-bg), 0.8);
border: unset;
}
:is(#side-bar, #interwiki) > div {
backdrop-filter: blur(0.1rem);
}
:is(#side-bar, #interwiki) .side-block {
direction: ltr;
}
:is(#side-bar, #interwiki) .heading {
display: inline-block;
margin: 0.5rem 0;
padding: 0 2.5rem 0 0.5rem;
background: unset;
font-family: var(--ui-font);
font-size: 1.2rem;
font-weight: 300;
}
:is(#side-bar, #interwiki) .menu-item {
display: block;
padding: 0 0.5rem;
background: unset;
border: unset;
font-size: inherit;
}
:is(#side-bar, #interwiki) .menu-item a {
display: inline;
padding: 0;
}
:is(#side-bar, #interwiki) .menu-item a:is(:hover, :focus) {
background: unset;
text-decoration: underline;
text-underline-position: under;
}
#content-wrap {
overflow: hidden;
margin-left: 0; margin-right: 0;
padding: 0 1rem;
}
#page-title, #meta-title {
margin: 1rem -50vw;
padding: 0.5rem 50vw 0;
font-weight: 900;
text-align: left;
border-bottom: unset;
border-top: var(--global-border-width) solid rgb(var(--global-border));
}
:is(h1, h2, h3, h4, h5, h6) {
font-weight: 900;
}
:is(blockquote, .blockquote, div.blockquote, [class*=blockquote]) {
margin: 1rem 0;
padding: 1rem calc(1rem + 2.5vw);
background: unset;
color: rgb(var(--body-txt));
border: unset;
border-left: 0.3rem solid rgb(var(--global-border));
position: relative;
z-index: 0;
}
:is(blockquote, .blockquote, div.blockquote, [class*=blockquote])::before {
content: "\F6B0";
position: absolute;
top: 0;
left: 0.5rem;
font-size: 5rem;
font-family: bootstrap-icons;
z-index: -1;
line-height: 1;
opacity: 0.2;
}
#main-content a:is(:hover, :focus):not(.flex a, .yui-nav a, .page-options-bottom a) {
text-decoration: underline;
text-underline-position: under;
}
:is(.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav) li {
font-weight: 700;
}
:is(.bibitems, .footnotes-footer) .title {
font-weight: 900;
}
#page-options-container {
font-family: var(--ui-font);
}
#footer::before {
content: "";
width: 80%;
height: 5rem;
background: rgb(var(--dark-block-txt));
--mask-image: var(--footer-logo);
--mask-repeat: no-repeat;
--mask-position: center;
--mask-size: contain;
mask-image: var(--mask-image);
mask-repeat: var(--mask-repeat);
mask-position: var(--mask-position);
mask-size: var(--mask-size);
-webkit-mask-image: var(--mask-image);
-webkit-mask-repeat: var(--mask-repeat);
-webkit-mask-position: var(--mask-position);
-webkit-mask-size: var(--mask-size);
}
.NP-title.A, .NP-title.C {display: flex;}
.NP-title.A:after,
.NP-title.A.Center:before,
.NP-title.A.Right:before {
content: " ";
flex-grow: 1;
height: 1px;
margin: auto 0.375rem;
background-color: rgb(var(--NP-black));
}
.NP-title.B {
display: block;
border-bottom: 1px solid #a5a5a585;
}
.NP-title.C>p {
margin: 0;
display: flex;
flex-direction: column;
}
.NP-title.C .MainTitle {
font-size: 2.75rem;
font-weight: 900;
}
.NP-title.C .SubTitle {
font-size: 1rem;
margin-top: -.5rem;
}
.NP-title.A.Center, .NP-title.C.Center {justify-content: center;}
.NP-title.A.Right, .NP-title.C.Right {justify-content: right;}
.NP-title.A.Right:after {display: none;}
.NP-title.B.Center {text-align: center;}
.NP-title.B.Right {text-align: right;}
.NP-title.C.Center>p {align-items: center;}
.NP-title.C.Right>p {align-items: end;}
/* horizonline */
.NP-horizonline {
margin: 1.5rem 0;
border-color: rgb(var(--NP-black));
}
.NP-horizonline.A {
display: block;
width: 100%;
border: solid;
border-width: 2px 0;
height: 2px;
}
.NP-horizonline.B {
display: block;
width: 100%;
border: dashed;
border-width: 2px 0;
}
.NP-horizonline.C {
display: flex;
margin: 0;
min-height: 48px;
}
.NP-horizonline.C:after,
.NP-horizonline.C:before {
content: " ";
flex-grow: 1;
height: 2px;
margin: auto 0.375rem;
background-color: rgb(var(--NP-black));
}
.NP-horizonline.C img {
filter: brightness(0);
width: 3rem;
}
/* imageblock */
.NP-image-nonborder.NoCaption .scp-image-caption,
.NP-image-clip.NoCaption .scp-image-caption,
.NP-image-tape.NoCaption .scp-image-caption {display:none};
.NP-image-nonborder {
margin-top: .5rem;
margin-bottom: .5rem;
}
.NP-image-nonborder .scp-image-block img {
box-shadow: none;
border: 0;
}
.NP-image-nonborder .scp-image-block .scp-image-caption,
.NP-image-clip .scp-image-caption,
.NP-image-tape .scp-image-caption {
background: none;
border: 0;
font-size: 1rem;
padding: .5rem;
}
.NP-image-clip .scp-image-block img,
.NP-image-tape .scp-image-block img {
transform: rotate(358deg);
-webkit-transform: rotate(358deg);
padding: 0;
filter: drop-shadow(1px 1px 4px grey);
border: 1rem solid rgb(var(--NP-white));
background: rgb(var(--NP-white));
min-width:0;
}
.NP-image-clip .scp-image-block,
.NP-image-tape .scp-image-block {
background: none;
border: 0;
box-shadow: none;
min-width:0;
position: relative;
}
.scp-image-block .scp-image-caption p {font-weight: 100;}
.scp-image-block .scp-image-caption strong {font-weight: 700;}
.NP-image-clip .scp-image-caption,
.NP-image-tape .scp-image-caption {padding-top: .5rem;}
.lightblock {
padding: 0.01rem 1rem;
margin: 0.5rem;
background: rgb(var(--NP-white));
box-shadow: 0 0 0.4rem rgb(var(--NP-dark));
font-family: "Noto Serif SC", serif;
}
.fixeded {
--toc-heading-bg: var(--light-ui-bg);
--toc-heading-hover-bg: var(--light-ui-bg);
--toc-heading-txt: var(--light-ui-txt);
--toc-heading-hover-txt: var(--light-ui-txt);
position: fixed;
right: -300px;
bottom: 5vh;
z-index: 10;
opacity: 0.5;
transition: right 0.2s, opacity 0.2s;
}
.fixeded div#toc {
margin: 0;
width: 300px;
box-sizing: border-box;
}
.fixeded div#toc #toc-list {
max-height: 200px;
overflow-y: auto;
}
.fixeded::before {
content: "展开目录";
display: block;
padding: 0.5rem 1rem;
position: absolute;
right: 100%;
bottom: 0;
background: rgb(var(--toc-heading-bg));
border: 0.1rem solid rgb(var(--global-border));
border-right: none;
box-sizing: border-box;
}
.fixeded:hover, .fixeded:focus, fixeded:focus-within {
right: 0;
opacity: 1;
}
.fixeded #toc #toc-action-bar a {
display: none;
}
.overflow-wrapper-wrapper {
width: 0;
margin: auto;
}
.overflow-wrapper {
margin: 10vh -51vw;
position: relative;
z-index: 0;
}
.preface-wrapper {
padding: calc(5vh + 5vw) 0;
border: solid rgb(var(--global-border));
border-width: 0.2rem 0;
box-sizing: border-box;
}
.preface-wrapper h1 {
margin: 0;
position: absolute;
z-index: -1;
right: 5vw;
top: 0;
font-size: 20vw;
opacity: 0.2;
}
.cl-wrapper {
background-size: cover;
background-attachment: fixed;
background-position: center;
padding: 0 0 30vh;
}
.cl-wrapper::before {
content: "Cover Letter";
position: absolute;
bottom: 0;
right: 2vw;
color: rgb(var(--global-accent-2));
font-size: 12vw;
line-height: 1;
font-family: 'Abril Fatface';
}
.cl-wrapper h1 {
margin: 0 0 50vh 2vw;
color: rgb(var(--global-accent-2));
font-size: 20vw;
}
.cl-wrapper h2 {
margin: 0 2vw -1.5vw;
color: rgb(var(--global-accent-2));
font-size: calc(1rem + 3vw);
line-height: 1;
text-align: right;
z-index: 1;
position: relative;
}
.cl {
background: rgb(var(--body-bg), .9);
backdrop-filter: blur(0.1rem);
padding: calc(1rem + 1.5vw) calc(1rem + 1vw) 1rem;
box-shadow: 0 0 2.5rem -1rem rgb(var(--global-dark-color));
column-width: 320px;
column-rule: 0.1rem solid rgb(var(--global-border));
column-gap: 1rem;
}
.cl > p:first-of-type::first-letter {
font-size: 2.8rem;
line-height: 1;
font-weight: 900;
float: left;
padding: 0 0.4rem 0 0;
}
.right .cl-float {
float: left;
margin: 1rem 0.5rem 1rem calc(-2.4rem - 4vw);
}
.left .cl-float {
float: right;
margin: 1rem calc(-2.4rem - 4vw) 1rem 0.5rem;
}
.cl-float > img {
display: block;
width: auto;
max-width: calc(400px - 1rem + 1vw);
min-width: 80%;
border: 0.2rem solid rgb(var(--NP-black));
outline: 0.2rem solid rgb(var(--NP-white));
box-sizing: border-box;
box-shadow: 0 0 0 0.4rem rgb(var(--NP-black)), 0 0 0 0.8rem rgb(var(--NP-white)), 0 0 0.4rem 0.8rem rgb(var(--NP-dark));
margin: 1rem;
}
.overflow-container.right {
margin: 0 1vw 10vh auto;
}
.overflow-container.left {
margin: 0 auto 10vh 1vw;
}
.feature-wrapper {
padding: calc(20vh + 20vw) 0;
background: url(https://liurdrooms.wikidot.com/local--files/brtest:fashion-weekly/068_compressed.jpg);
background-attachment: fixed;
background-size: cover;
background-position: right;
}
.feature-wrapper h1 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40%;
background: rgb(var(--body-bg));
writing-mode: vertical-lr;
text-orientation: sideways;
font-size: calc(2.5rem + 7.5vw);
margin: 0;
z-index: -1;
}
.feature-wrapper::before {
content: "FEATURE";
position: absolute;
bottom: 0;
right: 0;
color: rgb(var(--body-bg));
writing-mode: vertical-lr;
width: 60%;
height: 100%;
background: rgba(var(--dark-block-bg), .4);
font-size: calc(5rem + 10vw);
font-family: "Outfit", sans-serif;
font-weight: 900;
z-index: -1;
line-height: 1;
transform: rotate(180deg);
}
.overflow-container {
width: clamp(320px, var(--content-width), calc(100% - 2rem));
margin-left: auto; margin-right: auto;
box-sizing: border-box;
}
.feature {
display: flex;
gap: 0 1rem;
align-items: center;
background: rgba(var(--body-bg), .9);
backdrop-filter: blur(0.1rem);
box-shadow: 0 0 2.5rem -1rem rgb(var(--global-dark-color));
}
.list-wrapper {
padding: 1rem 0;
background-color: rgb(var(--dark-block-bg));
background-image: url(https://lemoncat233.github.io/supreroomartists/BKRCN_journal/ttten.svg);
background-size: cover;
}
.list-wrapper h1 {
color: rgb(var(--dark-block-txt));
margin: 0 calc(0.5rem + 2vw) 0 auto;
font-size: calc(1.5rem + 2vw);
text-align: right;
line-height: 1;
}
.list {
color: rgb(var(--dark-block-txt));
margin-right: 2vw;
padding: 0 0.5rem;
width: clamp(320px, var(--content-width), 50%);
text-align: justify;
font-size: calc(0.8rem + 0.5vw);
}
.list-wrapper .list-pages-box {
display: flex;
flex-wrap: wrap;
justify-content: center;
height: 75vh;
width: 100%;
overflow-x: auto;
box-sizing: border-box;
mask-image: linear-gradient(to bottom, black 90%, transparent);
-webkit-mask-image: linear-gradient(to bottom, black 90%, transparent);
}
.list-wrapper .list-pages-item {
width: clamp(320px, calc(50% - 2.5rem), 480px);
background: rgb(var(--body-bg), .9);
backdrop-filter: blur(0.1rem);
margin: 1rem;
padding: 1rem;
box-sizing: border-box;
box-shadow: 0 0 2.5rem -1rem rgb(var(--global-dark-color));
}
@media only screen and (max-width: 768px) {
.feature {
flex-wrap: wrap;
}
}
@media only screen and (min-width: 1024px) {
.feature-wrapper {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.feature {
width: 640px;
margin-left: 0; margin-right: 0;
}
}
@media only screen and (min-width: 1920px) {
.overflow-container.right {
margin: 0 auto 10vh;
}
.overflow-container.left {
margin: 0 auto 10vh;
}
}
.feature .NP-image-nonborder {
width: 300px;
margin: auto;
}
.feature h2 {
font-size: calc(1.5rem + 1vw);
}
.list-wrapper .collapsible-block {
padding: 0rem 2vw;
}
.media-wrapper {
padding: 5vh 0;
}
.media-license {
width: clamp(320px, calc(100% - 4vw), var(--content-width));
margin: 2rem auto;
padding: 0.5rem 1rem;
background: rgba(var(--global-border), 0.2);
color: rgb(var(--global-dark-color));
backdrop-filter: blur(0.1rem);
font-size: 1.2rem;
border: solid rgb(var(--global-border));
border-width: 0 0.2rem;
position: relative;
z-index: 0;
}
.media-license::before {
content: "\F33A";
position: absolute;
bottom: 0;
left: 1rem;
font-size: 4rem;
font-family: bootstrap-icons;
z-index: -1;
line-height: 1;
opacity: 0.2;
height: 100%;
display: flex;
align-items: center;
}
.media-wrapper h1 {
margin: 0;
position: absolute;
z-index: -1;
right: 5vw;
top: 0;
font-size: 10vw;
opacity: 0.2;
}
.media-wrapper::before {
content: "\F49F";
position: absolute;
bottom: 0;
right: 3vw;
font-size: 35vw;
font-family: bootstrap-icons;
z-index: -1;
line-height: 1;
opacity: 0.2;
}
.media-wrapper .media {
width: clamp(320px, calc(100% - 4vw), 1024px);
padding: 0 1rem;
column-width: 296px;
column-count: 3;
column-rule: 0.1rem solid rgb(var(--global-border));
column-gap: 1rem;
}
.media > div {
break-inside: avoid;
}
:is(.media, .spanner) > div:not(.NP-image-nonborder) + p::first-letter {
font-size: 2.8rem;
line-height: 1;
font-weight: 900;
float: left;
padding: 0 0.4rem 0 0;
}
.spanner {
column-span: all;
}
.media h2 {
color: rgb(var(--global-accent-2));
}
.other-wrapper {
padding: 10vh 0;
border-bottom: 0.2rem solid rgb(var(--global-border));
}
.other-wrapper h1 {
position: absolute;
top: 0;
left: 3vw;
font-size: 15vw;
z-index: -1;
opacity: 0.2;
line-height: 1;
margin: 0;
}
.other {
backdrop-filter: blur(0.1rem);
}
.other h2 {
border-bottom: var(--global-border-width) solid rgb(var(--global-border));
padding: 0.2rem 0;
}
.footer-wikiwalk-nav.flex {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin: 10vh auto;
font-size: calc(0.3rem + 0.5vw);
}
.footer-wikiwalk-nav.flex :is(a, span) {
display: flex;
justify-content: center;
align-items: center;
}
.footer-wikiwalk-nav.flex span {
flex-grow: 1;
flex-basis: min-content;
height: 80vh;
background-image: linear-gradient(to left, rgba(var(--dark-block-bg), 0.8), rgba(var(--dark-block-bg), 0)), var(--img);
background-size: cover;
background-position: center;
transition: flex-grow var(--global-duration), filter var(--global-duration);
}
.footer-wikiwalk-nav.flex span:is(:hover, :focus) {
flex-grow: 3;
filter: brightness(1.5);
transition: flex-grow var(--global-hover-duration), filter var(--global-hover-duration);
}
.footer-wikiwalk-nav.flex a {
width: 100%;
align-self: stretch;
backdrop-filter: blur(0.1rem);
background: rgba(var(--dark-block-bg), 0);
color: rgb(var(--dark-block-txt));
font-family: var(--title-font);
font-weight: 900;
font-size: 5vh;
writing-mode: vertical-lr;
align-items: flex-end;
padding: 0 2vw;
}
@media only screen and (max-width: 768px) {
.cl {
margin: 0;
width: 100%;
}
:is(.left, .right) .cl-float {
float: unset;
margin: 1rem auto;
}
.cl-float > img {
margin: 2rem auto;
max-width: 90%;
}
}
.cover-25 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto auto repeat(2, 1fr) auto auto;
gap: 0.5rem;
padding: clamp(0.5rem, calc( .5rem + 1.5vw), 2rem);
padding-bottom: 0.5rem;
margin: auto;
width: 400px;
max-width: 80%;
aspect-ratio: 2 / 3;
box-shadow: 0 0 0.5rem rgb(var(--global-dark-color));
line-height: 1;
background-color: var(--cover-bg);
background-image: var(--cover-img);
background-position: var(--position);
}
.title-cn {
grid-column: 1 / 2;
grid-row: 2 / 7;
display: flex;
align-items: center;
justify-content: flex-start;
color: rgb(var(--dark-block-txt));
text-shadow: 0.1rem 0.1rem rgb(var(--global-dark-color));
writing-mode: vertical-lr;
text-orientation: sideways;
line-height: 100%;
font-family: "Noto Serif SC", serif;
font-weight: 900;
font-size: clamp(1rem, calc(1rem + 1.5vw), 2.5rem);
box-shadow: inset 1.5rem 0 rgba(var(--global-dark-color), .4);
}
.vol-25 {
grid-column: 4 / 6;
align-self: center;
justify-self: end;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
align-content: center;
justify-content: center;
justify-items: stretch;
gap: 0.1rem;
color: rgb(var(--dark-block-txt));
filter: drop-shadow(0.1rem 0.1rem 0 rgb(var(--dark-block-bg)));
}
.vol-25 .year {
grid-column: 1 / 3;
font-size: clamp(0.5rem, calc(0.4rem + 0.6vw), 1rem);
border-bottom: 0.1rem solid currentColor;
text-align: right;
}
.vol-25 .vol {
font-size: clamp(0.5rem, calc(0.4rem + 0.3vw) 0.75rem);
}
.vol-25 .num {
font-size: clamp(0.8rem, calc(0.8rem + 1.2vw), 2rem);
}
.cover-side {
grid-column: 6 / 7;
grid-row: 2 / 3;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
font-size: clamp(0.75rem, calc(0.75rem + 1vw), 1.8rem);
aspect-ratio: 1 / 1;
justify-items: center;
padding: clamp(0.2rem, calc(0.2rem + 0.3vw), 0.5rem);
align-self: flex-start;
height: fit-content;
justify-self: end;
background: rgb(var(--dark-block-bg));
color: rgb(var(--dark-block-txt));
font-weight: 900;
font-family: 'Noto Serif SC', serif;
align-items: center;
}
.cover-side span {
display: block;
}
.title-25 {
grid-column: 1 / 7;
display: flex;
justify-content: space-between;
color: rgb(var(--dark-block-txt));
font-family: "Imbue", serif;
font-size: clamp(2.5rem, calc(2.5rem + 2.5vw), 5rem);
height: fit-content;
border-bottom: 0.1rem solid currentColor;
filter: drop-shadow(0.1rem 0.1rem 0 rgb(var(--dark-block-bg)));
}
span.special {
font-family: 'Fredericka the Great';
font-size: clamp(1.5rem, calc(2.5rem + 2.5vw), 4rem);
padding: calc( 0.2rem + 0.2vw);
line-height: 0;
display: flex;
justify-content: center;
align-items: center;
color: rgb(var(--global-pale-color));
background: rgb(var(--global-black-color));
transform: rotate(5deg) scale(1.2);
}
.bottom-25 {
grid-column: 1 / 7;
grid-row: 6 / 7;
align-self: end;
color: rgb(var(--dark-block-txt));
font-size: 0.6rem;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Noto Serif SC', serif;
font-weight: 900;
filter: drop-shadow(0.05rem 0.05rem 0 rgb(var(--dark-block-bg)));
}
.bottom-25::before {
--mask-image: url("https://lemoncat233.github.io/supreroomartists/BKRCN_journal/br%E5%8D%8A%E6%9C%88%E5%88%8A_%E5%A4%8D%E5%88%B6.svg");
content: "";
height: 2rem;
width: 2rem;
display: inline-block;
background-color: rgb(var(--dark-block-txt));
mask-image: var(--mask-image);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: left;
-webkit-mask-image: var(--mask-image);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: left;
}
.cover-25 .covercontent {
grid-column: 1 / 7;
grid-row: 5 / 6;
align-self: end;
color: rgb(var(--dark-block-txt));
text-align: right;
font-family: "Inter", "Noto Sans SC", "Noto Sans TC", sans-serif;
font-weight: 900;
border-right: 0.5rem solid currentColor;
padding-right: 0.5rem;
filter: drop-shadow(0.1rem 0.1rem 0 rgb(var(--dark-block-bg)));
}
.cover-25 .covercontent .covername {
font-size: 1.5rem;
}
.cover-25 .covercontent .coverauthor {
font-size: 0.8rem;
}