/* misty.day */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #e5e7eb; color: #374151; font-family: 'Lato', sans-serif; font-weight: 300; line-height: 1.85; }
.hero { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background: linear-gradient(to bottom, #e5e7eb, #d1d5db); padding: 2rem; }
.fog { position: absolute; left: 0; width: 100%; height: 100px; pointer-events: none; }
.fog-top { top: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent); }
.fog-bottom { bottom: 0; background: linear-gradient(to top, rgba(255,255,255,0.6), transparent); }
.brand { font-family: 'Cormorant', serif; font-weight: 400; font-size: clamp(2.5rem, 6vw, 3.5rem); color: #374151; position: relative; z-index: 1; }
.weather-label { font-family: 'Inter', sans-serif; font-size: 0.65rem; color: #9ca3af; margin-top: 0.5rem; position: relative; z-index: 1; }
.mood { max-width: 560px; margin: 0 auto; padding: 3rem 1.5rem; }
.soft-panel { background: #f3f4f6; padding: 2.5rem; box-shadow: 0 0 60px rgba(0,0,0,0.04); }
.mood-title { font-family: 'Cormorant', serif; font-weight: 400; font-size: 1.4rem; color: #374151; margin-bottom: 0.5rem; }
.mood-text { font-size: 0.9rem; color: #6b7280; }
.verse { text-align: center; padding: 6rem 2rem; max-width: 500px; margin: 0 auto; }
.verse-text { font-family: 'Cormorant', serif; font-weight: 400; font-style: italic; font-size: clamp(1.3rem, 3.5vw, 1.8rem); color: #4b5563; }
.clear { text-align: center; padding: 4rem 2rem; }
.rain-line { width: 1px; height: 20px; border-left: 1px dashed #d1d5db; margin: 0 auto 4px; opacity: 0.5; }
.close-text { font-family: 'Inter', sans-serif; font-size: 0.65rem; color: #9ca3af; margin-top: 1rem; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }