/* Home landing — scattered intro copy, viewport-wide wordmark,
   portrait overlapping the word, menu block bottom-right. */

.landing {
  --landing-ink: var(--color-accent);
  /* Tuned so "AAYUSHI" in Inter Black spans the full viewport width. */
  --word-size: 22.5vw;
  --word-lh: 0.8;
  --word-h: calc(var(--word-size) * var(--word-lh));

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(1.25rem, 2vw, 2rem) var(--space-gutter);
  background: var(--color-bg-primary);
  color: var(--landing-ink);
  font-family: var(--font-sans);
}

.landing[hidden] {
  display: none;
}

.landing-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.landing a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-mid) var(--ease-out);
}

.landing a:hover {
  color: var(--color-text-primary);
}


/* ── Scattered intro copy ───────────────────────────────────── */

.landing-scatter {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: 0.5rem;
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-scatter span {
  grid-column: var(--col) / span 6;
  grid-row: var(--row);
  white-space: nowrap;
}

.landing-scatter .is-end {
  grid-column: 19 / -1;
  justify-self: end;
  text-align: right;
}


/* ── Stage: wordmark, portrait, caption, menu ───────────────── */

.landing-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: calc(var(--word-h) + 14rem);
  margin-top: clamp(1rem, 2.5vw, 2.5rem);
}

.landing-word {
  /* Bleeds past the gutters so the word reads edge to edge. */
  margin: 0 calc(-1 * var(--space-gutter) + 0.5vw);
  font-size: var(--word-size);
  font-weight: var(--fw-black);
  line-height: var(--word-lh);
  letter-spacing: -0.065em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--landing-ink);
  /* Negative tracking trails the last glyph; shift by half to centre the ink. */
  transform: translateX(-0.0325em);
}

.landing-image {
  position: absolute;
  top: calc(var(--word-h) * 0.42);
  bottom: 0;
  left: 24.5%;
  z-index: 1;
  aspect-ratio: 0.74;
  margin: 0;
  overflow: hidden;
  background: var(--color-bg-secondary);
}

.landing-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.landing-caption {
  position: absolute;
  top: calc(var(--word-h) + clamp(2rem, 5vh, 4rem));
  left: 6%;
  max-width: 16%;
  margin: 0;
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-meta {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: clamp(2.5rem, 5vw, 5rem);
  row-gap: clamp(1.25rem, 2.5vh, 2rem);
  margin: 0;
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-meta dt,
.landing-meta dd {
  margin: 0;
}

.landing-nav {
  display: flex;
  flex-direction: column;
}


/* ── Corner nav: hidden over the landing, slides in from each corner ── */

.corner-nav.nav--landing .nav-item {
  pointer-events: none;
}

.corner-nav.nav--landing .nav--tl {
  transform: translate(calc(-100% - var(--nav-pad) - 1rem), calc(-100% - var(--nav-pad) - 1rem));
}

.corner-nav.nav--landing .nav--tr {
  transform: translate(calc(100% + var(--nav-pad) + 1rem), calc(-100% - var(--nav-pad) - 1rem));
}

.corner-nav.nav--landing .nav--bl {
  transform: translate(calc(-100% - var(--nav-pad) - 1rem), calc(100% + var(--nav-pad) + 1rem));
}

.corner-nav.nav--landing .nav--br {
  transform: translate(calc(100% + var(--nav-pad) + 1rem), calc(100% + var(--nav-pad) + 1rem));
}

.corner-nav.nav--landing .nav--tc {
  pointer-events: none;
  transform: translate(-50%, calc(-100% - var(--nav-pad) - 1rem));
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* Phone: intro as two columns, word, portrait, then caption + menu. */
@media (max-width: 767px) {
  .landing-scatter {
    display: block;
    max-width: 22rem;
  }

  .landing-scatter span,
  .landing-scatter .is-end {
    white-space: normal;
  }

  .landing-scatter span::after {
    content: " ";
  }

  .landing-stage {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .landing-image {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    align-self: center;
    width: min(78%, 22rem);
    margin-top: calc(var(--word-h) * -0.15);
  }

  .landing-caption,
  .landing-meta {
    position: static;
    max-width: none;
    margin-top: 2rem;
  }

  .landing-meta {
    align-self: flex-end;
  }
}