灯光、雪，以及烟火气

@import url('https://fonts.googleapis.com/css2?family=Nixie+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
 
:root {
    --body-bg: 225, 225, 225;
    --content-bg: var(--global-white-color);
    --bg-opacity: 0.9;
 
    --extra-bg-1: url(https://imagebed.pro/images/liurd/skyline.svg);
    --extra-bg-2: url(https://imagebed.pro/images/liurd/skyline.svg);
    --extra-bg-3: url(https://imagebed.pro/images/liurd/skyline.svg);
    --extra-opacity-1: 0.15;
    --extra-opacity-2: 0.05;
    --extra-opacity-3: 0.05;
 
    --topbar-hover-bg: var(--dark-ui-bg), 0.2;
    --topbar-hover-txt: var(--light-ui-txt);
 
    --user-drop-txt: var(--dark-ui-txt);
 
    --bottombar-bg: var(--dark-ui-bg);
    --bottombar-txt: var(--dark-ui-txt);
 
    --header-title: "Backrooms";
 
    --banner-title: "BACKROOMS";
    --banner-subtitle: "当色彩褪去的时候";
 
    --header-height: 3rem;
    --topbar-height: 2.5rem;
    --dropdown-height: var(--topbar-height);
    --banner-height: 25rem;
 
    --header-ui-size: 3rem;
 
    --header-title-size: 1.8rem;
    --topbar-size: clamp(0.8rem, calc(0.4rem + 0.8vw), 1.2rem);
    --banner-title-size: clamp(2rem, calc(2rem + 3.5vw), 6rem);
    --banner-subtitle-size: 1rem;
 
    --banner-font: "Nixie One", "Noto Serif SC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, serif;
    --header-font: var(--banner-font);
    --title-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif;
    --body-font: "Atkinson Hyperlegible", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
    --ui-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
}
 
#extra-div-1 {
    position: fixed;
    width: 100%;
    height: 25vh;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: var(--extra-bg-1);
    background-size: 20rem;
    background-repeat: repeat-x;
    background-position: center;
    opacity: var(--extra-opacity-1);
}
 
#extra-div-2 {
    position: fixed;
    width: 100%;
    height: 50vh;
    bottom: 0;
    left: 0;
    z-index: -2;
    background-image: var(--extra-bg-2);
    background-size: 40rem;
    background-repeat: repeat-x;
    background-position: center;
    opacity: var(--extra-opacity-2);
}
 
#extra-div-3 {
    position: fixed;
    width: 100%;
    height: 100vh;
    bottom: 0;
    left: 0;
    z-index: -3;
    background-image: var(--extra-bg-3);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    opacity: var(--extra-opacity-3);
}
 
#container {
    display: grid;
    grid-template-columns: minmax(var(--sidebar-width), 1fr)auto 1fr;
    grid-template-rows: auto auto auto auto;
}
 
#extrac-div-1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--banner-font);
    font-weight: 200;
    width: 100%;
    height: var(--banner-height);
    color: rgb(var(--header-txt));
    order: -1;
}
 
#extrac-div-1::before {
    content: var(--banner-title);
    font-size: var(--banner-title-size);
}
 
#extrac-div-1::after {
    content: var(--banner-subtitle);
    font-size: var(--banner-subtitle-size);
}
 
#header {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    min-width: var(--sidebar-width);
    width: 100%;
    height: fit-content;
    grid-template-columns: var(--header-ui-size) 1fr auto auto;
    grid-template-rows: var(--header-ui-size) calc(var(--banner-height) - var(--header-ui-size)) auto;
    top: calc(0px - var(--banner-height));
    order: -2;
}
 
#search-top-box {
    grid-column: 3 / 4;
    position: fixed;
    right: var(--header-ui-size);
    backdrop-filter: blur(1rem);
}
 
#login-status {
    grid-column: 4 / 5;
    position: fixed;
    right: 0;
    backdrop-filter: blur(1rem);
}
 
#header h1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: var(--header-height);
    position: static;
}
 
#header h1 a {
    justify-content: flex-start;
    padding: 0;
    padding-left: 0.5rem;
    transition: padding var(--global-duration);
}
 
#header h1 a:is(:hover, :focus) {
    padding-left: 1rem;
    transition: padding var(--global-hover-duration);
}
 
#header h2 {
    display: none;
}
 
#header-extra-div-1 {
    display: none;
}
 
#top-bar {
    grid-column: 1 / 5;
    grid-row: 3 / 4;
    height: auto;
}
 
#top-bar > div > ul {
    flex-direction: column;
    height: auto;
    margin-right: 0;
}
 
#top-bar > div > ul > li {
    flex-basis: unset;
    height: var(--topbar-height);
}
 
#top-bar > div > ul > li > a {
    justify-content: flex-end;
    padding: 0 1rem;
}
 
#top-bar > div > ul > :is(li, li:last-of-type) > ul {
    top: 0;
    left: 100%;
    width: 24em;
    max-width: max-content;
    min-width: auto;
    flex-direction: row;
    flex-wrap: wrap;
}
 
#top-bar > div > ul > li > ul > li {
    width: 10em;
    flex-grow: 1;
}
 
#top-bar > div > ul > :is(li, li:hover, li:focus, li.sfhover, li:focus-within) > ul > li > a {
    box-sizing: border-box;
}
 
#content-wrap {
    display: contents;
}
 
#side-bar {
    max-height: unset;
    overflow-y: auto;
    border: unset;
    box-shadow: 0 0 1.5rem -1rem rgb(var(--global-dark-color));
}
 
#side-bar::after {
    backdrop-filter: blur(1rem);
}
 
#main-content {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0 auto 15vh;
    padding: 1.5rem;
    box-shadow: 0 0 2.5rem -1rem rgb(var(--global-dark-color));
    position: relative;
    background: rgba(var(--content-bg), var(--bg-opacity));
}
 
#main-content::after {
    content: "你曾经来过这里.";
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10vh;
    color: rgb(var(--header-txt));
    font-family: var(--banner-font);
    font-weight: 200;
}
 
#page-title {
    padding: 0;
}
 
:is(blockquote, .blockquote, div.blockquote, [class*=blockquote]) {
    padding: 0.5rem 1rem;
    border-width: 0 0 0 0.3rem;
    background: rgba(var(--light-block-bg), 0.4);
}
 
#page-options-container {
    font-family: var(--ui-font);
}
 
#footer {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    box-sizing: border-box;
    justify-content: flex-end;
    margin-top: 0.5rem;
    border: unset;
}
 
#license-area {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    padding: 0.5rem;
    justify-content: flex-end;
}
 
#license-area a {
    color: rgb(var(--global-pale-color));
}
 
@media only screen and (max-width: 1024px) {
  #container-wrap {
    perspective-origin: 49.5% 5rem;
  }
 
  #container {
    display: flex;
  }
 
  #header {
    min-width: var(--sidebar-width);
    grid-template-columns: var(--header-ui-size) 1fr auto auto;
    grid-template-rows: var(--header-ui-size) auto auto;
    top: 0;
    width: initial;
    position: static;
  }
 
  #content-wrap {
    display: block;
    margin: 0;
  }
 
  #login-status {
    position: relative;
    backdrop-filter: unset;
  }
 
  #search-top-box {
    position: static;
    backdrop-filter: unset;
  }
 
  #login-status #account-options {
    left: initial;
    right: 0;
  }
 
  #top-bar > div > ul {
    flex-direction: row;
    margin-right: auto;
  }
 
  #top-bar > div > ul > li {
    flex-basis: min-content;
  }
 
  #top-bar > div > ul > li > a {
    justify-content: center;
    padding: 0;
  }
 
  #top-bar > div > ul > :is(li, li:last-of-type) > ul {
    top: 100%;
    left: 0;
    width: auto;
    flex-direction: column;
  }
 
  #top-bar > div > ul > li:last-of-type > ul {
    left: initial;
    right: 0;
  }
 
  #top-bar > div > ul > li > ul > li {
    width: 100%;
    flex-grow: 1;
  }
}
 
@media only screen and (max-width: 768px) {
    #top-bar > div > ul > :is(li, li:last-of-type) > ul {
        flex-direction: row;
    }
    #top-bar > div > ul > li > ul > li {
        width: 50%;
    }
}

关闭

一月一日，元旦到了。

元旦是个重要的节日，在前厅如此，在后室更是如此。毕竟后室这地方，能多活一天便胜过不知多少人，一月一日到了，意味着自己多活了整整一年，当然值得好好庆祝一番。尽管现在后室的环境较先前好了不少，至少人们不用再去冒着生命危险寻找口粮，但一样重视元旦的到来。

说是重视，其实也没啥节日气氛。到了十二月三十一日那天晚上，即便是嗜睡症也好了，一个个捧着手机，眼睛瞪的巨大。到了二十三点，各大社交平台上，各种早在手机里存了不知多久的跨年文案就开始一股脑刷屏。等到“23:59”跳转成“00:00”的那一刻，截个图保存下来，然后关灯睡觉。等到一月一日的太阳升起来，生活照常。

说到节日就想起齐向坚。他每次一到十二月初，就开始念叨还有多少天到元旦。至于其他节日，也是如此。不管什么节，也不管几月过，挨个念叨一遍，念叨得让人听着脑袋都大。人不在前厅，但前厅的节日他是一个没少过。当我问他为什么这样时，他笑着回答我：“这样可以让生活更有期待感一些。”

我是个上海人。在我的印象里，即将跨年之时，上海永远是这样：夜晚来临，一座座摩天大楼披上彩衣，闪烁着耀眼的灯光。人们一排排站在黄浦江边。等到零点到来时，欢呼声、尖叫声飓风一般呼啸而来，老人微笑，恋人拥抱，小孩又蹦又跳。那种场面，我不可否认很震撼，很壮观，但我无法从中感受到一丝喜悦。

大概是因为上海本就是一片冷冰冰的水泥森林吧。这片水泥森林里徒有景，却没有情。

什么是情？

跟一群素不相识的陌生人一起欣赏持续几个小时的灯光秀，和跟自己的家人一起聚在家里吃一顿热乎乎的饭，如果让我在这二者之间选择一个，我会毫不犹豫选择后者，因为后者才叫有情。

但可惜，自从姐姐出车祸之后，在上海，在前厅，我失去了选择后者的机会。

一月一日是冬天，冬天理论上会下雪。真是奇怪，不少人讨厌雨，却几乎没有人不喜欢雪。尤其是南方人，他们都争着抢着想去北方，看看那只存在于书中和视频平台上的雪到底是什么样的。

在我的记忆里，上海从未下过雪。可能下过一两次吧，但我忘记了，因为我不关心。

徐臻和陆秋云十二岁那年冬天，我们住的层级下了场大雪。他们在窗边看着雪纷纷扬扬地落下，兴奋地喊个不停。吃完午饭，两个小孩换上羽绒服，迫不及待地冲进雪地，在积雪中踩出一串串脚印，一个劲地奔跑、蹦跳，捡起地上的雪揉成球扔向对方。我和齐向坚在屋子里，一边看着他们，一边聊着写作与生活。他们玩累了，就进屋休息几分钟，然后再次跑进雪中，直到彻底筋疲力尽。

如今齐向坚走了，徐臻和陆秋云长大了，但那画面我到现在还记得。

后室，竟比上海有情。

这样一来，后室就算什么景也没有，在我心里，也胜过了不知多少空有景的地方。

若说起景来，尽管后室天然便有着叫人眼花缭乱的森林、高山、河流、草原，但节日氛围还是要交给人来营造。至于怎么营造，无非就是在那些城市层级里挂上灯笼，点起彩灯。和前厅的城市没两样。

幸好，后室还有不少才华横溢的艺术家，他们总能带来让人看不够的精彩表演。今年更是直接组织了一场跨年晚会，从天黑到天亮。

徐臻是个哪里人多就去哪里凑热闹的人，我想都不用想就知道他一定会和陆秋云一起去看。

但徐臻不仅没去看演出，反而拉着我们一起去吃铜锅涮肉。在前厅，据说北方人都喜欢铜锅涮肉，特别是入冬以后必须吃一顿。没想到徐臻一个后室出生的孩子，和我们这群南方人一起生活，却活成了一个北方人。

徐臻特意预定了个靠暖气的位置。几个人开吃没多久，我好奇地问他：“你怎么突然想带我们一起吃饭了？”

“你们不是平时一直抱怨生活没有烟火气吗？”徐臻摊开右手手掌，在我们面前扫过一圈，“我一想，什么地方最有烟火气？不就是吃铜锅涮肉的地方吗！”他指着冒白气的锅，“你看，多有烟火气！”

我笑了。徐臻一向都这么幽默。

“沈姐多吃点。你都瘦成啥样了！”徐臻夹起一筷子蘸满麻酱的羊肉放进我的碗中，“还有，吃涮羊肉怎么能不蘸麻酱呢？”

我点点头，夹起一片羊肉放进口中。