/* Clear display typography for the name and the words that lead the story. */
@font-face {
  font-family: 'Onest';
  src: url('assets/fonts/onest-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --display: 'Onest', system-ui, sans-serif;
}

:root h1,
:root h2 {
  min-width: 0;
  font-family: var(--display);
  font-weight: 600;
  font-kerning: normal;
  font-synthesis: none;
  letter-spacing: 0;
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.brand > span,
.site-header .brand > span {
  font-family: var(--display);
  font-size: 2.125rem;
  font-weight: 600;
  font-synthesis: none;
  line-height: 1.1;
  letter-spacing: 0;
}

.footer-brand > span {
  font-size: 2.25rem;
}

.brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: auto;
}

/* Controls and long reading keep their familiar, quiet voice. */
.desktop-nav,
.mobile-nav,
.footer-main nav,
.header-actions,
.story-progress a,
.footer-signoff,
button,
input,
textarea,
select,
label,
.pixel-button {
  font-family: var(--body);
}

.action-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.625rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -.01em;
  text-wrap: balance;
  white-space: normal;
}

.action-hero h1 > span {
  min-width: 0;
  text-wrap: balance;
}

.action-hero h1 em {
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0;
}

.story-heading,
.story-first .story-heading,
.story-action .story-heading,
.story-together .story-heading,
.story-final .story-heading,
.story-brand .story-heading,
.hook-title {
  min-width: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.story-heading .story-accent,
.story-together .story-heading > span {
  font-weight: 600;
}

.story-together .story-heading {
  line-height: 1.2;
}

.hook-title > span {
  white-space: normal;
}

.home-loop h2,
.home-planner h2,
.journal-feature h2,
.journal-page .page-hero h1,
.journal-entry h2,
.research-header h1,
.beta-page .beta-intro h1,
.launch-heading h2 {
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
}

.research-body h2,
.article-body h2 {
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.loop-note,
.day-caption,
.ali-letter cite,
.ali-signature span,
.action-town-tagline {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
}

.home-day-story > small.day-caption {
  font-family: var(--body);
}

@media (max-width: 860px) {
  .action-hero h1 {
    font-size: clamp(2.625rem, 6.5vw, 3.5rem);
  }
}

@media (max-width: 640px) {
  .site-header {
    gap: 12px;
  }

  .site-header .brand {
    gap: 8px;
  }

  .site-header .brand > span {
    font-size: 1.875rem;
  }

  .site-header .brand img {
    width: 32px;
    height: 32px;
  }

  .header-actions {
    gap: 8px;
    flex-shrink: 0;
  }

  .menu-toggle {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  .menu-toggle span {
    left: 8px;
    top: 13px;
  }

  .menu-toggle span + span {
    top: 21px;
  }

  .action-hero h1 {
    font-size: clamp(2.25rem, 7.3vw, 2.75rem);
    line-height: 1.13;
    letter-spacing: -.01em;
  }
}

@media (max-width: 370px) {
  .site-header {
    padding-inline: 16px;
    gap: 10px;
  }

  .site-header .brand {
    gap: 6px;
  }

  .site-header .brand > span {
    font-size: 1.625rem;
  }

  .site-header .brand img {
    width: 26px;
    height: 26px;
  }

  .story-skip {
    gap: 7px;
    padding-left: 0;
    font-size: .625rem;
    white-space: nowrap;
  }

  .story-skip span {
    display: inline;
    font-size: .75rem;
  }
}

/* The full mountain wordmark replaces the separate icon and text lockup. */
.brand img.brand-full-logo { width: 216px; height: 72px; max-width: none; object-fit: contain; }
.footer-brand img.brand-full-logo { width: 252px; height: 84px; }
@media (max-width: 640px) {
  .site-header .brand img.brand-full-logo { width: 168px; height: 56px; }
}
@media (max-width: 370px) {
  .site-header .brand img.brand-full-logo { width: 138px; height: 46px; }
}