/* Type follows the brand hierarchy (till-brand.vercel.app, Typography): headline Semibold 60/64, section title
   Semibold 44/55, lead Regular 27/36, subhead Medium 25/28, body Regular 18/24, action Medium 18. All text in Ink. */
h1 { font-size: 60px; line-height: 64px; }
h2, .invitation h2, .faq-title { font-size: 44px; line-height: 55px; }
.hero-description { font-size: 18px; line-height: 24px; }
.manifesto { width: min(700px, calc(100% - 80px)); }
.manifesto-copy { font-size: 27px; line-height: 36px; font-weight: 400; }
.team-copy h3 { font-size: 25px; line-height: 28px; font-weight: 500; }
.team-copy p { margin-top: 20px; font-size: 18px; line-height: 24px; font-weight: 400; color: var(--ink); }
figcaption { font-size: 18px; line-height: 24px; }
.faq-title { margin-bottom: 40px; }
.faq-list { width: min(480px, 100%); }
.faq-item > summary { min-height: 56px; padding: 16px 20px; font-size: 18px; font-weight: 500; line-height: 24px; }
.faq-item > p { padding: 0 20px 20px; font-size: 18px; line-height: 24px; }

@media (max-width: 1100px) {
  h1 { font-size: 52px; line-height: 56px; }
  h2, .invitation h2, .faq-title { font-size: 38px; line-height: 48px; }
  .manifesto-copy { font-size: 25px; line-height: 34px; }
}
@media (max-width: 720px) {
  h1 { font-size: clamp(30px, 8vw, 44px); line-height: 1.1; }
  h2, .invitation h2, .faq-title { font-size: clamp(28px, 7vw, 34px); line-height: 1.25; }
  .manifesto-copy { font-size: 21px; line-height: 29px; }
  .team-copy h3 { font-size: 22px; line-height: 26px; }
  .team-copy p, .faq-item > p, .faq-item > summary { font-size: 16px; line-height: 22px; }
}

/* The questions follow the invitation and close the page. */
.faq { padding-block: 120px 160px; }

/* The footer mark is revealed as the page lifts off it. Sticky, not fixed, so it holds inside an embedding frame too. */
body { background: var(--paper); }
.footer-reveal { display: none; }
.footer-art { position: sticky; inset: auto auto 0; z-index: 0; }

/* The Till icon over "Till is a new kind of agent", in step with the smaller titles (its mark scales with it: size / 35). */
.story-app-icon { --app-icon-size: 84px; --app-icon-scale: 2.4; }