/* Home page (article.home, front matter class: home): the Start here prose and
   the lesson list, ported from the old course draft's index page
   (course-design/index.html + style.css: .index-wrap.home, .home-intro,
   .post-list, .list-*), scoped to this site's shell. The old page put the prose
   in main.index-wrap.home > .home-intro; here the same elements are the
   article's direct children, so the scoping is article.home > p / ul. */

/* the old .index-wrap.home: max-width 36.375rem *including* its s-6 side padding,
   so 534px of text, room below the list */
article.home {
  max-width: 36.375rem;
  padding-inline: var(--s-6);
  padding-bottom: 160px;
}
/* below 1024px the shell's .content already pads 16px each side; 8px here makes
   the same 24px inset the old wrap had */
@media (max-width: 1023px) {
  article.home { padding-inline: 8px; }
}

/* the old .index-wrap.home .home-intro h1 */
article.home h1 {
  font-size: var(--text-h2);
  margin-bottom: var(--s-2);
}
/* the old .index-wrap.home .home-intro p, .home-intro li */
article.home > p,
article.home > ul {
  font-size: var(--text-ui);
  line-height: 1.45;
}

/* the old .post-list. the shell's article ul / li / p defaults don't apply on
   the old page (its list sat in main, not article), so they are reset here */
article.home .post-list { padding-top: var(--s-12); }
article.home .post-list ul { list-style: none; margin: 0; padding: 0; }
article.home .post-list li { margin: 0; }
article.home .list-title {
  margin: 0;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--gray-300);
  font-size: var(--text-ui);
  font-weight: var(--weight-normal);
  color: var(--gray-1000);
}
article.home .post-list > ul > li { border-bottom: 1px solid var(--gray-300); }
article.home .post-list > ul > li:last-child { border-bottom: none; }
article.home .post-list > ul > li > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 12px 0 12px 6.75rem; /* 12 + 20 + 12 = 44px row */
  font-size: var(--text-ui);
  line-height: 20px;
  text-decoration: none;
}
article.home .post-list > ul > li > ul > li > a:focus-visible { outline-offset: 0; }
@media (max-width: 520px) {
  article.home .post-list > ul > li > ul > li > a { padding-left: 4.5rem; }
}
article.home .post-list > ul > li > ul > li > a::after {
  content: "";
  position: absolute;
  left: 6.75rem; right: 0; bottom: 0;
  border-bottom: 1px solid var(--gray-300);
}
@media (max-width: 520px) {
  article.home .post-list > ul > li > ul > li > a::after { left: 4.5rem; }
}
article.home .post-list > ul > li > ul > li:last-child > a::after { display: none; }
article.home .list-name {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--gray-1200);
  transition: opacity 140ms ease;
}
article.home .list-group {
  position: absolute;
  left: 0;
  visibility: hidden;
  color: var(--gray-1000);
}
article.home .post-list > ul > li > ul > li:first-child > a .list-group { visibility: visible; }
article.home .list-num {
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--gray-1000);
  transition: opacity 140ms ease;
}
@media (hover: hover) and (min-width: 521px) {
  article.home .post-list > ul:hover .list-name,
  article.home .post-list > ul:hover .list-num { opacity: 0.3; }
  article.home .post-list > ul:hover a:hover .list-name,
  article.home .post-list > ul:hover a:hover .list-num,
  article.home .post-list > ul:hover a:focus-visible .list-name,
  article.home .post-list > ul:hover a:focus-visible .list-num { opacity: 1; }
}

/* the home page has no ## sections, so the "On this page" column would be an
   empty box from 1536px; hide it */
.layout:has(article.home) .toc { display: none; }