/* prose-bands.css — Sep 21 2026
 *
 * The typographic system from the Sep 20 drafts
 * (docs/drafts/2026-09-20-max-burn/home-v4.html + about-v3.html), folded into
 * the real site. Everything is scoped under `.rv` so it cannot reach the
 * shared <site-header> / <site-footer> or any existing Tailwind section.
 *
 * Two deliberate departures from the drafts:
 *
 *  1. NO GOOGLE FONTS. The drafts loaded Bricolage Grotesque + Newsreader +
 *     IBM Plex Mono. The shell header/footer inherit style.css's
 *     `body { font-family: Arial, Helvetica, sans-serif }` ("match Flow app
 *     font"), so importing three families would have put two type systems on
 *     one page and added a render-blocking request to the home page. What is
 *     kept is the drafts' *rhythm* — the clamp scale, the tight display
 *     tracking, the mono eyebrow in caps, the left-ruled thesis block.
 *     The mono stack is generic (system mono), not a downloaded face.
 *
 *  2. LIGHT ONLY. apps/landing has no dark-mode rule anywhere (grep:
 *     zero `prefers-color-scheme`, zero `data-theme`, zero `dark:`), and the
 *     shell header is a hard `bg-white`. A dark band under a white sticky
 *     header reads as breakage, so the drafts' dark token sets were dropped
 *     rather than half-applied. If landing ever goes dark, the tokens below
 *     are the single place to add the partner block.
 */

.rv {
  /* Light token set — the site's purple family + Tailwind's gray ramp. */
  --rv-ink: #111827;
  --rv-body: #374151;
  --rv-muted: #6b7280;
  --rv-accent: #7c3aed;
  --rv-accent-ink: #6d28d9;
  --rv-rule: #e5e7eb;
  --rv-rule-strong: #ddd6fe;
  --rv-card: #ffffff;
  --rv-ground: #f5f3ff;
  --rv-shade: #f3f4f6;

  --rv-disp: Arial, Helvetica, sans-serif;
  --rv-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  color: var(--rv-body);
}

.rv-wrap {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: 20px;
}

.rv-wrap--wide { max-width: 58rem; }

.rv :focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── type ───────────────────────────────────────────────────────────── */

.rv .rv-eyebrow {
  font-family: var(--rv-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rv-accent-ink);
  margin: 0 0 0.55rem;
  line-height: 1.5;
}

.rv .rv-h2 {
  font-family: var(--rv-disp);
  font-weight: 700;
  color: var(--rv-ink);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 0.9rem;
}

/* The left-ruled thesis block — her sentence, set apart. */
.rv .rv-thesis {
  font-size: clamp(1.12rem, 1rem + 0.65vw, 1.34rem);
  line-height: 1.55;
  color: var(--rv-ink);
  border-left: 3px solid var(--rv-accent);
  padding-left: 1.05rem;
  max-width: 46ch;
  margin: 0;
  text-align: left;
}

.rv .rv-aside {
  margin: 1.4rem 0 0;
  color: var(--rv-muted);
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.65;
  text-align: left;
}

.rv .rv-lede {
  margin: 1.4rem 0 0;
  color: var(--rv-body);
  max-width: 60ch;
  font-size: 1.05rem;
  line-height: 1.65;
  text-align: left;
}

.rv .rv-lede strong,
.rv .rv-aside strong { color: var(--rv-ink); font-weight: 700; }

.rv .rv-caption {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--rv-muted);
  max-width: 62ch;
}

/* Icon sitting inline beside the word it names.
   `display: inline-block` is load-bearing: Tailwind's preflight (the CDN
   script every landing page loads) sets `svg { display: block }`, which put
   each glyph on its own line inside these sentences. Caught in Chrome,
   Sep 21 2026 — the class names alone read fine. */
.rv .rv-ico { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.15em; color: var(--rv-accent); }
.rv .rv-wi { white-space: nowrap; }
.rv .rv-wi .rv-ico { margin-right: 0.3em; }

/* ── section frame ──────────────────────────────────────────────────── */

.rv-band {
  padding-block: 3rem;
  background: #ffffff;
  border-top: 1px solid var(--rv-rule);
}

.rv-band--ground { background: var(--rv-ground); }

/* ── card grid (poetics band, star row) ─────────────────────────────── */

.rv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0.85rem;
  margin-top: 1.5rem;
}

/* Five cards in a 46rem column break 4 + 1 on the default track, which reads
   as a mistake. A wider minimum gives three per row, so five sets 3 + 2.
   Verified in Chrome at 1280 (Sep 21 2026). */
.rv-cards--poetics { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

@media (max-width: 34rem) {
  .rv-cards--poetics { grid-template-columns: repeat(2, 1fr); }
}

.rv-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rv-rule-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--rv-card);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rv-card:hover { border-color: var(--rv-accent); box-shadow: 0 2px 16px rgba(124, 58, 237, 0.18); }

.rv-card-plate {
  display: grid;
  place-items: center;
  width: 100%;
  height: 146px;
  background: var(--rv-shade);
  overflow: hidden;
}

.rv-card-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No cover → the app's own GrammarIcon tile, per the icon dictionary. */
.rv-card-plate--empty { background: var(--rv-ground); }
.rv-card-plate--empty svg { width: 44px; height: 44px; color: var(--rv-accent); }

.rv-card-body { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.7rem 0.8rem 0.8rem; }

.rv-card-title {
  font-family: var(--rv-disp);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.28;
  color: var(--rv-ink);
  letter-spacing: -0.008em;
}

.rv-card-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }

.rv-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--rv-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rv-muted);
}

.rv-card-meta svg { width: 12px; height: 12px; color: var(--rv-accent); }

/* Drawn (non-functional) Star affordance — dashed so it reads as an
   illustration of the control, not the control. */
.rv-starchip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--rv-mono);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rv-accent-ink);
  border: 1px dashed var(--rv-rule-strong);
  border-radius: 99px;
  padding: 0.28em 0.6em;
  flex: none;
}

.rv-starchip svg { width: 11px; height: 11px; }

/* ── the Personal Channel object ────────────────────────────────────── */

.rv-chan {
  margin-top: 1.6rem;
  border: 1px solid var(--rv-rule-strong);
  border-radius: 14px;
  background: var(--rv-card);
  overflow: hidden;
}

.rv-chan-head { padding: 1.4rem 1.2rem 1.1rem; text-align: center; border-bottom: 1px solid var(--rv-rule); }

.rv-chan-av {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.7rem;
  border-radius: 50%;
  border: 2px solid var(--rv-rule-strong);
  background: var(--rv-ground);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.rv-chan-av img { width: 34px; height: 34px; display: block; }

.rv-chan-name { font-family: var(--rv-disp); font-weight: 700; color: var(--rv-ink); font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.2; }
.rv-chan-meta { margin-top: 0.35rem; font-family: var(--rv-mono); font-size: 0.68rem; color: var(--rv-muted); letter-spacing: 0.06em; }

.rv-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; margin-top: 0.85rem; }

.rv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--rv-mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.35em 0.75em;
  border-radius: 99px;
  border: 1px solid var(--rv-rule-strong);
  color: var(--rv-muted);
  background: transparent;
}

.rv-chip svg { width: 12px; height: 12px; color: var(--rv-accent); }
.rv-chip--on { background: var(--rv-accent); border-color: var(--rv-accent); color: #ffffff; }
.rv-chip--on svg { color: #ffffff; }

.rv-chan-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.9rem 1.2rem 0; }
.rv-chan-body { padding: 0.9rem 1.2rem 1.2rem; }
.rv-chan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }

.rv-mini {
  position: relative;
  display: block;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--rv-rule);
  background: var(--rv-shade);
  aspect-ratio: 1 / 1;
}

.rv-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rv-mini i {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rv-accent);
  display: grid;
  place-items: center;
}

.rv-mini i svg { width: 12px; height: 12px; color: #ffffff; }

.rv-chan-foot {
  padding: 0 1.2rem 1.2rem;
  font-family: var(--rv-mono);
  font-size: 0.63rem;
  color: var(--rv-muted);
  letter-spacing: 0.04em;
  word-break: break-all;
}

/* ── Focus mode list ────────────────────────────────────────────────── */

.rv-list { margin: 1.2rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; max-width: 62ch; }
.rv-list li { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); gap: 0.75rem; align-items: start; line-height: 1.6; }
.rv-list li svg { width: 1.15rem; height: 1.15rem; color: var(--rv-accent); margin-top: 0.3rem; }

/* ── about: the block sections ──────────────────────────────────────── */

.rv-blk { padding-block: 2.2rem; border-top: 1px solid var(--rv-rule); }
.rv-blk > p + p { margin-top: 0.95rem; }
.rv-blk p { max-width: 64ch; line-height: 1.7; margin: 0; }

.rv-sign {
  font-family: var(--rv-disp);
  font-weight: 700;
  color: var(--rv-ink);
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rv-rule);
  margin: 0;
}

.rv-doors { display: flex; flex-wrap: wrap; gap: 0.55rem 1.4rem; font-family: var(--rv-mono); font-size: 0.8rem; margin-top: 1.3rem; }
.rv-doors a { display: inline-flex; align-items: center; gap: 0.35em; color: var(--rv-accent-ink); text-decoration: none; border-bottom: 1px solid var(--rv-rule-strong); }
.rv-doors a:hover { border-bottom-color: var(--rv-accent); }

/* ── narrow ─────────────────────────────────────────────────────────── */

@media (max-width: 30rem) {
  .rv-chan-grid { grid-template-columns: repeat(2, 1fr); }
  .rv-band { padding-block: 2.2rem; }
  .rv .rv-thesis { padding-left: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rv * { animation: none !important; transition: none !important; }
}