/*
 * Landing-page styling layered on shared/style.css. The landing page serves two
 * audiences at once: people who already use Classroom J and want the Student or
 * Admin button, and strangers arriving from a link who need to know what this is
 * before they click anything. Everything here is prose layout for the second
 * group; the surface buttons reuse the shared .card/.button primitives unchanged.
 */

/* Body copy inside the explanatory cards. The shared stylesheet styles headings,
   cards and buttons, but the landing page is the only surface with paragraphs of
   prose, so the readable measure and paragraph rhythm live here. */
.page > .card p {
  margin: 0 0 var(--space-3);
  max-width: 68ch;
}

.page > .card p:last-child {
  margin-bottom: 0;
}

/* The one-line handoff between the problem statement and the answer to it. */
.home__lead {
  font-weight: 600;
}

.home__list {
  margin: 0;
  padding-left: var(--space-5);
  max-width: 68ch;
}

.home__list li {
  margin-bottom: var(--space-2);
}

.home__list li:last-child {
  margin-bottom: 0;
}

/* The deliberate scope limits (no autograding, no grade passback). Set apart so a
   reader deciding whether this fits their course cannot miss it, and muted rather
   than alarming because it is a scope statement, not a warning. */
.home__caveat {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
  color: var(--colour-text-muted);
  font-size: 0.95rem;
}

/* Secondary note under a row of buttons. */
.home__hint {
  margin-top: var(--space-3);
}

.home__footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--colour-border);
}

/* Long-form article (/why). The rest of the site is short cards and controls;
   this is the one page that is genuinely an essay, so it needs a slightly larger
   type size and looser leading than the UI surfaces to stay readable at length. */
.prose {
  font-size: 1.05rem;
  line-height: 1.65;
}

.prose p {
  margin: 0 0 var(--space-4);
  max-width: 66ch;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
}

.prose__heading {
  margin: var(--space-6) 0 var(--space-3);
  font-size: 1.2rem;
  max-width: 66ch;
}

/* The single question the essay wants a reader to carry away. Set apart so it
   survives skim-reading, which is how most people will arrive here from a link. */
.prose__pull {
  padding-left: var(--space-4);
  border-left: 3px solid var(--colour-accent);
  font-weight: 600;
}