10月24日，约翰探员的葬礼举办于三波特兰市公墓

版式 CSS 代码

@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%;
    }
}

“…因此，特地邀请您前来参加约翰探员的葬礼。”

马克狐疑的看着手上署名史密斯的邀请函，自己那个名叫约翰的混蛋同事居然死了？

好吧，也许用混蛋这个词形容一个死者不太好，但马克依然忘不了自己一觉起来在自己家厕所见到约翰的惊吓。

他总是这样，无处不在：在马克刚进入特异事故处工作的时候，他偷偷钻进他的被窝；在马克正在食堂吃饭的时候，他会突然从桌子底下爬出来；在马克出勤的时候，偶尔，也会在车上发现正在睡觉的约翰…

尽管马克非常讨厌这个没有边界感的同事，但听闻死讯，又令他感到别样的悲伤。

他想起来在他第一次不得不出手击毙罪犯时，是约翰用他幽默的舞步使自己从消极中走出。
可如今，过去的那个自己已经消逝，约翰也同样无法再见到了。
他收拾了身上的东西，穿上一套黑色的西装，匆忙的赶去了那场葬礼。

当他赶到时，发现墓地上居然没有约翰的照片，而众人显然正在为此做讨论。
马克坐在一旁沉默的旁观了一会，发现自己和其他人甚至都没能够给约翰拍一张正经的照片：或者说，他连自己的探员证上都没有正式的照片，其他人就更不可能有了。

所幸犯罪肖像师还在场，在他为约翰绘制画像的时候，葬礼的主持人史密斯专员决定先把悼词的部分过完。

很不幸的是，马克作为约翰的挚友，必须上台致辞。但一切发生的太突然，他怎么可能准备好？
硬着头皮上台的马克决定现场即兴为约翰献上自己的悼词。

“各位探员，约翰的亲属们好，今日，我们相聚于此，为了送行我们的重要之人：约翰。”

一个看起来有点正式的开头，这是马克从史密斯专员以往的长篇阔论中截取下来的。

“成也异常，败也异常，如果约翰离甜甜圈和异常远一点，或许就不会那么英年早逝…当他意识到那个巨大的甜甜圈正朝着他滚过来的时候，一切都晚了。可惜的是，我们没能救下他…为了纪念约翰，尽管那谋害约翰的甜甜圈已经受到了不可恢复的损伤，其依然被送往保存所，以供探员们和他的家属瞻仰。”

有的时候，特异事故处的探员会被一个巨大的甜甜圈压死。
马克不禁思考，未来自己的死法到底会有多荒诞？

“我的好友，也是他两个孩子的父亲，他爱人的丈夫，在短暂的一生中，给与了身边的人无比的温暖。我至今不能忘记，在我人生的低谷时，是约翰陪伴在我身边，并给我鼓励———而我也相信，在座的各位，也曾经在日常的生活中感受过，他细腻又温暖的性格。”

马克开始感到不自在，他不习惯用这种正式的语调来形容自己的朋友，因此他改变了语风，转而开始介绍起约翰一生中有趣的部分。

“众所周知的是，约翰是在一次异常事故中受到了影响之后才加入的特异事故处…因此他和常人有些许不同。我记得很清楚，有一次我要和约翰一起出任务，结果他一不小心就把鞋子和手套穿反了；还有一次，我们和上级提出要采购装备的时候，他居然一下次就定了四副夜视仪！虽然史密斯专员很高兴，但后勤部门可就遭了罪…所幸，最后也没花多少钱，因为他的脸比较小。”

台下响起了一阵快活的笑声。
好极了，马克不希望约翰的葬礼上死气沉沉——不过，时间不多了，因而马克跳过了接下来的琐事，开始介绍它的家人。

“当然，我们特异事故处能有这样一位优秀的探员，同样离不开他家人的支持。同样作为异常事件的受害者，你们和约翰一样，都遭到了无可挽回的改变。但尽管如此，你们依然保持着对生活的热情，与珍贵的亲情。我代表特异事故处的诸位，对约翰的家属致以最高的感谢：因为有你们在背后支持，我们才能和约翰一起工作。”

马克低头向着棺材旁的家属低头致意，尽管他不是很能看得清楚那些亲属到底具体在哪里。

“最后，让我们一起为约翰祈祷，愿主保佑他，愿天堂没有甜甜圈。”

马克回到座位上的时候才发现自己满头大汗，自己多久没有公开演讲过了？
他没多少时间想这个问题，因为马上正式的送别仪式就要开始了：犯罪肖像师已经将约翰的画像绘制完毕，此刻正放在棺木的上方。

他来到约翰小小的棺木前，献上了自己从路边花店买来的花朵。

在那之后，他凝视了约翰的遗像很久，很久。

离开时，他听见史密斯专员正在和领导窃窃私语。
似乎是在讨论，给约翰研发的装备是否能够回收后给它的儿子使用。
最后的结论是，需要一个数十万美金的研究项目来进行装备升级才能防止约翰的悲剧再次发生。

作者信息

文字内容作者 honghili Pigoner
图片作者 Pigoner