/* historic.day */
/* Colors: #F5ECD7, #EDE3CC, #E8DBC4, #2C1E10, #6B5244, #A0422A, #C4956A, #5B8C7A */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Lora', serif; font-weight: 400; font-size: 16px; line-height: 1.72; background: #F5ECD7; color: #2C1E10; overflow-x: hidden; }
.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; background: #F5ECD7; }
.hero-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(2.5rem, 6vw, 4.5rem); color: #2C1E10; letter-spacing: 0.02em; opacity: 0; animation: fadeIn 1.5s ease forwards; }
.hero-sub { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic; font-size: clamp(1rem, 2vw, 1.4rem); color: #6B5244; margin-top: 16px; opacity: 0; animation: fadeIn 1s 0.8s ease forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.timeline { max-width: 800px; margin: 0 auto; padding: 80px 40px; border-left: 1.5px solid #6B5244; margin-left: 30%; }
.event { margin-bottom: 80px; padding-left: 40px; position: relative; }
.event::before { content: ""; position: absolute; left: -6px; top: 8px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #C4956A; background: #F5ECD7; }
.event-meta { margin-bottom: 12px; }
.date-stamp { font-family: 'Special Elite', cursive; font-size: 16px; color: #A0422A; letter-spacing: 0.08em; margin-right: 16px; }
.event-tag { font-family: 'Special Elite', cursive; font-size: 12px; color: #5B8C7A; letter-spacing: 0.06em; padding: 2px 8px; border: 1px solid #5B8C7A; border-radius: 2px; }
.event-heading { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); color: #2C1E10; margin-bottom: 12px; }
.event-text { color: #2C1E10; max-width: 520px; font-size: 16px; }
.site-footer { text-align: center; padding: 60px 40px; background: #EDE3CC; }
.site-footer p { font-family: 'Special Elite', cursive; font-size: 13px; color: #6B5244; letter-spacing: 0.06em; }
@media (max-width: 768px) { .timeline { margin-left: 24px; padding: 40px 24px; } .event { padding-left: 24px; } }