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

html.is-hero-loading,
html.is-hero-loading body {
   overflow: hidden !important;
}

body {
   font-family: var(--ff-sans);
   background: var(--c-light);
   color: #000;
   overflow-x: hidden;
   -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: 10003;
   padding: var(--pad);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   color: #fff;
   mix-blend-mode: difference;
   opacity: 1;
   transform: translateY(0);
   transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.is-hero-loading .topbar {
   opacity: 0;
   pointer-events: none;
   transform: translateY(-12px);
}

.topbar__name {
   color: inherit;
}

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

.topbar__nav button {
   border: 0;
   background: none;
   color: inherit;
   cursor: pointer;
   font: inherit;
   text-transform: uppercase;
}

/* =====================================================
   PIXEL NAVIGATION
   ===================================================== */
.menu {
   position: fixed;
   inset: 0;
   z-index: 10000;
   display: grid;
   place-items: center;
   background: var(--c-light);
   opacity: 0;
   pointer-events: none;
}

.menu.is-open {
   opacity: 1;
   pointer-events: auto;
}

.menu nav {
   display: flex;
   flex-direction: column;
   gap: 0.1em;
   text-align: center;
}

.menu a {
   color: #111;
   font-family: var(--ff-sans);
   font-size: clamp(3rem, 8vw, 8rem);
   font-weight: 500;
   letter-spacing: -0.06em;
   line-height: 0.9;
   text-transform: none;
   transition: opacity 0.25s ease;
}

.menu nav:has(a:hover) a:not(:hover) {
   opacity: 0.2;
}

.pixel-grid {
   position: fixed;
   inset: 0;
   z-index: 10002;
   overflow: hidden;
   pointer-events: none;
}

.pixel-block {
   position: absolute;
   background: #111;
   opacity: 0;
   will-change: opacity;
}

/* =====================================================
   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;
   /* Keep the full 2:3 portrait frame so the model's head and dress stay visible. */
   aspect-ratio: 2 / 3;
   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;
   }

}

/* =====================================================
   SCROLL WORKS
   ===================================================== */
.works {
   background: #fcfcfc;
   color: #141414;
}

.work-item,
.outro {
   position: relative;
   width: 100%;
   overflow: hidden;
}

.work-item {
   height: 150svh;
}

.work-item__image {
   position: absolute;
   width: 100%;
   height: 100%;
   clip-path: polygon(25% 25%, 75% 40%, 100% 100%, 0% 100%);
   will-change: clip-path;
}

.work-item__name {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 1;
   width: 100%;
   transform: translate(-50%, -50%);
}

.work-item__name h2 {
   color: #fff;
   font-family: var(--ff-sans);
   font-size: clamp(2.5rem, 8vw, 5rem);
   font-weight: 500;
   line-height: 1;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: -0.06em;
}

.outro h2 {
   color: #f5f2ec;
}

.work-item__name .char-mask {
   display: inline-block;
   overflow: hidden;
   vertical-align: top;
}

.work-item__name .char {
   display: inline-block;
   will-change: transform;
}

.outro {
   min-height: 100svh;
   padding: clamp(2rem, 5vw, 5rem) var(--pad) 1.5rem;
   background: #111;
}

.footer {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   color: #f5f2ec;
}

.footer__topline,
.footer__bottom {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   color: rgba(245, 242, 236, 0.58);
   font-family: var(--ff-mono);
   font-size: 0.68rem;
   letter-spacing: 0.07em;
   line-height: 1.3;
   text-transform: uppercase;
}

.footer__hero {
   padding: clamp(5rem, 12vh, 9rem) 0 clamp(5rem, 10vh, 8rem);
}

.footer__eyebrow,
.footer__label {
   color: rgba(245, 242, 236, 0.58);
   font-family: var(--ff-mono);
   font-size: 0.68rem;
   letter-spacing: 0.07em;
   text-transform: uppercase;
}

.footer__hero h2 {
   max-width: 10ch;
   margin: 1rem 0 2.5rem;
   color: #f5f2ec;
   font-family: var(--ff-sans);
   font-size: clamp(3rem, 9vw, 9rem);
   font-weight: 500;
   letter-spacing: -0.075em;
   line-height: 0.88;
   text-align: left;
   text-transform: none;
}

.footer__hero h2 em {
   color: #d7ff4f;
   font-style: normal;
}

.footer__cta {
   display: inline-flex;
   align-items: center;
   gap: 1rem;
   padding-bottom: 0.55rem;
   border-bottom: 1px solid rgba(245, 242, 236, 0.6);
   color: #f5f2ec;
   font-family: var(--ff-mono);
   font-size: 0.75rem;
   letter-spacing: 0.06em;
   transition: gap 250ms ease, color 250ms ease;
}

.footer__cta:hover {
   gap: 1.5rem;
   color: #d7ff4f;
}

.footer__grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: 2rem;
   padding: 1.25rem 0 2rem;
   border-top: 1px solid rgba(245, 242, 236, 0.22);
}

.footer__brand p {
   font-family: var(--ff-sans);
   font-size: 1.5rem;
   font-weight: 700;
   letter-spacing: -0.07em;
   line-height: 0.82;
   text-transform: uppercase;
}

.footer__brand span,
.footer__contact p {
   display: block;
   margin-top: 0.75rem;
   color: rgba(245, 242, 236, 0.58);
   font-family: var(--ff-mono);
   font-size: 0.68rem;
   line-height: 1.4;
}

.footer__links,
.footer__contact {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.55rem;
}

.footer__links a,
.footer__contact p {
   color: #f5f2ec;
}

.footer__links a:hover {
   color: #d7ff4f;
}

.footer__top {
   display: inline-flex;
   gap: 0.75rem;
   margin-top: auto;
   padding: 0;
   border: 0;
   background: transparent;
   color: rgba(245, 242, 236, 0.58);
   cursor: pointer;
   font-family: var(--ff-mono);
   font-size: 0.68rem;
   letter-spacing: 0.07em;
   text-transform: uppercase;
}

.footer__top:hover {
   color: #d7ff4f;
}

.footer__bottom {
   padding-top: 1rem;
   border-top: 1px solid rgba(245, 242, 236, 0.22);
}

@media (max-width: 700px) {
   .footer__topline span:last-child,
   .footer__bottom span:nth-child(2) {
      display: none;
   }

   .footer__grid {
      grid-template-columns: 1fr 1fr;
   }

   .footer__brand {
      grid-column: 1 / -1;
   }
}

@media (max-width: 1000px) {
   .work-item {
      height: 125svh;
   }
}