M
A
S
T
A
I
↓
.mastai-split {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
}
.mastai-split .vid-left,
.mastai-split .vid-right {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.mastai-split .vid-left {
clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%);
z-index: 1;
}
.mastai-split .vid-right {
clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
z-index: 1;
}
.mastai-split video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mastai-split .diagonal-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}
.mastai-split .diagonal-line::after {
content: ”;
position: absolute;
top: 0;
left: calc(50% – 1px);
width: 2px;
height: 100%;
background: rgba(255,255,255,0.3);
transform: rotate(0deg);
transform-origin: center;
clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 100%);
}
.mastai-editorial {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 3;
}
.mastai-editorial .me-letter {
position: absolute;
color: #ffffff;
font-weight: 100;
font-style: normal;
line-height: 0.85;
letter-spacing: -0.02em;
font-family: ‘Inter’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
user-select: none;
margin: 0;
padding: 0;
}
/* M — colossal, pushed hard to the left, slightly tilted */
.mastai-editorial .me-m {
font-size: 25vw;
top: -4%;
left: -3%;
transform: rotate(-1.5deg);
}
/* A — medium, upper-right quadrant */
.mastai-editorial .me-a1 {
font-size: 11vw;
top: 8%;
right: 3%;
transform: rotate(2deg);
}
/* S — large, pushed low-left */
.mastai-editorial .me-s {
font-size: 18vw;
bottom: 12%;
left: 4%;
transform: rotate(1deg);
}
/* T — small-ish, mid-center-right, overlapping */
.mastai-editorial .me-t {
font-size: 6vw;
top: 42%;
left: 58%;
transform: rotate(-2.5deg);
}
/* A2 — huge, bottom-right, bleeding off edge */
.mastai-editorial .me-a2 {
font-size: 22vw;
bottom: -6%;
right: -2%;
transform: rotate(1.5deg);
}
/* I — tall and thin, dead center, overlapping everything */
.mastai-editorial .me-i {
font-size: 8vw;
top: 18%;
left: 47%;
transform: rotate(-1deg);
}
/* Scroll arrow — pinned bottom center */
.mastai-editorial .me-arrow {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
font-weight: 300;
color: #ffffff;
letter-spacing: 0;
opacity: 0.85;
font-family: ‘Inter’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
}
