@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;700&display=swap");

:root {
   --c-light: #ffffff;
   --c-dark: #000;

   --ff-sans: 'Space Grotesk', system-ui, sans-serif;
   --ff-mono: 'IBM Plex Mono', ui-monospace, monospace;

   --pad: 2rem;
}

*, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html, body {
   width: 100%;
}

body {
   font-family: var(--ff-sans);
   background: var(--c-light);
   color: #000;
   -webkit-font-smoothing: antialiased;
}

img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

a, p, li {
   font-family: var(--ff-mono);
   font-size: 0.82rem;
   font-weight: 500;
   line-height: 1.25;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: inherit;
   list-style: none;
}

/* =====================================================
   TOP BAR — name left, vertical nav right
   ===================================================== */
.topbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 10;
   padding: var(--pad);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}

.topbar__name {
   color: #000;
}

.topbar__nav {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

/* =====================================================
   STAGE (the hero section)
   ===================================================== */
.stage {
   position: relative;
   width: 100%;
   height: 100svh;
   z-index: 9999;
   overflow: hidden;
     isolation: isolate;
}

/* =====================================================
   VEIL
   ===================================================== */
.veil {
   position: absolute;
   inset: 0;
   z-index: 0;
   background: var(--c-dark);
   clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
   will-change: clip-path;
}

.veil__labels {
   position: absolute;
   top: var(--pad);
   left: var(--pad);
   height: var(--row-h);
   overflow: hidden;
}

/* =====================================================
   STRIP
   ===================================================== */
.strip {
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   z-index: 2;
   transform: translateY(-50%);
   padding: 0 var(--pad);
   display: flex;
   justify-content: center;
   gap: 10vw;
   will-change: gap;
}

.tile {
   width: 15vw;
   aspect-ratio: 5 / 7;
   will-change: opacity, transform, clip-path;
   overflow: hidden;
}

/* =====================================================
   TITLE
   ===================================================== */

.title {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 20;
   white-space: nowrap;
   color: red;
}

.strip {
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   transform: translateY(-50%);
   z-index: 5;
}
.title h1 {
   font-family: var(--ff-sans);
   font-size: 15vw;
   font-weight: 700;
   line-height: 0.82;
   letter-spacing: -0.05em;
   text-align: center;
   text-transform: uppercase;
  
}

.title .word-mask {
   display: inline-block;
   overflow: hidden;
   line-height: 1;
   vertical-align: top;
}

.title .word {
   display: inline-block;
   will-change: transform;
}

.title .word-space {
   display: inline-block;
   width: 0.32em;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1000px) {
   :root { --pad: 1rem; }

   .strip {
      padding: 0 0.5rem;
      gap: 2.5vw;
   }

   .tile {
      width: 20vw;
   }
}