/* Lucy English: landing page (#/) and sign-in page layout. */

.site { max-width: calc(960px + 2 * var(--gutter)); padding: 0 var(--gutter); }

.site-bar .bar-nav { margin-left: 8px; }

.hero { padding: 48px 0; border-bottom: 1px solid var(--rule); }
.hero > * + * { margin-top: 12px; }
.hero .btn { margin-top: 24px; }
.lead { font-size: 18px; line-height: 28px; max-width: 640px; }

.site-section { padding: 48px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 8px; }
.site-section:last-child { border-bottom: 0; }
.site-section > h2 + * { margin-top: 16px; }
.prose { max-width: 640px; }

/* Course table: columns are programs, rows are facts. */
.programs-table { table-layout: fixed; }
.programs-table thead th:first-child { width: 140px; }
.programs-table thead th { color: var(--ink); font-size: 16px; }
.programs-table tbody th { font-size: 14px; font-weight: 400; color: var(--muted); }
.programs-stack { display: none; }
.program + .program { margin-top: 24px; }
.program dl { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; margin-top: 8px; }
.program dt { font-size: 14px; color: var(--muted); }

.contact-links { display: flex; gap: 16px; margin-top: 24px; }

.site-foot {
  max-width: calc(960px + 2 * var(--gutter));
  padding: 24px var(--gutter) 32px;
  border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--muted);
}

/* Sign-in page */
.page.auth { max-width: calc(420px + 2 * var(--gutter)); }
.auth .form { margin-top: 24px; }
.auth-switch { font-size: 14px; }

@media (max-width: 639px) {
  .site-bar .bar-nav { margin-left: 0; }
  .hero { padding: 32px 0; }
  .site-section { padding: 32px 0; }
  .programs-table { display: none; }
  .programs-stack { display: block; }
}