/* =========================================================================
   ML for kids — series index
   ========================================================================= */

/* ---------- page tuning -------------------------------------------------
   Values this page sets differently from css/mlfk.css, plus everything only
   this page uses. Kept explicit rather than folded into the shared file so no
   other page shifts by a pixel.
   --------------------------------------------------------------------- */
  .page { row-gap: clamp(2.6rem,6vw,4.2rem); }
  .band { padding: clamp(1.9rem,4.5vw,3rem) 0; }
  h1 { font-size: clamp(2.1rem,5.8vw,3.4rem); margin: 1.1rem 0 0; max-width: 17ch; }
  .lede { margin-top: 1.2rem; }
  .whofor { margin-top: 1.4rem; }
  strong { font-weight: 600; color: inherit; }
  .sec { column-gap: 2.4rem; }
  .step { padding-top: 0.55rem; font-size: 0.64rem; letter-spacing: 0.2em; color: var(--info); }
  .entry {
    display: grid;
    grid-template-columns: 8.5rem minmax(0,1fr);
    column-gap: 2.4rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-subtle);
    text-decoration: none;
    color: inherit;
  }
  a.entry:hover .entryTitle { color: var(--gold); }
  a.entry:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
@media (max-width:840px) {
    .sec, .entry { grid-template-columns: 1fr; }
    .sec > *, .step, .entry > * { grid-column: 1; }
}
  .btn { font-size: 0.73rem; padding: 0.38rem 0.9rem; }
  .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .note { border-left: 2px solid var(--gold); margin: 1.4rem 0 0; font-size: 0.94rem; }
  .bigline { max-width: 30ch; }
  footer { font-size: 0.78rem; border-top: 1px solid var(--border-subtle); padding-top: 1.4rem; }
  footer a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-border);
  }


  /* Every entry now sits in its own <li>, so :first-of-type would match all
     of them. Target the first row of each list instead. */
  .entries > li:first-child > .entry,
  .entries > li.entry:first-child { border-top: 0; padding-top: 0.4rem; }
  li.entry { list-style: none; }

  /* "Ideas for what comes next" is structurally a section heading — the
     planned list had none, which left a hole in the document outline — but
     the design has always rendered it as a lede. Keep the <h2> and undo the
     heading typography so nothing moves. */
  h2.lede {
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.66;
    letter-spacing: normal;
    margin: 0 0 1rem;
  }