/* ============================================================
   Interior + Marketing template previews — additive CSS.

   Built against the real tokens confirmed in styles.css (--ink,
   --ledger, --ledger-line, --brass, --brass-dark, --paper, --muted,
   --steel). Reuses existing classes wherever they already fit
   (.tpl-utility, .tpl-mega, .tpl-hero, .tpl-stats, .tpl-cta-band,
   .tpl-footer, .tpl-feature/.tpl-feature-body/.tpl-feature-media
   from the Premium section) — these three new blocks are the only
   genuinely new components: page-head (breadcrumb+title for
   Interior), interior-body/quick-facts (2-col layout + sidebar box),
   and quote (Marketing's testimonial block).
   ============================================================ */

.tpl-page-head { padding: 40px 32px 0; }
.tpl-page-head .crumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px;
}
.tpl-page-head h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.9rem; margin: 0 0 10px; }
.tpl-page-head .lede { color: var(--muted); font-size: 0.98rem; max-width: 60ch; margin: 0; }

.tpl-interior-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  padding: 32px 32px 40px;
  align-items: start;
}
@media (max-width: 800px) { .tpl-interior-body { grid-template-columns: 1fr; } }
.tpl-interior-main p { font-size: 0.95rem; line-height: 1.7; color: var(--ink); margin: 0 0 16px; }
.tpl-interior-main p:last-child { margin-bottom: 0; }

.tpl-quick-facts {
  background: var(--ledger);
  border: 1px solid var(--ledger-line);
  border-radius: 2px;
  padding: 22px;
}
.tpl-quick-facts h6 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 14px;
}
.tpl-quick-facts dl { margin: 0 0 18px; }
.tpl-quick-facts dt { font-size: 0.72rem; color: var(--muted); margin-top: 10px; }
.tpl-quick-facts dt:first-child { margin-top: 0; }
.tpl-quick-facts dd { margin: 2px 0 0; font-size: 0.9rem; color: var(--ink); font-weight: 500; }
.tpl-quick-facts-cta {
  display: block;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px;
  border-radius: 2px;
}

.tpl-quote {
  background: var(--forecast-bg);
  padding: 40px 48px;
  text-align: center;
}
.tpl-quote p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 auto 16px;
}
.tpl-quote-attr {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--forecast);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}