/* Marketing pages: landing, campaign landings, blog, and the public dice and character tools. Components come from global.css. */

/* Ad landing pages keep visitors on the one call to action. */
body.static-living_world #main-nav,
body.static-start_playing #main-nav { display: none; }

/* Real world art and character portraits are content: shown plain, with the paper radius. */
.world-hero-art { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius); }
.roller-portrait { display: block; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }

.blog-post { max-width: 40rem; margin: 0 auto; }
.blog-post .prose { max-width: none; }

.dice-roller .dice-history { flex-direction: column; align-items: stretch; gap: 0; max-height: 16rem; overflow-y: auto; }
.dice-roller .dice-history li { display: flex; align-items: center; gap: var(--s2); }
.dice-roller .dice-history li::before { content: none; }
.dice-roller .dice-history .hint { margin-left: auto; }

.roller-result .kv { align-items: baseline; }
.roller-shell { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.roller-result-top { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); align-items: center; }

@media (max-width: 860px) {
  .roller-shell, .roller-result-top { grid-template-columns: minmax(0, 1fr); }
  .roller-result-top .roller-portrait { max-width: 200px; }
}

@media print {
  #main-nav, .site-shell-footer, [data-character-roller] > .hero, .roller-controls, .roller-cta, .roller-disclaimer { display: none; }
  body { background: none; }
  .roller-shell { display: block; }
  .roller-result { box-shadow: none; border: 0; padding: 0; }
  .roller-result .card-tab { position: static; transform: none; }
  .roller-result-top { grid-template-columns: 1.5in 1fr; }
  .roller-result section { break-inside: avoid; }
}