/* Stage One mobile typography only.
   Preserve ALL existing desktop display fonts, sizes and spacing. */
@media screen and (max-width: 600px) {
  /* A heavyweight, non-condensed face with normal glyph spacing prevents the
     desktop's very tight Arial Black / Impact tracking from colliding on iOS. */
  .editorial-header .education-head h2,
  .editorial-header .education-item h3,
  .editorial-header .iceworks-story h2,
  .editorial-header .iceworks-story-grid h3,
  .editorial-header .numbers-intro h2,
  .editorial-header .hero-story-aside h3,
  .stage-one-numbers #numberTitle,
  .stage-one-territory #stageTerritoryTitle,
  .stage-one-journey #journeyTitle,
  .stage-one-journey .journey-step h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-stretch: normal;
    font-weight: 850;
    letter-spacing: -0.035em;
    line-height: 1.12;
    overflow-wrap: normal;
    word-break: normal;
  }
  /* Keep the large section headings editorial, but legible at phone widths. */
  .editorial-header .education-head h2,
  .editorial-header .iceworks-story h2,
  .editorial-header .numbers-intro h2 {
    font-size: clamp(32px, 8.6vw, 45px);
    line-height: 1.12;
  }
  .stage-one-numbers #numberTitle,
  .stage-one-territory #stageTerritoryTitle,
  .stage-one-journey #journeyTitle {
    font-size: clamp(35px, 9vw, 48px);
    line-height: 1.09;
    letter-spacing: -0.042em;
  }
  .editorial-header .education-item h3,
  .editorial-header .iceworks-story-grid h3,
  .editorial-header .hero-story-aside h3,
  .stage-one-journey .journey-step h3 {
    font-size: clamp(18px, 5vw, 23px);
    letter-spacing: -0.022em;
    line-height: 1.2;
  }
  /* Preserve the deliberately contrasting serif wordmark in the business-model
     heading, and the original display treatment of "What is Iceworks?". */
  .editorial-header .iceworks-story h2 em,
  .editorial-header .numbers-intro h2 em {
    font-family: var(--ice-serif);
    font-weight: 400;
    letter-spacing: -0.035em;
  }

  /* HEY / JEFF should be the hero: large, stacked, fully separated glyphs.
     Use the same mobile-safe face rather than shrinking it down to body text. */
  #heroMasthead {
    line-height: 1;
    margin-bottom: 35px;
  }
  #heroMasthead .masthead-first,
  #heroMasthead .masthead-second {
    font-family: -apple-system, BlinkMacSystemFont, "Arial Black", Arial, sans-serif;
    font-weight: 900;
    font-stretch: normal;
    letter-spacing: -0.065em;
    line-height: 0.98;
    white-space: nowrap;
    max-width: 100%;
  }
  #heroMasthead .masthead-first {
    font-size: clamp(66px, 19vw, 88px);
  }
  #heroMasthead .masthead-second {
    font-size: clamp(72px, 21vw, 96px);
  }
  /* Avoid a long personalized name forcing horizontal page overflow. */
  #heroMasthead.long-person-name .masthead-second {
    font-size: clamp(37px, 10.2vw, 54px);
    letter-spacing: -0.045em;
  }
}


/* iPad mini / tablet portrait and landscape: use the same legible typography
   strategy as iPhone, but preserve a larger editorial scale for tablet space.
   At widths above 1024px, all original desktop styling remains untouched. */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .editorial-header .education-head h2,
  .editorial-header .education-item h3,
  .editorial-header .iceworks-story h2,
  .editorial-header .iceworks-story-grid h3,
  .editorial-header .numbers-intro h2,
  .editorial-header .hero-story-aside h3,
  .stage-one-numbers #numberTitle,
  .stage-one-territory #stageTerritoryTitle,
  .stage-one-journey #journeyTitle,
  .stage-one-journey .journey-step h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-stretch: normal;
    font-weight: 850;
    letter-spacing: -0.03em;
    line-height: 1.15;
    overflow-wrap: normal;
    word-break: normal;
  }
  .editorial-header .education-head h2,
  .editorial-header .iceworks-story h2,
  .editorial-header .numbers-intro h2 {
    font-size: clamp(39px, 6.6vw, 62px);
  }
  .stage-one-numbers #numberTitle,
  .stage-one-territory #stageTerritoryTitle,
  .stage-one-journey #journeyTitle {
    font-size: clamp(40px, 6.8vw, 66px);
    letter-spacing: -0.035em;
    line-height: 1.12;
  }
  .editorial-header .education-item h3,
  .editorial-header .iceworks-story-grid h3,
  .editorial-header .hero-story-aside h3,
  .stage-one-journey .journey-step h3 {
    font-size: clamp(21px, 2.7vw, 28px);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  /* Keep the intentionally contrasting serif subheading. */
  .editorial-header .iceworks-story h2 em,
  .editorial-header .numbers-intro h2 em {
    font-family: var(--ice-serif);
    font-weight: 400;
    letter-spacing: -0.035em;
  }
  /* Hero remains big and stacked, without the overlap caused by .77 line height. */
  #heroMasthead {
    line-height: 1;
    margin-bottom: 38px;
  }
  #heroMasthead .masthead-first,
  #heroMasthead .masthead-second {
    font-family: -apple-system, BlinkMacSystemFont, "Arial Black", Arial, sans-serif;
    font-weight: 900;
    font-stretch: normal;
    letter-spacing: -0.065em;
    line-height: 0.98;
    white-space: nowrap;
    max-width: 100%;
  }
  #heroMasthead .masthead-first {
    font-size: clamp(94px, 15.3vw, 150px);
  }
  #heroMasthead .masthead-second {
    font-size: clamp(102px, 16.3vw, 162px);
  }
  #heroMasthead.long-person-name .masthead-second {
    font-size: clamp(48px, 8vw, 83px);
    letter-spacing: -0.045em;
  }
}