진짜가 아니야, 진짜였던 적 없어, 이 불쌍한 바보들아
:root {
/* header measurements */
--header-height-on-desktop: 10rem;
--header-height-on-mobile: 10rem;
--header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
--header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
--logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
}
#header {
--search-textbox-text-color: var(--swatch-secondary-color);
background: none;
}
#header::before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0.75rem;
background-image: var(--logo-image);
background-repeat: no-repeat;
background-position: center 0;
background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
opacity: 0.8;
pointer-events: none;
}
#header h1,
#header h2 {
margin: 0;
padding: 0;
width: 100%;
height: var(--header-height-on-desktop);
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
#header h1 a,
#header h1 a::before,
#header h2 span,
#header h2 span::before {
margin: 0;
padding: 0;
z-index: 0;
display: block;
text-align: center;
}
#header h1 {
z-index: 1;
}
#header h1 a::before,
#header h1 a::after {
content: var(--header-title);
}
#header h1 a::before {
color: rgb(var(--swatch-text-tertiary-color));
z-index: -1;
-webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
}
#header h1 a::after {
color: rgb(var(--swatch-headerh1-color));
z-index: 1;
}
#header h2 {
z-index: 0;
text-transform: uppercase;
pointer-events: none;
}
#header h2 span {
margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
}
#header h2 span::before,
#header h2 span::after {
--wght: 600;
content: var(--header-subtitle);
position: absolute;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 100%;
text-align: center;
}
#header h2 span::before {
-webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
}
#header h2 span::after {
color: rgb(var(--swatch-headerh2-color));
z-index: 1;
}
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
color: rgba(0, 0, 0, 0);
}
@media (min-width: 36rem) {
#login-status {
flex-grow: 1;
left: 3%;
right: initial;
}
#login-status::before {
--mask-image: none;
background-color: transparent;
}
#login-status:not(:focus-within) {
color: rgb(var(--login-line-divider-color));
-webkit-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
user-select: initial;
}
#login-status #account-topbutton,
#login-status:not(:focus-within) #account-topbutton {
--clip-path:
polygon( 0 0, 100% 0, 100% 100%, 0 100% );
background-color: rgba(var(--login-arrow-color), 0);
}
#login-status #account-topbutton::before{
--clip-path:
polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
--mask-image: initial;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--login-arrow-color), 1);
-webkit-clip-path: var(--clip-path);
clip-path: var(--clip-path);
}
#login-status #account-topbutton::before,
#login-status:not(:focus-within) #account-topbutton::before,
#login-status:not(:focus-within) #account-topbutton:hover::before {
--clip-path:
polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
--mask-image: initial;
}
#login-status:not(:focus-within) #account-topbutton::after {
display: none;
}
#login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
--clip-path:
polygon(
0 0,
100% 0,
100% 100%,
0 100%
);
pointer-events: all;
-webkit-clip-path: var(--clip-path);
clip-path: var(--clip-path);
}
#login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
opacity: 1;
}
#login-status #my-account {
--wght: 300;
}
#account-options {
background: var(--gradient-header);
}
#search-top-box {
top: 1.5em;
right: 3%;
background: rgba(var(--search-focus-textbox-bg-color), 0.4);
}
#search-top-box:focus-within ~ #login-status {
opacity: 1;
}
#search-top-box::after {
transition:
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
transition:
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
transition:
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
-webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
#search-top-box:not(:focus-within)::after {
--clip-path:
polygon(
0 0,
100% 0,
100% 100%,
0% 100%
);
background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
-webkit-clip-path: var(--clip-path);
clip-path: var(--clip-path);
}
#search-top-box:not(:focus-within):hover::after {
--clip-path:
polygon(
0 0,
100% 0,
100% 100%,
0 100%
);
background-color: rgb(var(--search-icon-hover-bg-color));
}
#search-top-box form[id="search-top-box-form"]:not(:focus-within) {
max-width: var(--search-width);
}
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
max-width: var(--search-width);
padding: 0 var(--search-height) 0 1em;
outline-width: 0;
background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
color: rgba(var(--search-textbox-text-color), 0.4);
cursor: pointer;
}
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
#search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
pointer-events: all;
border: none;
}
}
#page-title::after,
.meta-title::after,
#page-title::before,
.meta-title::before {
content: "";
flex-grow: 1;
height: 0.0625rem;
background: rgb(var(--swatch-primary));
}
#page-title::before,
.meta-title::before {
margin: auto 1.25rem auto auto;
}
@supports(display: grid) {
:root {
--sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
--body-width-on-desktop: 45.75rem;
}
@media only screen and (min-width: 769px) {
#side-bar .close-menu {
display: block;
position: fixed;
top: 0.5rem;
left: 0.5rem;
width: 3rem;
height: 3rem;
background: unset;
opacity: 1;
pointer-events: all;
z-index: -1;
}
#side-bar .close-menu img {
color: transparent;
}
#side-bar .close-menu::before,
#side-bar .close-menu::after {
content: "";
box-sizing: border-box;
position: fixed;
display: block;
top: 0.5rem;
left: 0.5rem;
width: 3rem;
height: 3rem;
padding: 0;
margin: 0;
text-align: center;
pointer-events: all;
cursor: pointer;
transition:
opacity var(--sidebar-transition-timing);
}
#side-bar .close-menu::before {
--mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
z-index: -1;
background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-size: 60%;
mask-size: 60%;
}
#side-bar .close-menu::after {
z-index: -2;
background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
border-radius: var(--toggle-roundness, 50%);
border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
}
#side-bar:focus-within .close-menu,
#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
pointer-events: none;
}
#side-bar:focus-within .close-menu::before,
#side-bar:focus-within .close-menu::after {
opacity: 0;
pointer-events: none;
}
#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
opacity: 0;
pointer-events: none;
}
#side-bar {
display: block;
position: fixed;
top: 0;
left: calc(var(--sidebar-width-on-desktop)*-1);
z-index: 10;
transition:
left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
margin-top: 0;
}
#side-bar:focus-within {
left: 0;
}
#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
left: 0;
}
#side-bar .side-block {
margin-top: 1rem;
background-color: rgb(0, 0, 0, 0);
border-radius: 0;
border-left-width: 0px;
border-right-width: 0px;
}
#main-content::before {
content: "";
display: block;
position: fixed;
top: 0;
right: 0;
z-index: -1;
opacity: 0;
transition:
opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
margin-left: var(--sidebar-width-on-desktop);
background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
padding-right: 0;
width: 100%;
height: 100vh;
pointer-events: none;
z-index: 99;
}
#side-bar:focus-within ~ #main-content::before {
width: calc(100% - var(--sidebar-width-on-desktop));
opacity: 1;
pointer-events: all;
}
#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
width: calc(100% - var(--sidebar-width-on-desktop));
opacity: 1;
pointer-events: all;
}
@supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
padding: inherit;
} }
#content-wrap {
display: flex;
flex-direction: row;
width: calc(100vw - (100vw - 100%));
min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
flex-grow: 2;
height: auto;
position: relative;
margin: 0 auto;
max-width: inherit;
}
#main-content {
width: 100%;
position: initial;
max-height: 100%;
padding: 2rem 1rem;
max-width: var(--body-width-on-desktop, 45.75rem);
margin: 0 auto;
}
#page-content {
max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
}
@supports (-webkit-hyphens:none) {
#side-bar {
transition:
left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
padding-right: 0;
background-color: rgb(0, 0, 0, 0);
pointer-events: all;
overflow-x: visible;
overflow-y: visible;
z-index: 999;
}
#side-bar::-webkit-scrollbar {
opacity: 0;
-webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}
#side-bar .close-menu::before {
z-index: 999;
}
#side-bar .close-menu::after {
z-index: 998;
}
#side-bar:hover .close-menu::before,
#side-bar:hover .close-menu::after {
opacity: 0;
}
#side-bar:hover {
left: 0;
background-color: rgba(var(--swatch-menubg-color), 1);
padding-right: 0;
}
#side-bar:hover::-webkit-scrollbar {
opacity: 1;
}
#side-bar:hover~#main-content::before {
width: calc(100% - var(--sidebar-width-on-desktop));
opacity: 1;
pointer-events: all;
}
}
}
}
군중이 텅 빈 무대 주변에 몰려든다. 에스테르베르크 자유항에서는 변칙 예술 전시회가 한창 진행 중이다. 전시 공간 전반에서 현대 변칙 예술의 거의 모든 측면을 아우르는 공연을 볼 수 있다. 그런 상황에서도, 중앙에 있는 무대는 새로운 공연자로 인해 이 시점에서 가장 많은 관심을 받고 있다.
신입 예술가가 중앙 무대에서 작품을 선보이는 것은 흔치 않은 일이다. 이전까지 한 번도 작품을 선보인 적이 없는 예술가라면 더더욱 그렇다. 이러한 사실 때문에 지나가던 사람들은 물론 다른 예술가들까지도, 도대체 어떤 종류의 공연이길래 이 분야에서 이토록 따뜻한 환영을 끌어낼 수 있는지 궁금하여 눈길을 준다. 무대 구성은 단순하다. 텅 빈 석판 하나가 놓여있다. 거기에는 단 한 가지, 예술가의 이름만이 적혀있다. 로렘 입숨Lorem Ipsum.
시계가 배정된 시간의 시작을 알리자, 로렘은 무대 중앙으로 걸어 나온다. 속으로는 모인 사람들의 규모에 어쩔 줄 모르는 상태다. 사람이 너무 많이 왔는데.
로렘은 무대 중앙에 서서, 양손을 머리 위로 올리기 시작한다. 사람들의 시선이 그 모습에 집중된다.
곧 양손이 다시 내려간다.
그러고는 무대를 떠난다.
시계가 5분이 지났음을 알릴 즈음 혼란이 퍼져나간다. 예술가가 잠시 무대에서 내려오는 것이 처음 있는 일은 아니나, 공연자가 뭔가 하기에는 시간이 너무 얼마 없기에 예술가가 그냥 자리를 떴을 가능성이 더 높았다. 혼란은 곧 대규모의 짜증으로 바뀌고, 일부는 이딴 작품을 만든 예술가 본인을 향해 욕설을 퍼붓는다. 군중은 멍하니 무대 위를 쳐다본다. 이후 30분 동안 무대는 계속해서 비어있으나, 부재하는 공연으로부터 눈을 돌리는 이는 얼마 없다.
시계가 30분을 가리킬 때로부터 1분 정도 남았을 즈음, 로렘이 무대로 돌아온다. 그 즉시, 군중은 일제히 모욕과 요구사항을 던져대나, 예술가 본인은 그저 가만히 언제라도 자신을 찢어발길 준비가 되어있는 군중을 지켜만 보고 있다. 곧 그녀가 입을 연다.
시간 내주셔서 감사합니다. "현실적 비현실"이었습니다. 본 작품의 복제본은 일주일 뒤 제 웹사이트에서 구매할 수 있습니다.
그러곤, 로렘은 무대에서 내려온다.
뭐, 그러려는 시도는 했다.
군중은 깔끔하게 달아나려던 그녀의 앞길을 막아서고는, 강제로 다시 무대 위로 올라가게 만든다. 로렘은 남은 선택지를 생각해 본다. 도망칠 길은 없겠는걸. 체념한 듯 한숨을 내쉬고, 로렘은 다시 무대로 올라간다. 에스테르베르크 변칙예술 분야에 몸을 담은 상당수의 이들이 주변에 있는 물건을 던질 준비를 한 상황이다. 그녀는 관중들에게 진정하라는 몸짓을 한 뒤, 다시 입을 연다.
좋아요, 마음대로 하세요. 진짜 공연을 보여드려요?
군중은 (거의) 진정하고는, 이 제안에 약한 관심을 보인다. 로렘이 말을 이어 나간다.
좋아요, 그럼 해보죠. 이 즉흥 버전은 아껴두고 있던 건데 말이죠. 뭐랄까 좀 더… 말하자면 실재하는 형태로 되어야 해서 말이죠.
로렘은 정교한 행동의 패턴을 엮어나가기 시작한다. 복잡한 손놀림은 즉시 상당수의 관중을 움찔거리게 만든다. 작품이 일종의 대규모 마법 같은 건 아닌지 다들 상황을 따지기 시작한다. 그리고 갑자기, 로렘은 움직임을 멈춘다. 잠시 동안 군중은 움직이지 않고, 로렘은 만족했다는 듯이 하늘을 바라본다.
그 직후, 상당한 수의 재단 부대가 전시회로 쳐들어와서는, 곧바로 사방으로 달려 나가 곳곳에 스크랜턴 현실성 닻을 설치한다. 에스테르베르크 거주민 상당수는 이 시점에 현장에서 대피한 상황이라, 낌새를 눈치채지 못했던 변칙예술가 한 줌만이 붙잡혀서 요원들에게 심문받을 뿐이다.
몇 개의 거리는 떨어진 곳에서, 로렘이 미소 짓는다. 쓸모없지는 않았던 것 같네.
제120기지에서, 사용하지 않는 복도에 다수의 문이 일제히 나타난다. 그중 하나에서 재단 연구원 알렉스 톨리가 나온다. 비현실부 전체가 갑자기 폴란드로 공간 전이한 것을 어떻게 생각해야 할지 모르는 채로 말이다.
그보다도 훨씬 걱정스러운 것은 당장 기지가 처한 혼란 상태다. 기지 전체에서 임박한 ZK급 ”현실의 종말“ 시나리오를 알리는 경고음이 울려 퍼지고 있다. 알렉스에겐 이 상황이 설명하긴 어렵지만 아이러니하게 느껴진다. 뭔가 굉장히 뻔한 미끼가 된 기분이다.
임박한 죽음을 마주한 것처럼 보이지 않는 첫 번째 요원을 멈춰세우자 그 예감이 맞아떨어진 걸 알 수 있다. 알렉스는 인근 자유항에서 모든 흄장 감지 장비가 갑자기 고장 났다는 사실을 듣는다. 알렉스는 답을 찾고자 해당 구역으로 가기 위한 이동 수단을 요청하고, 인가를 확인한 뒤 요원은 가장 가까이 있는 차량으로 안내한다.
무대는 텅 비어있다. 알렉스는 혼란의 현장에 도달한 뒤에도 솔직히 말해서 지나치게 까다로운 공간 변칙존재인 제 사무실을 처음 와보는 대륙으로 인도한 뚜렷한 원인을 찾지 못한다. 현장을 뜨려던 참에, 알렉스는 몇 장의 종이를 발견한다. 보자마자 제184기지에서 제공했던 변칙 예술 세미나에서 본 형식임을 알 수 있다. 문서의 내용은 다음과 같다.
프로젝트 제안서 2024-000
제목: 《현실적 비현실.》 로렘 입숨 作.
물자 소요:
- 무(無). (이미 갖고 있었음)
- 무대.
- 30분.
초록: 《현실적 비현실》은 존재하지 않는 것의 복잡성을 나타내기 위한 행위 예술이다.
의도: ;)
알렉스는 한숨을 내쉰다.
아, 씨발.
« 루이즈 뒤샹의 역전재판 | 순교와 자살 사이의 유일한 차이점은 언론 보도가 되냐 안 되냐야 »
