/* Demo page layout for this entry. Not part of the pattern. */
.empty { width: min(400px, 100%); padding: 12px 28px 28px; display: grid; justify-items: center; text-align: center; }
.sky { display: block; width: 100%; max-width: 320px; height: auto; overflow: visible; margin-bottom: 8px; }
/* line art in blue pencil and ink, so the illustration sits on the paper, not on a photo */
.trail { fill: none; stroke: var(--demo-blue); stroke-width: 1.25; stroke-dasharray: 4 5; stroke-linecap: round; opacity: .7; }
.cloud { fill: var(--demo-blue-soft); stroke: var(--demo-blue); stroke-width: 1.25; stroke-linejoin: round; }
.cloud-far { --drift-amp: 8px; }
.plane { --drift-amp: 12px; stroke: var(--demo-ink); stroke-width: 1.5; stroke-linejoin: round; }
.plane-wing { fill: var(--demo-paper); }
.plane-keel { fill: var(--demo-blue-soft); }
.empty h1 { font-size: 20px; font-weight: 700; }
.empty-sub { max-width: 30ch; margin-top: 6px; color: var(--demo-mute); text-wrap: pretty; }
.write { margin-top: 18px; font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 6px; cursor: pointer;
  background: var(--demo-paper); color: var(--demo-ink); border: 1px solid var(--demo-ink); }
@media (max-height: 440px) {
  .empty { padding: 8px 24px 20px; }
  .sky { max-width: 260px; }
  .write { margin-top: 12px; }
}
@media (min-width: 900px) and (min-height: 560px) {
  .empty { width: 460px; }
  .sky { max-width: 360px; }
}