/* Demo page layout for this entry. Not part of the pattern. */
.poster { width: min(540px, 100%); padding: 22px 24px 20px; display: grid; grid-template-columns: 1fr auto; gap: 18px 20px; }
/* the wide first frame runs past its column; the heading clips it, so the height never moves */
.poster h1 { overflow: clip; font-size: clamp(52px, 15vw, 92px); font-weight: 800; line-height: .86; letter-spacing: 0; text-transform: uppercase; }
.facts { align-self: end; display: grid; gap: 10px; padding-left: 14px; border-left: 1px solid var(--demo-ink); font-size: 14px; }
.facts dt { color: var(--demo-mute); font-size: 12px; }
.facts dd { font-weight: 600; white-space: nowrap; }
.ss-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 16px; border-top: 1px solid var(--demo-line); }
.ss-links a { text-decoration: none; padding: 5px 12px 4px; border: 1px solid var(--demo-line); border-radius: 4px;
  font-size: 22px; font-weight: 700; text-transform: uppercase; line-height: 1.1; transition: border-color .2s, background-color .2s; }
.ss-links a:hover, .ss-links a:focus-visible { border-color: var(--demo-ink); background: var(--demo-table); }
@media (max-width: 460px) {
  .poster { grid-template-columns: 1fr; }
  .facts { grid-template-columns: auto auto; column-gap: 24px; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--demo-ink); }
  .ss-links { padding-top: 0; border-top: 0; }
  .ss-links a { font-size: 18px; padding-inline: 10px; }
}
@media (max-height: 440px) {
  .poster { padding: 18px 20px 16px; row-gap: 14px; }
  .poster h1 { font-size: clamp(44px, 12vw, 80px); }
  .ss-links { padding-top: 12px; }
  .ss-links a { font-size: 18px; }
}
@media (min-width: 900px) and (min-height: 560px) {
  .poster { width: 640px; }
  .poster h1 { font-size: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-links a { transition: none; }
}