/* ==========================================================================
   A taller front-page hero — the cards only peek in

   Framer sized the hero by its content: 200px of padding above "Marcus
   Mosveen" (180px on tablets), and on a 1440x900 window that left the whole
   first row of project cards above the fold. The hero now fills the window
   instead, minus a sliver, so all that shows of the cards on arrival is
   their top edge — about a tenth of a card — as a hint that the page goes
   on.

   It is a min-height rather than a height, so a short window that cannot
   fit the heading and the intro line in that space simply grows the hero
   instead of clipping it (the hero is overflow:hidden). Framer's padding
   stays as the floor for the space above the name, and the extra room ends
   up there too: the hero is a flex column packed to the bottom
   (justify-content: flex-end), so the text keeps its place above the cards
   and the new whitespace opens up above it.

   svh, not vh: on a phone 100vh is the viewport with the browser's toolbar
   collapsed, which is taller than what is visible on first load, and the
   peek would sit behind the toolbar. The vh line is only for browsers
   without svh.

   The sum is: viewport - #main's top padding (24px, 16px on phones) - peek.
   The peek is 10% of the card, which is 352px tall at desktop width and
   360-362px below that, so 36px everywhere.
   ========================================================================== */

.framer-iuqqS .framer-1vm40ij {
  --hero-card-peek: 36px;
  min-height: calc(100vh - 24px - var(--hero-card-peek));
  min-height: calc(100svh - 24px - var(--hero-card-peek));
}

/* Framer gives the phone hero a fixed height:90vh, which has to go for the
   min-height to decide anything. */
@media (max-width: 809.98px) {
  .framer-iuqqS .framer-1vm40ij {
    height: auto;
    min-height: calc(100vh - 16px - var(--hero-card-peek));
    min-height: calc(100svh - 16px - var(--hero-card-peek));
  }
}

/* The name and the cards, with nothing between them.

   From the foot of the letters in "Marcus Mosveen" to the top of the cards
   is 80px. The hero's own 24px is part of that, and so is the bit of the
   name's line box that runs on under its baseline: 18px at the desktop size
   of 132px, 13px at the tablet size of 96px and about 8px on a phone. */
.framer-iuqqS .framer-1c2yxku {
  gap: 0;
  padding-bottom: 38px;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-iuqqS .framer-1c2yxku {
    padding-bottom: 43px;
  }
}

@media (max-width: 809.98px) {
  .framer-iuqqS .framer-1c2yxku {
    padding-bottom: 48px;
  }
}