/* undo.cafe */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #FBF7F0; color: #3E2723; font-family: 'Lora', serif; font-weight: 400; line-height: 1.8; }
.section-heading { font-family: 'Cormorant', serif; font-weight: 600; font-size: 1.6rem; color: #6D4C41; letter-spacing: 0.01em; margin-bottom: 1.25rem; }
.parchment { background: #F3EDE3; }
.wash-divider { height: 40px; background: radial-gradient(ellipse at 50% 50%, rgba(161,136,127,0.15) 0%, transparent 70%); }
.hero { position: relative; padding: 4rem 2rem; margin-left: 8%; }
.coffee-stain { position: absolute; top: 2rem; right: 10%; width: 80px; height: 80px; border-radius: 50%; border: 3px solid rgba(109,76,65,0.08); }
.hero-inner { max-width: 600px; }
.hero-title { font-family: 'Cormorant', serif; font-weight: 600; font-size: 2.5rem; color: #6D4C41; margin-bottom: 0.5rem; }
.hero-invite { font-size: 1.05rem; color: #6D4C41; margin-bottom: 1.25rem; }
.come-in { display: inline-block; background: #C17F3E; color: #FBF7F0; font-family: 'Cormorant', serif; font-weight: 600; font-size: 1rem; padding: 0.6rem 1.5rem; border-radius: 6px; text-decoration: none; }
.reflections { padding: 2rem; }
.reflections-inner { max-width: 700px; margin-left: 5%; }
.story-cards { display: flex; flex-direction: column; gap: 1rem; }
.story-card { background: #F3EDE3; padding: 1.5rem; clip-path: polygon(0% 0%, 100% 0%, 98% 100%, 2% 98%); }
.story-text { font-family: 'Merriweather', serif; font-style: italic; font-size: 1.05rem; color: #3E2723; margin-bottom: 0.5rem; }
.story-author { font-family: 'Cormorant', serif; font-size: 0.85rem; color: #A1887F; }
.menu { padding: 2rem; }
.menu-inner { max-width: 600px; margin-left: 10%; }
.prompt-card { background: #FBF7F0; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); margin-bottom: 1.5rem; }
.prompt-label { font-family: 'Cormorant', serif; font-weight: 500; font-size: 0.85rem; color: #C17F3E; display: block; margin-bottom: 0.5rem; }
.prompt-text { font-family: 'Merriweather', serif; font-style: italic; font-size: 1.1rem; color: #3E2723; margin-bottom: 0.5rem; }
.prompt-date { font-size: 0.8rem; color: #A1887F; }
.warmth-meter { display: flex; align-items: center; gap: 0.75rem; }
.warmth-label { font-family: 'Cormorant', serif; font-size: 0.9rem; color: #6D4C41; }
.warmth-track { width: 12px; height: 80px; background: #D7CCC8; border-radius: 6px; position: relative; }
.warmth-fill { position: absolute; bottom: 0; width: 100%; background: #C17F3E; border-radius: 6px; }
.warmth-val { font-family: 'Cormorant', serif; font-size: 0.9rem; color: #C17F3E; }
.submit { padding: 2rem; }
.submit-inner { max-width: 500px; margin-left: 8%; }
.submit-desc { font-size: 0.95rem; color: #A1887F; margin-bottom: 1rem; }
.submit-field { background: #F3EDE3; border: 1px solid #D7CCC8; border-radius: 8px; min-height: 80px; margin-bottom: 0.75rem; }
.submit-btn { display: inline-block; background: #C17F3E; color: #FBF7F0; font-family: 'Cormorant', serif; font-weight: 600; font-size: 0.9rem; padding: 0.5rem 1.25rem; border-radius: 6px; text-decoration: none; }
.footer { background: #5D4037; color: #D7CCC8; padding: 2rem; text-align: center; }
.footer-inner { max-width: 600px; margin: 0 auto; }
.steam { display: flex; justify-content: center; gap: 4px; margin-bottom: 0.75rem; }
.steam-line { width: 2px; height: 20px; background: rgba(215,204,200,0.4); border-radius: 2px; animation: steamRise 2s ease-in-out infinite; }
.steam-line.delay { animation-delay: 0.5s; }
@keyframes steamRise { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 0.7; transform: translateY(-8px); } }
.closing-thought { font-family: 'Merriweather', serif; font-style: italic; font-size: 1.1rem; color: #D7CCC8; margin-bottom: 1rem; }
.footer-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 0.75rem; }
.flink { font-size: 0.85rem; color: #A1887F; text-decoration: none; }
.footer-copy { font-size: 0.75rem; color: #A1887F; }
@media (max-width: 640px) { .hero, .reflections-inner, .menu-inner, .submit-inner { margin-left: 0; padding-left: 1.5rem; padding-right: 1.5rem; } }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }