index.html

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unit 01 - The Thinking Child</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="style.css">
    <script src="app.js" defer></script>
</head>
<body class="bg-bg-page min-h-screen flex items-start justify-center p-4 md:p-12 text-slate-900">
    <div class="w-full max-w-4xl bg-bg-surface border border-slate-200 rounded-3xl overflow-hidden shadow-2xl shadow-slate-200/50">
        
        <header class="py-12 px-8 bg-white border-b border-slate-100 text-left">
            <h1 class="text-4xl font-black tracking-tight text-gold-text mb-2">Unit 01: The Thinking Child</h1>
            <p class="text-slate-500 text-base font-medium italic">Cognitive Development Beyond 7</p>
        </header>

        <div id="accordion-list"></div>

        <footer class="py-8 bg-slate-50 border-t border-slate-100 text-center px-8">
            <p class="text-[10px] text-slate-400 uppercase tracking-widest font-bold">University Child and Family Studies Programme © 2026</p>
        </footer>
    </div>
</body>
</html>