/* ════════════════════════════════════════════
   HOMEPAGE  index.css
   ════════════════════════════════════════════ */

/* ── HERO ── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  background: #0d0b08;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

#canvas {
  position: absolute;
  inset: 0;
  display: block;
  /* set by JS, but fallback: */
  width: 100%;
  height: 100%;
}

.hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gx);
  padding-bottom: 56px;
  /* headline full-width left, aside bottom-right */
  display: grid;
  grid-template-columns: 1fr 260px;
  grid-template-rows: auto;
  align-items: end;
  column-gap: 32px;
}

.hero__hl {
  font-family: var(--d);
  font-size: clamp(56px, 6.5vw, 88px);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .97;
  grid-column: 1 / -1; /* full width */
  margin-bottom: 40px;
  padding-right:20%;
}



.hero__aside {
  grid-column: 2;
  padding-bottom: 4px;
}

.hero__aside p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--white);

}

/* ════════════════════════════════════════════
   WORKS – async grid like studiohazey
   ════════════════════════════════════════════ */
.works {
  background: var(--paper);
  padding-top: 96px;
  padding-bottom: 80px;
}

.works__hd {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gx);
  margin-bottom: 72px;
}

.works__eyebrow {
  display:block; font-size:10px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-50); margin-bottom:12px;
}

.works__title {
  font-family:var(--d); font-size:clamp(28px,3.6vw,48px); color:var(--ink);
  text-transform:uppercase; letter-spacing:-.01em; line-height:1.0;
}

.works__title em { font-style:normal; color:var(--ink-50); }

/* ── PROJECT GRID (12-col, async offsets) ── */
.proj-grid {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gx);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 100px;
}

/* Each project card */
.proj {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding:10px;
  margin-bottom:64px
}

/* image wrapper */
.proj__img {
  display: block;
  overflow: hidden;
  position: relative;
  border-radius:8px;
}

.proj__img img,
.proj__img .ph {
  transition: transform .8s cubic-bezier(.16,1,.3,1);
  width: 100%;
  display: block;
}

.proj__img:hover img,
.proj__img:hover .ph { transform: scale(1.04); }

/* hover overlay */
.proj__img-over {
  position: absolute; inset: 0;
  background: rgba(14,13,11,.42);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s;
  display:none;
}
.proj__img:hover .proj__img-over { opacity: 1; }
.proj__img-over span {
  font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--white); border: 1px solid rgba(255,255,255,.5); padding: 9px 18px;
}

/* text below image */
.proj__info { display: flex; flex-direction: column; gap: 6px; }

.proj__name {
  font-family: var(--d);
  font-size: clamp(32px, 1.6vw, 24px);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 8px;
}
.proj__name a { transition: opacity .2s; }
.proj__name a:hover { opacity: 1; }

.proj__slug {
  font-size: 10px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-50);
  display:none !important;
}

.proj__desc { font-size: 13px; line-height: 1.75; color: var(--ink-50); }

/* ─────────────────────────────────────────────────────
   FORMAT SYSTEM %2Ex72
   Use ONE layout class + ONE (optional) offset class.

   LAYOUT (grid-column span):
   .f-wide    → cols 1–9  (9/12) – large feature
   .f-mid     → cols spanning 7  – medium
   .f-narrow  → cols spanning 5  – compact
   .f-half    → cols spanning 6  – half width
   .f-right   → positioned right side

   IMAGE RATIO (on the .proj__img or .ph):
   .r-land    → aspect-ratio 16/10  (landscape – default)
   .r-cinema  → aspect-ratio 21/9   (ultra-wide)
   .r-sq      → aspect-ratio 1/1    (square)
   .r-port    → aspect-ratio 3/4    (portrait)
   .r-tall    → aspect-ratio 2/3    (tall portrait)

   OFFSET (vertical shift for async feel):
   .o-up-sm   → margin-top: -40px
   .o-up-md   → margin-top: -80px
   .o-up-lg   → margin-top: -120px
   .o-down-sm → margin-top:  60px
   .o-down-md → margin-top:  120px

   EXAMPLES:
   <article class="proj f-wide">               ← large left
   <article class="proj f-narrow f-right">     ← small, pushed right
   <article class="proj f-mid o-up-sm">        ← medium, shifted up
───────────────────────────────────────────── */

/* Layout variants */
.f-wide    { grid-column: 1 / 10; }
.f-mid     { grid-column: 2 / 9;  }
.f-narrow  { grid-column: 3 / 8;  }
.f-half    { grid-column: 1 / 7;  }
.f-half-r  { grid-column: 7 / 13; }
.f-large-r { grid-column: 5 / 13; }
.f-mid-r   { grid-column: 6 / 12; }
.f-narrow-r{ grid-column: 7 / 12; }
.f-full    { grid-column: 1 / 13; }

/* Image aspect ratios – apply to .proj__img or .ph */
.r-land    { aspect-ratio: 16/10; }
.r-cinema  { aspect-ratio: 21/9;  }
.r-sq      { aspect-ratio: 1/1;   }
.r-port    { aspect-ratio: 3/4;   }
.r-tall    { aspect-ratio: 2/3;   }
.r-4-3     { aspect-ratio: 4/3;   }

/* Vertical offsets */
.o-up-sm   { margin-top: -40px;  }
.o-up-md   { margin-top: -80px;  }
.o-up-lg   { margin-top: -120px; }
.o-down-sm { margin-top:  60px;  }
.o-down-md { margin-top:  120px; }

/* ── CURRENT 10 PROJECT POSITIONS ── */
/* Feel free to mix format + ratio + offset classes as needed */

.proj--1  { grid-column: 1 / 10; margin-top: -40px; }                    /* wide left */
.proj--2  { grid-column: 7 / 13; margin-top: -40px; } /* right, offset up */
.proj--3  { grid-column: 2 / 7;  }                    /* mid left */
.proj--4  { grid-column: 6 / 13; margin-top: -60px; } /* right, offset up */
.proj--5  { grid-column: 1 / 11;  }                    /* mid-large left */
.proj--6  { grid-column: 6 / 11; margin-top: 40px; }  /* mid right, down */
.proj--7  { grid-column: 1 / 9; }                    /* centered */
.proj--8  { grid-column: 5 / 12; margin-top: -50px; } /* right, offset up */
.proj--9  { grid-column: 1 / 6;  margin-top: 30px; }  /* narrow left, down */
.proj--10 { grid-column: 2 / 13; margin-top: 50px; } /* large right, offset up */

/* more link – removed, projects shown directly */
.works__more {
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gx);
  padding-top: 48px;
  display: flex; align-items: center; justify-content: center;
}
.works__more .al { color: var(--ink-50); }


@media (min-width:1600px) {
  .hero__body {

  padding-bottom: 35vh;

}
}


/* ── MOBILE ── */
@media (max-width: 900px) {
  .hero__body { grid-template-columns: 1fr; padding-bottom: 56px;}
  .hero__aside { grid-column: 1; }

  .proj-grid { grid-template-columns: 1fr; row-gap: 52px; }

  .proj--1, .proj--2, .proj--3, .proj--4, .proj--5,
  .proj--6, .proj--7, .proj--8, .proj--9, .proj--10 {
    grid-column: 1;
    margin-top: 0;
  }

  /* on mobile all format classes collapse to full width */
  .f-wide, .f-mid, .f-narrow, .f-half, .f-half-r,
  .f-large-r, .f-mid-r, .f-narrow-r, .f-full {
    grid-column: 1;
  }

  .o-up-sm, .o-up-md, .o-up-lg,
  .o-down-sm, .o-down-md { margin-top: 0; }



}

@media (max-width: 500px) {
  #intro {
    display:none !important;  
  }


  .hero__hl {
  width:100%;
  padding-right:0;
  font-size: clamp(48px, 6.5vw, 64px);
  }
}