/* ==========================================================================
   Kit layout — documentation pages K01–K12, U01
   Sidebar (see components/kit-sidebar.css) + scrolling main column.

   <div class="kit-layout">
     <aside class="kit-sidebar">…</aside>
     <main class="kit-main">
       <header class="kit-page-header">…</header>
       <section class="kit-section">
         <div class="kit-section__head">…</div>
         …
       </section>
       <nav class="kit-pager">…</nav>
     </main>
   </div>
   ========================================================================== */

.kit-layout {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  background: var(--graphite-50);
}

.kit-main {
  --kit-main-gap: clamp(64px, 8vw, 112px);
  flex: 1 1 0;
  min-width: min(100%, 640px);
  box-sizing: border-box;
  padding: clamp(28px, 5vw, 80px) clamp(20px, 5vw, 80px) 120px;
  display: flex;
  flex-direction: column;
  gap: var(--kit-main-gap);
}
/* Denser rhythm used by the library pages (K07–K12) */
.kit-main--compact { --kit-main-gap: clamp(56px, 7vw, 96px); }

/* ── Page header ────────────────────────────────────────────────────────── */

.kit-page-header {
  max-width: 1120px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Section ────────────────────────────────────────────────────────────── */

.kit-section {
  max-width: 1120px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  scroll-margin-top: 24px;
}
.kit-section--loose { gap: 28px; }

/* Section head: "01.4  The principle, applied" + optional note on the right
   <div class="kit-section__head">
     <div class="kit-section__title-group">
       <span class="kit-section__index">01.4</span>
       <h2 class="kit-section__title">The principle, applied</h2>
     </div>
     <span class="kit-section__note">Optional note</span>
   </div> */
.kit-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-hairline);
}

.kit-section__title-group {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.kit-section__index {
  font: 500 12px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.kit-section__title {
  margin: 0;
  font: 500 var(--text-h2)/1.1 'Geist', sans-serif;
  letter-spacing: -.025em;
}

.kit-section__note {
  max-width: 420px;
  font: 400 14px/1.4 'Geist', sans-serif;
  color: var(--graphite-600);
}

/* ── Pager: "← Index" / "Next: K02 …" at the end of every kit page ─────── */

.kit-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 12px;
}
.kit-pager--flush { padding-top: 0; }