/* Home page only: a short overview — the brand, the ecosystem in a sentence, three ways in. */

.hero {
  position: relative; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .1) 100%),
    var(--black) url(/assets/img/particles-1280.webp) center / cover no-repeat;
}
@media (min-width: 1280px) {
  .hero { background-image:
    linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .1) 100%),
    url(/assets/img/particles-2400.webp); }
}
.hero .wrap { display: grid; gap: 28px; align-items: center; padding-top: 28px; padding-bottom: 40px; }

/* Her introduction and the mail-list button; the F.I.T in the menu bar is the page's only logo
   (the purple logo stays stored in assets/img/logo for later). The heading is for screen
   readers and search engines. */
.hero .lede { max-width: 46ch; }
.hero-more { margin-top: 14px; max-width: 54ch; color: var(--on-black-muted); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
/* Faye as a cut-out (background removed, no frame), as the hero has always had her */
.hero-photo { justify-self: center; width: min(58vw, 440px); }

.doors { display: grid; gap: 18px; }
.door { display: flex; flex-direction: column; }
.door .card-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.door .card-body p:not(.eyebrow) { margin-bottom: 18px; }
.door .btn { margin-top: auto; align-self: flex-start; }

/* "One space • Three ways in" stays on one line, even on a small phone */
.rule-title.one-line { white-space: nowrap; font-size: clamp(.85rem, 4.3vw, 1.9rem); letter-spacing: .08em; }

@media (max-width: 899px) {
  /* On a phone the opening line and the photo share the top row */
  .hero .wrap { grid-template-columns: 1fr 44%; column-gap: 18px; row-gap: 0; }
  .hero-copy { display: contents; }
  .hero .lede { grid-column: 1; grid-row: 1; align-self: center; font-size: 1.15rem; }
  .hero-photo {
    grid-column: 2; grid-row: 1; width: 100%; align-self: end;
    /* soften the crop line below her lower hand, leaving the hand itself clear */
    -webkit-mask-image: linear-gradient(to bottom, #000 96%, transparent);
    mask-image: linear-gradient(to bottom, #000 96%, transparent);
  }
  .hero-more, .hero .cta { grid-column: 1 / -1; }
  .hero-more { margin-top: 22px; }

  /* On a phone the three doors sit side by side and swipe, the next one peeking in,
     so the whole page is a couple of scrolls instead of a long stack. */
  .doors-section { padding-top: 40px; }
  .doors {
    grid-auto-flow: column; grid-auto-columns: 84%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px;
    scrollbar-width: none;
  }
  .doors::-webkit-scrollbar { display: none; }
  .door { scroll-snap-align: start; }
  .door img { aspect-ratio: 16 / 9; }
}

@media (min-width: 900px) {
  /* the cut-out stands on the bottom edge of the hero, like the original; it is scaled, in
     proportion, to the height of her words, from her opening line to just under the button,
     so the banner ends there (Faye, v2.17) */
  .hero .wrap { grid-template-columns: 1.45fr .55fr; gap: 36px; align-items: stretch; padding-top: 32px; padding-bottom: 0; }
  /* on desktop her words start just under the menu bar (Faye, v2.13), beside the photo */
  .hero-copy { align-self: start; padding: 0 0 28px; }
  /* with no logo above it, her opening line leads the banner */
  .hero .lede { font-size: clamp(1.35rem, 1.65vw, 1.6rem); line-height: 1.4; max-width: 50ch; color: var(--off-white); }
  .hero-more { max-width: 76ch; }
  .hero-photo { justify-self: center; align-self: end; height: 0; min-height: 100%; width: auto; max-width: 100%; margin-bottom: -1px; }
  /* "One space • Three ways in" and the cards' pictures and headings show on the opening
     screen (Faye, v2.17) */
  .doors { grid-template-columns: repeat(3, 1fr); }
  .doors-section { padding-top: 28px; }
  .doors-section .rule-title { padding: 10px 0; margin-bottom: 22px; }
  .door .card-body { padding-top: 18px; }
  .door img { aspect-ratio: 2 / 1; }
}