/* Norah Jane's Light - Purple Theme */
body { font-family: system-ui, Arial, sans-serif; margin: 0; padding: 0; background: #F3E5F5; color: #333; line-height: 1.6; }
header { background: #6A1B9A; color: white; padding: 1rem; text-align: center; }
header img { max-width: 450px; height: auto; border-radius: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
nav ul { list-style: none; padding: 0; display: flex; justify-content: center; gap: 1rem; }
nav a { color: white; text-decoration: none; }
.hero { background: #AB47BC; padding: 2rem; text-align: center; color: white; }
.hero img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.hero p { font-family: Georgia, serif; font-size: 1.2rem; line-height: 1.8; text-shadow: none; max-width: 800px; margin: 1rem auto; background: #F3E5F5; color: #333; padding: 1rem; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
button, .cta { background: #6A1B9A; color: white; border: none; padding: 0.5rem 1rem; cursor: pointer; border-radius: 4px; }
.timeline { margin: 4rem 0 2rem; }
.timeline h3 { margin-bottom: 3rem; }
.timeline ul { list-style: none; padding: 0; display: flex; justify-content: space-around; align-items: center; position: relative; }
.timeline ul::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: #AB47BC; z-index: 1; }
.timeline li { position: relative; z-index: 2; background: white; border: 2px solid #AB47BC; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; margin: 0 1rem; }
.timeline li::after { content: attr(data-text); position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%) rotate(-15deg); background: rgba(255,255,255,0.9); padding: 0.5rem; border-radius: 4px; font-size: 0.8rem; white-space: nowrap; }
section { margin: 2rem 0; padding: 1rem; position: relative; }
section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); z-index: 1; }
section > * { position: relative; z-index: 2; }
section img { width: 250px; height: auto; margin: 1rem 0; border-radius: 20px; box-shadow: 0 8px 16px rgba(0,0,0,0.2); position: relative; }
section img::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.1) 100%); border-radius: 20px; pointer-events: none; }
footer { background: #6A1B9A; color: white; text-align: center; padding: 1rem; }
/* Mobile-first responsive */
@media (max-width: 480px) { body { text-align: center; padding: 0; } nav ul { flex-direction: column; } .hero { padding: 1rem; } .timeline { display: none; } section { padding: 0.5rem; margin: 0; } section img { margin: 1rem auto; } }