/* How it works, refined: the four steps as hairline rows, the way Rejouice sets its approach, instead of a rail with dots.
   The step you are on is lit and its top line draws across; the day sits on the right of each row. The device gets more
   of the screen, on flat night with no glow behind it. */
@media (min-width: 761px) {
  .dark-site .lw-how .hw-story .hw-field { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .dark-site .lw-how .hw-story .hw-list { gap: 0; padding: 0; border-bottom: 1px solid rgba(239, 236, 229, .16); }
  .dark-site .lw-how .hw-story .hw-list::before, .dark-site .lw-how .hw-story .hw-list::after { content: none; }
  .dark-site .lw-how .hw-story .hw-item { padding: clamp(14px, 2svh, 22px) 0 clamp(16px, 2.2svh, 24px); border-top: 1px solid rgba(239, 236, 229, .16); }
  .dark-site .lw-how .hw-story .hw-item::before, .dark-site .lw-how .hw-story .hw-item.is-past::before, .dark-site .lw-how .hw-story .hw-item.is-on::before {
    left: 0; right: 0; top: -1px; width: auto; height: 1px; border-radius: 0; background: var(--lw-w); box-shadow: none;
    transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--lw-in); }
  .dark-site .lw-how .hw-story .hw-item.is-on::before { transform: none; }
  .dark-site .lw-how .hw-story .hw-pick { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 24px; }
  .dark-site .lw-how .hw-story .hw-when { grid-column: 2; grid-row: 1; }
  .dark-site .lw-how .hw-story .hw-title { grid-column: 1; grid-row: 1; }
}
.dark-site .lw-how .hd-light { display: none; }