/* playbook/playbook.css — shared long-form prose layer for the AI PM Playbook issues.
   Reuses lab2/styles.css tokens and classes (.page-head, .article, .article-main, blockquote,
   .eyebrow, .btn, .card-link) as the base; this file only adds what that sheet doesn't have yet:
   figure/figcaption treatment, inline code, tight "beat" paragraph rhythm, and the landing-page
   issue-card grid. Referenced by all four playbook pages (index + 3 issues), never duplicated. */

.playbook-body { max-width: var(--measure); margin: 0 auto; }

.playbook-body p.beat { margin-bottom: 6px; }
.playbook-body p.beat + p:not(.beat) { margin-top: 24px; }

.playbook-body code {
  font-family: var(--mono); font-size: 0.85em;
  background: var(--paper-card); border: 1px solid var(--hairline);
  border-radius: 4px; padding: 1px 6px; color: var(--ink);
}

.playbook-body figure { margin: 40px 0; }
.playbook-body figure .frame {
  border: 2px solid var(--ink); border-radius: 8px; overflow: hidden;
  background: var(--paper-card); box-shadow: 4px 4px 0 var(--ink);
}
.playbook-body figure svg { display: block; width: 100%; height: auto; }
.playbook-body figcaption {
  margin-top: 10px; text-align: center;
  font-family: var(--mono); font-size: calc(12px * var(--s));
  letter-spacing: 0.04em; color: var(--muted); line-height: 1.5;
}

.playbook-meta {
  font-family: var(--mono); font-size: calc(12px * var(--s));
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 8px;
}

/* landing page: three issue cards, built on .card-link */
.issue-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; }
.issue-card .issue-num {
  font-family: var(--mono); font-size: calc(12px * var(--s)); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin: 0 0 10px;
}

/* decorative sweep/pulse animations carried over from the three issue mockups, each guarded */
.sweepline { animation: sweep 9s linear infinite; }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(624px); } }

.ratchet-riser { animation: riser-pulse 6s ease-in-out infinite; }
@keyframes riser-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.stall-pulse { animation: stall 2.4s ease-in-out infinite; }
@keyframes stall { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .sweepline { display: none; animation: none; }
  .ratchet-riser { animation: none; }
  .stall-pulse { animation: none; opacity: .7; }
}

@media (max-width: 900px) {
  .issue-grid { grid-template-columns: minmax(0, 1fr); }
}