@font-face {
font-family: "diatype";
src: url("diatypepre-medium.woff") format('woff');
}

::selection {
color: #f20d0d;
}

body {
font-size: 12.3px;
margin: 36px 42px;
padding-bottom: 104px;
font-family: diatype, sans-serif;
font-kerning: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
text-rendering:geometricPrecision;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-wrap: pretty;
scroll-behavior: smooth;
line-height: 1.5;
color: black;
}

.hanger, .hanger2 {
margin: 0px;
padding: 20px 0px;
z-index: 2;
}

.drawer {
max-width: 46vw;
position: absolute;
top: 73px;
left: 0;
right: 0;
margin: auto;
}

.box {
margin-bottom: 156px;
}

.room {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 46vw;
object-fit: cover;
z-index: 2;
}

.room img {
width: 100%;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}

.text-content {
padding-bottom: 24px;
}

.work-block {
margin-bottom: 104px;
}

.press {
position: absolute;
top: 73px;
right: 42px;
max-width: 21vw;
font-size: inherit;
margin: 0;
padding: 0;
z-index: 10;
}

.cross {
position: fixed;
top: 36px;
right: 42px;
font-size: 1.33em;
margin: 0;
padding: 0;
z-index: 1000; /* higher to make sure it stays above everything */
}

img {
max-width: 100%;
margin: auto;
display: block;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}

a {
color: black;
text-decoration: none;
}

a:hover {
color: #f20d0d;
}

p {
margin: 0px;
padding: 0px;
}

.mark {
color: #f20d0d;
}

.image-container img {
display: none; /* Hide all images initially */
}

.image-container img.active {
display: block; /* Show only the active image */
}

.image-caption {
margin: 12px 0px 36px;
}

@media screen and (max-width: 980px) {

body {
margin: 24px;
}

.cross {
top: 24px;
right: 24px;
font-size: 1.2em;
}

.hanger {
display: none;
}

.drawer {
position: relative;   /* normal flow */
top: 80px;
left: auto;
right: auto;
margin: 0 30px 0 30px; /* keep some spacing */
max-width: 96vw;
}

.room {
display: none;
}

.press {
position: relative;  /* normal flow */
top: auto;
right: auto;
max-width: 96vw;         /* full width */
margin: 52px 0 0 0;  /* spacing from works */
float: none;
}

}