/* ===== Lab1 — HOME hero ====================================================
   One thin Neue Montreal statement hung on the logo's edge (--shell-inset
   on desktop, --gutter on mobile — the same insets the header uses), with
   "aesthetics" lifted in Light Italic, then the centred "Explore our work"
   hand-off. Chosen 2026-10-30 from the home-alt3/4/5 sandboxes (alt 5
   won; an underline under the italic was tried and dropped — it read as
   a link), then resized the same day from index-alt7 (75px, full measure,
   "A product design studio…"). Loaded only by index.html, on top of styles.css.
   ========================================================================= */

@font-face {
  font-family: "Neue Montreal";
  src: url("../fonts/neue-montreal/PPNeueMontreal-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

.manifesto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: var(--space-hero) 0 0;
  padding: 0 var(--shell-inset);          /* left edge = the Lab1 logo */
  text-align: left;
}

/* ---- Headline ----------------------------------------------------------- */
.manifesto-heading {
  margin: 0;
  font-family: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(40px, 5.2vw, 75px);    /* 75px from ~1440 up (alt 7: between 90px and Plastic's 60px) */
  line-height: 1.03;                      /* room for g/p under h/k/l */
  letter-spacing: -0.0175em;
  text-wrap: pretty;                      /* fill the measure; balance would pull it back into a narrow block */
}

/* ---- Hand-off to the work --------------------------------------------- */
.manifesto-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-self: center;                     /* headline hangs left, the cue stays centred */
  gap: 0.9rem;
  margin: clamp(5rem, 8vw, 8rem) 0 0;
  color: var(--fg);
  font-size: 1.0625rem;                   /* same type as the nav links */
  font-weight: 400;
  letter-spacing: 0.005em;
  text-decoration: none;
}

.manifesto-cue .scroll-icon {
  width: 17px;
  height: auto;
  animation: cue-bob 2.4s ease-in-out infinite;   /* same bob as .scroll-cue */
}

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto-cue .scroll-icon { animation: none; }
}

.home .gallery {
  margin-top: clamp(4rem, 6vw, 6.5rem);
  scroll-margin-top: 2rem;
}

/* ---- Tablet / mobile --------------------------------------------------- */
@media (max-width: 820px) {
  .manifesto {
    margin-top: 12vw;
    padding: 0 var(--gutter);             /* the mobile header's inset */
  }

  .manifesto-heading {
    font-size: clamp(34px, 10.5vw, 72px);  /* ~41px on a 390 phone (was 8.6vw ≈ 34px) */
    line-height: 1.04;
  }

  .manifesto-cue {
    margin-top: 14vw;
  }

  .home .gallery {
    margin-top: 12vw;
  }
}


@font-face {
  font-family: "Neue Montreal";
  src: url("../fonts/neue-montreal/PPNeueMontreal-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

.manifesto-heading em {
  font-style: italic;
}