/* PK2 AI Advisors · home page
   Layout only. This sheet places the six sections of the home page and nothing
   else. Every colour, size, and spacing value resolves through tokens.css, and
   every component on the page (buttons, labels, the week grid, the card frame,
   the two grounds) comes from site.css and week-grid.css unchanged.

   Load order: tokens.css, site.css, week-grid.css, home.css.

   No hex value appears in this file. No raw pixel value appears for anything
   tokens.css already carries.
*/

/* ---------------------------------------------------------------- 1 hero -- */

/* The hero opens tighter than a mid-page section: the sticky header is already
   a band of air above it. It keeps the full section bottom, so the problem
   section still reads as a new thought. */
.hero {
  padding-top: var(--space-7);
  padding-bottom: var(--section-bottom);
}

.hero-layout {
  row-gap: var(--space-7);
  align-items: start;
}

.hero-copy   { grid-column: span 6; }
.hero-figure { grid-column: span 6; }

.hero-copy > .label + h1 { margin-top: var(--space-3); }

/* The week grid's caption carries the same framing pair the assessment
   worklist opens with: mono eyebrow, then the line that names what the grid is
   showing. That pair stacks, where the component's default head runs as a
   single mono row, so this one page turns the caption back into a block. The
   hairline under it, and everything below it, is the component unchanged. */
.hero-figure .week-grid-head {
  display: block;
  padding-bottom: var(--space-3);
}

.hero-sub {
  margin-top: var(--space-4);
  max-width: var(--measure);
  color: var(--text);
}

.hero-action { margin-top: var(--space-5); }
.hero-micro  { margin-top: var(--space-3); }

/* The scroll indicator. A hairline and nothing else: the week grid is the only
   illustration on this page and this must not read as a second one. */
.hero-scroll { margin-top: var(--space-7); }

.hero-scroll-rule {
  display: block;
  width: var(--hair);
  height: var(--space-6);
  background: var(--hairline);
}

/* On the widths where the page is scrolled with a thumb, the indicator has no
   job to do. */
@media (max-width: 640px) {
  .hero { padding-top: var(--space-6); }
  .hero-scroll { display: none; }
}

/* ----------------------------------------------------------- 2 problem -- */

.problem-layout {
  margin-top: var(--space-6);
  row-gap: var(--space-6);
}

.problem-body { grid-column: 1 / span 7; }

/* The stat block is a right rail: mono, hairlined off the body, quiet. */
.stat-rail {
  grid-column: 9 / span 4;
  padding-left: var(--space-4);
  border-left: var(--hair) solid var(--hairline);
}

.stat-rail-figure { color: var(--text); }

.stat-rail-source {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--hairline);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-label);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Mono has no italic in the loaded set, so the attribution takes the roman and
   earns its separation from the rule above it instead. */
.stat-rail-source cite { font-style: normal; }

/* --------------------------------------------------------------- 3 fit -- */

.fit-layout {
  margin-top: var(--space-6);
  row-gap: var(--space-6);
}

.fit-column { grid-column: span 6; }

.fit-list {
  margin-top: var(--space-3);
  list-style: none;
}

/* Ruled, not bulleted: the same hairline family as the week grid. */
.fit-list li {
  padding: var(--space-3) 0;
  border-top: var(--hair) solid var(--hairline);
  font-size: var(--size-body);
  line-height: 1.55;
}

.fit-list li:last-child {
  border-bottom: var(--hair) solid var(--hairline);
}

/* ------------------------------------------------------------- 4 proof -- */

/* The card frame from week-grid.css, held to the reading column so the case
   study does not run wider than the prose above and below it. */
.proof-card {
  max-width: calc(var(--measure) + var(--space-4) + var(--space-4));
}

.proof-body > * + * { margin-top: var(--space-3); }

/* ------------------------------------------------------------ 5 why me -- */

.whyme-body { margin-top: var(--space-5); }

.whyme-attribution {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--hairline);
  max-width: var(--measure);
  color: var(--ink);
}

.whyme-link { margin-top: var(--space-4); }

/* ------------------------------------------------------------ 6 the door -- */

.door-body   { margin-top: var(--space-4); }
.door-action { margin-top: var(--space-5); }
.door-micro  { margin-top: var(--space-3); }

/* --------------------------------------------------------------- narrow -- */

/* At 1024 the shared grid drops to eight columns. The hero and the fit columns
   stack; the stat rail sits beside a narrower body until 640, where site.css
   collapses the grid to one column and the rail becomes a band under the copy. */
@media (max-width: 1024px) {
  .hero-copy,
  .hero-figure { grid-column: span 8; }

  .problem-body { grid-column: 1 / span 5; }
  .stat-rail    { grid-column: 6 / span 3; }

  .fit-column { grid-column: span 4; }
}

@media (max-width: 640px) {
  .stat-rail {
    padding-left: 0;
    padding-top: var(--space-4);
    border-left: 0;
    border-top: var(--hair) solid var(--hairline);
  }
}