/* poster: the promise very large in the display face, the action under it, and the product at the
   fold. The name sits in the hero, so the bar has no rule and no fill. For printables, launches and
   newsletters. Link after identity.css. */
html[data-layout="poster"] .site-header { background: transparent; border-bottom: 0; }
html[data-layout="poster"] .hero { padding-block: var(--s5) var(--s7); }
html[data-layout="poster"] .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
html[data-layout="poster"] .poster-title {
  margin: 0 0 var(--s4); max-width: 11ch; font-size: clamp(3.4rem, 1.2rem + 12vw, 10.5rem);
  line-height: 0.92; letter-spacing: -0.03em; overflow-wrap: normal;
}
html[data-layout="poster"] .promise { max-width: 36ch; font-size: var(--step-2); color: var(--ink-2); }
html[data-layout="poster"] .hero .actions { margin-top: var(--s4); }
html[data-layout="poster"] .btn-lg { min-height: 3.75rem; font-size: var(--step-2); }
html[data-layout="poster"] .poster-proof { padding-block: var(--s6) var(--s7); background: var(--surface); border-block: 1px solid var(--line); }
@media (min-width: 860px) {
  html[data-layout="poster"] .hero { min-height: min(72vh, 40rem); display: grid; align-content: center; }
}