/* Landing introductions share the course's compact type and spacing.
   Split layouts add artwork without changing the heading scale. */
.landing-page {
  --page-intro-gap: 64px;
  padding-top: 0;
  max-width: 1120px;
  width: 100%;
  margin-inline: auto;
}
.landing-page > .page-intro { margin-bottom: var(--page-intro-gap); }
.landing-page:is(.blog-page, .play-page, .track-page) { row-gap: 0; }
.track-page > :not(.page-intro) + * { margin-top: clamp(36px, 5vw, 62px); }
.blog-page > .pagination { margin-top: 28px; }

.breadcrumbs {
  color: var(--studio-muted);
  font-size: .78rem;
  line-height: 1.5;
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; max-width: 100%; }
.breadcrumbs li + li::before { content: "/"; color: var(--studio-line); }
.breadcrumbs a, .breadcrumbs [aria-current] { display: inline-block; padding-block: 7px; overflow-wrap: anywhere; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--studio-purple); text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs [aria-current] { color: var(--studio-ink); }
.page-intro > .breadcrumbs { padding-top: 24px; }

.page-header { padding-top: 24px; }
.page-header--split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.page-header__copy, .page-header__aside { min-width: 0; }
.page-header__aside { align-self: center; padding: 0; }
.page-header--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.page-header--reverse .page-header__copy { grid-column: 2; grid-row: 1; }
.page-header--reverse .page-header__aside { grid-column: 1; grid-row: 1; }
.page-header .page-header__eyebrow { margin: 0; }
.page-header .page-header__title { max-width: 24ch; margin: 16px 0 20px; overflow-wrap: anywhere; }
.page-header__subtitle { display: block; max-width: 26ch; margin-top: 24px; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; line-height: 1.3; letter-spacing: -.035em; }
.page-header .page-header__lead { max-width: 47ch; margin: 0; line-height: 1.7; }
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.page-header__note { max-width: 61ch; margin: 12px 0 0; color: var(--studio-muted); font-size: .78rem; line-height: 1.75; }
.single-article > .breadcrumbs { padding-top: 10px; margin-bottom: 20px; }
.yg-page-head > .breadcrumbs { margin-bottom: 18px; }

@media (max-width: 900px) {
  .page-header--split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .page-header--split .page-header__copy { max-width: 640px; }
  .page-header--reverse .page-header__copy, .page-header--reverse .page-header__aside { grid-column: auto; grid-row: auto; }
  .page-header__aside { width: 100%; }
  .page-header__aside .book-hero-art { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 768px) {
  .landing-page { --page-intro-gap: 36px; }
  .page-intro > .breadcrumbs { padding-top: 12px; }
  .breadcrumbs { font-size: .75rem; }
  .page-header { padding-top: 20px; }
  .page-header__subtitle { margin-top: 20px; font-size: 1.5rem; }
  .page-header__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .page-header__actions .studio-button { width: 100%; }
  .single-article > .breadcrumbs { margin-bottom: 16px; }
}
/* The home page uses the same introduction without breadcrumb navigation. */
.page-header--split .page-header__title { max-width: none; }
.page-header--home { padding-top: 80px; }
.school-home .home-jump-nav { margin-top: calc(36px - clamp(60px, 8vw, 100px)); }
@media (max-width: 768px) {
  .page-header--home { padding-top: 64px; }
  .school-home .home-jump-nav { margin-top: -24px; }
}