/* ==========================================================================
   Home page (Figma: "Temporary Landing")
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   The nav overlaps the bottom of the header, then sticks on scroll.
   -------------------------------------------------------------------------- */

.hero {
  background: var(--color-surface);
}

.hero__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  height: var(--header-height);
  max-width: var(--page-max);
  margin: 0 auto;
  /* Bottom padding keeps the text clear of the nav bar */
  padding: 0 max(var(--gutter), min(var(--header-inset), 9.5vw)) var(--nav-height);
}

.hero__content {
  grid-column: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.hero__title {
  font-size: var(--text-display);
  font-weight: var(--weight-demibold);
  line-height: var(--leading-heading);
}

/* Pull the nav up so it sits over the bottom of the header */
.hero + .nav {
  margin-top: calc(var(--nav-height) * -1);
}

/* --------------------------------------------------------------------------
   Work grid
   -------------------------------------------------------------------------- */

.work {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  width: min(var(--content-max), 100% - var(--gutter) * 2);
  margin: var(--space-lg) auto 0;
  padding-bottom: var(--space-xl);
}

.notice {
  grid-column: 1 / -1;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.notice strong {
  font-weight: var(--weight-demibold);
}

.tile {
  aspect-ratio: var(--tile-ratio);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Small screens (not yet designed; sensible defaults)
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .hero__inner {
    height: auto;
    min-height: 320px;
  }

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

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