/* ═══════════════════════════════════════════════════════════
   Ukulele Buddha — User Guide styles
   Loads after site.css + journal.css. Built on journal.css's article
   pattern (.article-wrap, .breadcrumb, .art-eye/.art-title/.art-lede,
   .art-body, .art-callout, .art-table, .art-related) — guide pages reuse
   those classes directly. This file only adds what guide pages need
   beyond an article: a bigger, inline-capable screenshot figure
   (legibility matters here, these aren't decorative hero art), an
   in-page "on this page" jump nav, and a hub-grid thumbnail variant
   that shows a real screenshot instead of journal's SVG icon.
   ═══════════════════════════════════════════════════════════ */

/* ── On this page (jump nav) ─────────────────────────────
   Sits right after the lede, before the body starts. Not a sticky
   sidebar — guide pages stay single-column like journal articles. */
.guide-toc{margin:8px 0 48px;padding:20px 24px;background:var(--surface2);border:1px solid var(--border);border-radius:16px}
.guide-toc-eye{font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tm);margin-bottom:14px}
.guide-toc-links{display:flex;flex-wrap:wrap;gap:8px}
.guide-toc-links a{font-family:var(--fm);font-size:13px;color:var(--tb);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 14px;border-bottom:none}
.guide-toc-links a:hover{color:var(--ink);border-color:var(--border2)}

/* ── Guide screenshot figures ─────────────────────────────
   Bigger than journal's .art-thumb (150px, a decorative icon box) —
   these carry real instructional detail (chord grids, tab text,
   settings rows), so they need to actually be readable. Sits inline
   within .art-body at the point the copy references it, not forced
   into a single top-of-page hero the way journal articles do. */
.guide-figure{margin:8px 0 40px;display:flex;flex-direction:column;align-items:center;gap:14px}
.guide-shot{width:100%;max-width:360px;border-radius:28px;overflow:hidden;background:#0a0807;box-shadow:var(--shxl)}
.guide-shot img{width:100%;height:auto;display:block}
/* Landscape captures (Jam Performance Mode, iPad split view) — wider
   frame, smaller corner radius reads better on a horizontal image. */
.guide-shot.is-landscape{max-width:100%;border-radius:16px}
.guide-caption{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tm);text-align:center;max-width:46ch}

/* Two figures side by side on wide viewports — opt in per-instance. */
.guide-figure-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin:8px 0 40px}
.guide-figure-pair .guide-figure{margin:0}

/* ── Section tags (Known limitation / Coming soon) ────────
   A short inline label for a one-line flag inside a paragraph or
   figure caption — distinct from .art-callout's full-width box. */
.guide-tag{display:inline-block;font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ru);background:var(--glow);border-radius:6px;padding:3px 9px;margin-left:8px;vertical-align:middle}

/* ── Guide hub grid ────────────────────────────────────────
   Same shape as .jgrid/.jcard (journal.css) — reused verbatim on
   guide/index.html. One addition: journal's card art is a decorative
   inline SVG icon centered in a fixed-ratio box; the guide hub swaps
   in a real cropped screenshot instead (more informative for a
   product guide than an abstract icon). */
.jcard-art.has-shot{padding:0}
.guide-hub-thumb{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

@media(max-width:640px){
  .guide-figure-pair{grid-template-columns:1fr}
  .guide-toc{padding:16px 18px}
}