/* Guide pages: one readable column on the landing page's tokens and type.
   Loaded after styles.css, which supplies the nav, buttons and colours. */
.guide { padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(56px, 8vw, 104px); }
.guide article { max-width: 68ch; margin-inline: auto; }
.guide h1 { margin-top: 10px; }
.guide-lede { max-width: none; margin-top: 18px; }
.guide-crumbs { font-size: 14px; color: var(--ink-2); }

.guide-body { margin-top: 36px; display: grid; gap: 16px; color: var(--ink-2); }
.guide-body h2 { color: var(--ink); margin-top: 22px; }
.guide-body ul, .guide-body ol { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 10px; }
.guide-body strong { color: var(--ink); font-weight: 650; }
.guide-example {
  padding: 16px 18px; border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink); font-variant-numeric: tabular-nums;
}

.guide-cta {
  margin-top: 48px; padding: clamp(22px, 4vw, 32px); border-radius: var(--radius);
  background: var(--block); color: var(--on-block); display: grid; gap: 12px; justify-items: start;
}
.guide-cta p:not(.h3) { color: var(--on-block-2); }

.guide-more { margin-top: 40px; }
.guide-more ul, .guide-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.guide-list { margin-top: 32px; gap: 12px; }
.guide-list a {
  display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none;
}
.guide-desc { color: var(--ink-2); font-size: 15px; }
@media (hover: hover) { .guide-list a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }

.guide-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  max-width: calc(68ch + 2 * var(--gutter)); margin-inline: auto;
  padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2);
}
.guide-foot nav { display: flex; gap: 18px; }
.caption { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); text-transform: uppercase; }