#top { position: relative; min-height: 440px; display: flex; flex-direction: column; justify-content: center; padding-block: 10px 50px; }
#top .lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .42; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 6%, rgba(0, 0, 0, .22) 40%, #000 82%);
          mask-image: linear-gradient(to right, transparent 6%, rgba(0, 0, 0, .22) 40%, #000 82%); }
#top .lines path { fill: none; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#top .copy { position: relative; z-index: 2; width: max-content; max-width: 100%; }
#top h1 { font-family: var(--serif); font-weight: 300; letter-spacing: -.01em; font-size: clamp(24px, 5.2vw, 66px); line-height: 1.06; white-space: nowrap; }
#top .lede { width: 0; min-width: 100%; margin-top: 24px; color: var(--soft); font-size: 15px; line-height: 1.7; }
.rise { opacity: 0; transform: translateY(14px); animation: rise .8s ease forwards; }
.rise.late { animation-delay: .25s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (max-width: 860px) { #top { min-height: 380px; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } }