/* Page heading — V0.1 What We Solve: eyebrow at y≈225, headline at y≈311, intro at y≈730 (page coords). */
.page-hero { padding-top: 113px; padding-bottom: var(--space-120); }
.page-hero__eyebrow { margin-bottom: 56px; }
.page-hero__headline { max-width: 13em; }
.page-hero__intro { margin-top: var(--space-80); }
.block--page-hero + .block { padding-top: 0; }
/* Eyebrow-only heading (Why Co.Si, Careers): the next module carries the headline. V0.1 Why: 101px eyebrow→heading. */
.page-hero__eyebrow:only-child { margin-bottom: 0; }
.page-hero:has(> .page-hero__eyebrow:only-child) { padding-bottom: 96px; }
.block--page-hero:has(+ .block--vibe-board) .page-hero { padding-bottom: 75px; } /* V0.1 Careers: eyebrow → board */

/* Size `hero` (Home): a tall white first screen, headline sitting low (V0.1: headline top y497, strip y870). */
.page-hero--hero {
  min-height: calc(100svh - var(--nav-height) - 28px); /* leaves a 28px peek of the strip's pre-roll: half the review's 56 (Nick, 2026-09-26) */
  align-content: end;
  padding-bottom: 75px; /* V0.1 */
}

.tag--eyebrow {
  min-height: 30px; padding: 0 17px var(--lift);
  font-size: var(--fs-label-md); letter-spacing: -0.06em;
  color: var(--ink-muted); border-color: currentColor;
}
.theme-dark .tag--eyebrow { color: var(--ink-primary); }
/* Phones: an eyebrow that links (an article's "News", a job's "Careers") gets a 44px tap
   area, taller than the 30px pill it draws (mobile pass, 2026-09-25). */
@media (max-width: 767px) {
  a.tag--eyebrow { position: relative; overflow: visible; }
  a.tag--eyebrow::after { content: ""; position: absolute; inset: -7px -4px; }
}

@media (max-width: 767px) {
  .page-hero { padding-top: var(--space-48); padding-bottom: var(--space-64); }
  .page-hero__eyebrow { margin-bottom: var(--space-32); }
  .page-hero__intro { margin-top: var(--space-40); }
  .page-hero:has(> .page-hero__eyebrow:only-child) { padding-bottom: var(--space-40); }
  .block--page-hero:has(+ .block--vibe-board) .page-hero { padding-bottom: var(--space-32); }
  .page-hero--hero { padding-bottom: var(--space-40); } /* min-height as desktop: svh is the view above the iOS toolbar */
  /* Home on phones (Tucker, 2026-09-25): the headline scales with the screen (three lines
     at 390–440; first "feels really small", then "slightly too big", so 7.5% under the
     fill-the-line size), and it sits three-quarters of the way down the free space. That
     halves the gap above the pre-roll peek compared with centring. */
  .page-hero--hero { grid-template-rows: 3fr auto 1fr; align-content: stretch; padding-bottom: var(--space-20); }
  .page-hero--hero .page-hero__headline { grid-row: 2; font-size: clamp(48px, 18.5vw, 81px); max-width: none; }

  /* The cover (mobile experience, 2026-09-30): every page opens the way Home does. The pill
     sits at the top, a screen of air, the headline low in the first screen, the intro after
     it. Only a page heading that has a headline, and only as the page's first module (a
     heading further down stays in the flow). Home keeps its own taller rule above. */
  main > :first-child .page-hero:has(> .page-hero__headline):not(.page-hero--hero) {
    grid-template-rows: auto 1fr auto auto;
  }
  /* The screen is measured by an empty item spanning the eyebrow, the air and the headline,
     not by the box: the headline's bottom edge lands at 58svh whatever follows it (an intro
     of any length sits below the line rather than pushing the headline up). The grid starts
     at the nav plus its own top padding. */
  main > :first-child .page-hero:has(> .page-hero__headline):not(.page-hero--hero)::before {
    content: ""; grid-row: 1 / 4; grid-column: full;
    min-height: calc(58svh - var(--nav-height) - var(--space-48));
  }
  main > :first-child .page-hero:has(> .page-hero__headline):not(.page-hero--hero) > .page-hero__eyebrow { grid-row: 1; }
  main > :first-child .page-hero:has(> .page-hero__headline):not(.page-hero--hero) > .page-hero__headline { grid-row: 3; }
  main > :first-child .page-hero:has(> .page-hero__headline):not(.page-hero--hero) > .page-hero__intro { grid-row: 4; }
  /* Hero headlines scale with the phone, as Tucker asked Home's to: 47px at 375, 54 at 430. */
  .page-hero__headline:is(.t-display-1, .t-display-2) { font-size: clamp(40px, 12.5vw, 56px); }
}