/* Hero v2: a left-aligned sentence just under the nav, with the lede beneath it.
   Headline is 1.5x the "What I've been making" heading; the lede is 1.5x its section subtitle. */
.hero-v2 {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(28px, 4.5vw, 56px) 0 0;
}
.hero-v2-inner {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.hero-v2-headline {
  margin: 0;
  font-size: calc(var(--fs-h2) * 1.5);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}
.hero-v2-grad { color: inherit; }
.hero-v2-closing { display: block; margin-top: clamp(20px, 3vh, 32px); color: var(--amber-500); }
:root[data-theme="light"] .hero-v2-closing { color: var(--fg-2); }
.hero-v2-lede {
  margin: clamp(20px, 3vh, 32px) 0 0;
  font-size: calc(16px * 1.5);
  line-height: 1.5;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* The gap between the hero and "What I've been making" is 50% larger than a standard section gap. */
#work { padding-top: calc(clamp(28px, 4.5vw, 56px) * 1.5) !important; }

/* Phones: a tighter, heavier headline and a lede sized for reading rather than display. */
@media (max-width: 560px) {
  .hero-v2-headline { font-size: clamp(34px, 9.8vw, 44px); line-height: 1.08; letter-spacing: -0.025em; }
  .hero-v2-lede { margin-top: 20px; font-size: 18px; line-height: 1.55; }
}

.hero-v2-nowrap { white-space: nowrap; }
@media (max-width: 560px) {
  .hero-v2-based { display: none; }
  .hero-v2-br { display: none; }
  .hero-v2-hello { display: block; margin-bottom: 20px; }
  .hero-v2-name { display: block; }
  .hero-v2-closing { margin-top: 20px; }
}

/* The work section has a larger top gap, so its anchor clears that extra space too. */
#work { scroll-margin-top: calc(98px - clamp(28px, 4.5vw, 56px) * 1.5); }