/* /prompts/ (2026-10-12). Each prompt is a card: what kind it is, when and where, his words in a
   terminal-style block, and why it matters. Same hero and next blocks as the case-study kit. */
.pr-hero { padding-block: clamp(20px, 4vw, 56px); }
.pr-hero h1 { margin: 4px 0 14px; color: var(--bone); font: 800 var(--h1-page)/1.04 var(--face); font-stretch: 112%; letter-spacing: -.025em; }
.pr-lede { max-width: min(100%, calc(480px + 14vw)); margin: 0; color: #d6dbe2; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.5; }
.pr-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 22px 0 0; padding: 12px 0; list-style: none; border-block: 1px solid var(--field-line); }
.pr-stats li { display: flex; align-items: baseline; gap: 8px; }
.pr-stats strong { color: var(--number); font-size: 1.8rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.pr-stats span { color: var(--bone-soft); }
.pr-note { margin: 12px 0 0; color: var(--bone-soft); font-size: .88rem; }
.pr-featured, .pr-library { padding-block: var(--section-tight); }
.pr-featured h2, .pr-library h2 { margin: 0 0 16px; font: 800 var(--h2)/1.08 var(--face); font-stretch: 112%; }
.pr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.pr-filters-k { margin: 0 4px 0 0; font-weight: 800; color: var(--ink-soft); }
.pr-filters button { min-height: 44px; padding: 0 14px; background: var(--sheet, #fff); border: 2px solid var(--ink); border-radius: 22px; font: 700 .9rem/1 var(--face); color: var(--ink); cursor: pointer; }
.pr-filters button[aria-pressed="true"] { background: var(--ink); color: var(--sheet, #fff); }
.pr-filters small { opacity: .75; font-weight: 600; }
.pr-pillar { margin-top: 28px; }
.pr-pillar h3 { margin: 0 0 4px; font-size: 1.3rem; }
.pr-pillar-line { margin: 0 0 12px; color: var(--ink-soft); max-width: min(100%, calc(480px + 14vw)); }
.pr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pr-card { display: grid; gap: 8px; align-content: start; margin: 0; padding: 14px 16px; background: var(--sheet, #fff); border: 1px solid var(--paper-line, #d0d6de); border-radius: 6px; }
.pr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .85rem; color: var(--ink-soft); }
.pr-meta b { color: var(--ink); }
.pr-text { margin: 0; padding: 12px 14px; background: var(--field); color: var(--bone); border-radius: 4px; }
.pr-text p { margin: 0; font: 400 .95rem/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-line; overflow-wrap: anywhere; }
.pr-text p::before { content: "> "; color: var(--number); }
.pr-why { margin: 0; font-weight: 650; line-height: 1.5; }
.pr-context { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.pr-card--big .pr-text p { font-size: 1.05rem; }
.pr-card[hidden], .pr-pillar[hidden] { display: none; }