.preview-intro { padding: clamp(2rem, 5vw, 4rem) 0 1.5rem; }
.preview-intro h1 { font-size: clamp(2.5rem, 7vw, 5.4rem); }
.preview-badge { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--gold-soft); background: rgba(232,195,109,.07); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.moon-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; }
.moon-title-row h3 { margin: 0; }
.moon-title-row code { flex: 0 0 auto; padding: .25rem .4rem; border: 1px solid currentColor; border-radius: .35rem; color: var(--moon-text); background: rgba(0,0,0,.13); font-size: .68rem; font-weight: 750; }
.moon[data-moon-text-tone="dark"] .moon-title-row code { background: rgba(255,255,255,.2); }
.moon .moon-day { cursor: default; }
.moon .moon-day:hover { transform: none; background: rgba(0,0,0,.15); }
.moon[data-moon-text-tone="dark"] .moon-day:hover { background: rgba(255,255,255,.21); }
@media (max-width: 560px) {
  .preview-badge { max-width: 9rem; text-align: center; }
  .moon-title-row { display: grid; }
  .moon-title-row code { justify-self: start; }
}