/* ══════════════════════════════════════
           PALETTE & RESET
        ══════════════════════════════════════ */
            :root {
            --beige:      #F0EAD6;
            --tan:        #D2B48C;
            --tan-dk:     #b8956a;
            --rose:       #BC4749;
            --rose-dk:    #9b3a3c;
            --rose-lt:    #f5e0e0;
            --teal:       #70A3A7;
            --teal-dk:    #4e7d80;
            --teal-lt:    #e0edef;
            --charcoal:   #403B33;
            --charcoal-lt:#5a5449;
            --white:      #ffffff;
        }
        body {
            font-family: 'Inter', sans-serif;
            background: var(--beige);
            color: var(--charcoal);
            overflow-x: hidden;
        }

        /* ══════════════════════════════════════
           SHARED COMPONENTS
        ══════════════════════════════════════ */

            @keyframes logo-shift {
            0%   { color: var(--tan); }
            33%  { color: var(--rose); }
            66%  { color: var(--teal); }
            100% { color: var(--tan); }
        }

        /* Buttons */
            .btn-primary {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--rose); color: white;
            font-weight: 700; border-radius: 14px;
            padding: 15px 34px; font-size: 1.05rem;
            box-shadow: 0 4px 0 var(--rose-dk);
            transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
        }

            .btn-outline {
            display: inline-flex; align-items: center; gap: 8px;
            border: 2px solid var(--teal-dk); color: var(--teal-dk);
            font-weight: 700; border-radius: 14px;
            padding: 13px 32px; font-size: 1.05rem;
            transition: background 0.2s, color 0.2s, transform 0.15s;
        }

        /* Section label pill */
            .section-tag {
            display: inline-block;
            font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
            text-transform: uppercase; color: white;
            background: var(--teal-dk, #4e7d80); border-radius: 999px;
            padding: 5px 16px; margin-bottom: 14px; border: none;
        }

        /* Section title */
            .section-title {
            font-size: clamp(1.8rem, 4vw, 2.6rem);
            font-weight: 900; color: var(--charcoal);
            line-height: 1.15;
        }

        /* Scroll reveal */
        /* Card base */
        .card {
            background: white; border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(64,59,51,0.08);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(64,59,51,0.14); }

        /* ══════════════════════════════════════
           HEADER
        ══════════════════════════════════════ */
            .site-header {
            position: sticky; top: 0; z-index: 50;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(64,59,51,0.08);
            box-shadow: 0 2px 16px rgba(64,59,51,0.07);
        }
            .header-inner {
            max-width: 1200px; margin: 0 auto;
            padding: 0 28px; height: 74px;
            display: flex; justify-content: space-between; align-items: center;
        }
            .logo-link {
            display: flex; align-items: center; gap: 11px;
            font-size: 1.4rem;
        }

            .nav-link {
            font-weight: 600; font-size: 0.9rem;
            color: var(--charcoal-lt); padding: 8px 14px; border-radius: 8px;
            transition: color 0.15s, background 0.15s;
        }

        /* Mobile nav toggle */
            .nav-toggle {
            display: none; background: none; border: none;
            cursor: pointer; padding: 8px; border-radius: 8px;
            font-size: 1.4rem; color: var(--charcoal);
        }
            .main-nav {
            display: none; flex-direction: column;
            background: white; border-top: 1px solid rgba(64,59,51,0.08);
            padding: 12px 28px 20px; gap: 4px;
        }
            .main-nav a {
            font-weight: 600; color: var(--charcoal-lt);
            padding: 10px 14px; border-radius: 8px;
            transition: background 0.15s, color 0.15s;
        }

        @media (max-width: 768px) {
            .desktop-nav { display: none; }
            .nav-toggle   { display: block; }
        }

        /* ══════════════════════════════════════
           HERO
        ══════════════════════════════════════ */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
            padding: 60px 28px;
        }

        /* Animated gradient background */
        .hero-bg {
            position: absolute; inset: 0; z-index: 0;
            background: linear-gradient(
                -45deg,
                var(--beige) 0%,
                #e8d5c0 20%,
                #f0c8c8 40%,
                #c8dfe0 60%,
                #d4c5b0 80%,
                var(--beige) 100%
            );
            background-size: 400% 400%;
            animation: gradwave 18s ease-in-out infinite;
        }
        @keyframes gradwave {
            0%   { background-position: 0% 50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Floating shape decorations */
        .hero-shape {
            position: absolute; border-radius: 50%;
            background: rgba(255,255,255,0.25);
            animation: float-shape var(--dur, 8s) var(--delay, 0s) ease-in-out infinite alternate;
        }
        @keyframes float-shape {
            from { transform: translate(0, 0) rotate(0deg); }
            to   { transform: translate(var(--tx, 20px), var(--ty, -20px)) rotate(var(--rot, 15deg)); }
        }

        /* Floating emoji decorations */
        .hero-emoji {
            position: absolute;
            font-size: var(--size, 2rem);
            opacity: 0.18;
            animation: float-emoji var(--dur, 7s) var(--delay, 0s) ease-in-out infinite alternate;
            user-select: none; pointer-events: none;
        }
        @keyframes float-emoji {
            from { transform: translateY(0) rotate(0deg); }
            to   { transform: translateY(var(--ty, -18px)) rotate(var(--rot, 10deg)); }
        }

        .hero-content {
            position: relative; z-index: 1;
            max-width: 760px; text-align: center;
        }
        .hero-eyebrow {
            font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em;
            text-transform: uppercase; color: var(--rose);
            margin-bottom: 18px;
            display: flex; align-items: center; justify-content: center; gap: 10px;
        }
        .hero-eyebrow::before, .hero-eyebrow::after {
            content: ''; flex: 0 0 32px; height: 1.5px; background: var(--rose); opacity: 0.5;
        }
        .hero-title {
            font-family: 'Fredoka', cursive;
            font-size: clamp(3rem, 8vw, 5.5rem);
            font-weight: 700; line-height: 1.05;
            color: var(--charcoal);
            margin-bottom: 22px;
        }
        .hero-title .accent { color: var(--rose); }
        .hero-title .accent2 { color: var(--teal-dk); }

        .hero-desc {
            font-size: clamp(1rem, 2.5vw, 1.2rem);
            color: var(--charcoal-lt); line-height: 1.7;
            max-width: 560px; margin: 0 auto 36px;
        }
        .hero-buttons {
            display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
        }

        /* Scroll cue */
        .scroll-cue {
            position: absolute; bottom: 32px; left: 50%;
            transform: translateX(-50%); z-index: 2;
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            opacity: 0.5; animation: bounce-cue 2s ease-in-out infinite;
        }
        @keyframes bounce-cue {
            0%,100% { transform: translateX(-50%) translateY(0); }
            50%      { transform: translateX(-50%) translateY(6px); }
        }
        .scroll-cue span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal); }
        .scroll-cue svg  { color: var(--charcoal); }

        /* ══════════════════════════════════════
           CATEGORY STRIP
        ══════════════════════════════════════ */
        .category-strip {
            background: var(--charcoal);
            padding: 22px 28px;
        }
        .category-inner {
            max-width: 1200px; margin: 0 auto;
            display: flex; justify-content: center;
            gap: 12px; flex-wrap: wrap;
        }
        .category-pill {
            display: inline-flex; align-items: center; gap: 7px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.12);
            color: rgba(240,234,214,0.8);
            font-size: 0.85rem; font-weight: 600;
            padding: 8px 18px; border-radius: 999px;
            transition: background 0.2s, color 0.2s;
        }
        .category-pill:hover { background: var(--rose); color: white; border-color: var(--rose); }

        /* ══════════════════════════════════════
           FEATURED SECTION
        ══════════════════════════════════════ */
        .featured-section {
            padding: 88px 28px;
            background: var(--beige);
        }
            .section-header {
            text-align: center; margin-bottom: 52px;
        }
        .featured-grid {
            max-width: 1200px; margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 28px;
        }
        .feat-card {
            display: flex; flex-direction: column;
        }
        .feat-card-img {
            position: relative; overflow: hidden;
        }
        .feat-card-img img {
            width: 100%; height: 220px; object-fit: cover;
            transition: transform 0.4s ease;
        }
        .card:hover .feat-card-img img { transform: scale(1.05); }
        .feat-card-badge {
            position: absolute; top: 14px; left: 14px;
            font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
            text-transform: uppercase; color: white;
            padding: 4px 12px; border-radius: 999px;
        }
        .badge-book  { background: var(--rose); }
        .badge-free  { background: #c47f00; }
        .badge-game  { background: var(--teal-dk); }

        .feat-card-body {
            padding: 22px 24px 26px;
            flex: 1; display: flex; flex-direction: column;
        }
        .feat-card-title {
            font-size: 1.2rem; font-weight: 800;
            color: var(--charcoal); margin-bottom: 8px;
        }
        .feat-card-desc {
            font-size: 0.9rem; color: #6b6460;
            line-height: 1.55; flex: 1; margin-bottom: 18px;
        }
        .feat-card-cta {
            font-weight: 700; font-size: 0.9rem;
            color: var(--teal-dk);
            display: inline-flex; align-items: center; gap: 4px;
            transition: gap 0.2s;
        }
        .card:hover .feat-card-cta { gap: 8px; }

        .see-all-wrap { text-align: center; margin-top: 48px; }

        /* ══════════════════════════════════════
           ABOUT STRIP
        ══════════════════════════════════════ */
        .about-strip {
            background: var(--teal-dk);
            padding: 72px 28px;
            position: relative; overflow: hidden;
        }
        .about-strip::before {
            content: '📚';
            position: absolute; right: -20px; top: -20px;
            font-size: 160px; opacity: 0.07;
            transform: rotate(-15deg);
            pointer-events: none;
        }
        .about-strip::after {
            content: '🎲';
            position: absolute; left: -10px; bottom: -20px;
            font-size: 140px; opacity: 0.07;
            transform: rotate(10deg);
            pointer-events: none;
        }
        .about-inner {
            max-width: 780px; margin: 0 auto; text-align: center;
            position: relative; z-index: 1;
        }
        .about-inner .section-tag { border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.8); }
        .about-inner h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; color: white; margin-bottom: 18px; }
        .about-inner p  { font-size: 1.05rem; color: rgba(255,255,255,0.8); line-height: 1.75; margin-bottom: 32px; }
        .about-stats {
            display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
            margin-bottom: 36px;
        }
        .stat { text-align: center; }
        .stat-num { font-family: 'Fredoka', cursive; font-size: 2.4rem; font-weight: 700; color: white; line-height: 1; }
        .stat-label { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
        .btn-about {
            display: inline-flex; align-items: center; gap: 8px;
            background: white; color: var(--teal-dk);
            font-weight: 700; border-radius: 14px;
            padding: 14px 32px; font-size: 1rem;
            transition: transform 0.15s, box-shadow 0.15s;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        .btn-about:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }

        /* ══════════════════════════════════════
           UPDATES
        ══════════════════════════════════════ */
        .updates-section {
            padding: 88px 28px;
            background: white;
        }
        .updates-grid {
            max-width: 900px; margin: 0 auto;
            display: flex; flex-direction: column; gap: 20px;
        }
        .update-card {
            background: var(--beige); border-radius: 18px;
            padding: 28px 32px;
            display: flex; gap: 28px; align-items: flex-start;
            border-left: 4px solid var(--teal);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .update-card:hover { transform: translateX(4px); box-shadow: 0 8px 24px rgba(64,59,51,0.08); }
        .update-card.rose  { border-color: var(--rose); }
        .update-meta { flex: 0 0 140px; }
        .update-date { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--teal-dk); margin-bottom: 6px; }
        .update-card.rose .update-date { color: var(--rose); }
        .update-title { font-size: 1.15rem; font-weight: 800; color: var(--charcoal); }
        .update-body { flex: 1; }
        .update-body p { font-size: 0.95rem; color: var(--charcoal-lt); line-height: 1.65; margin-bottom: 14px; }
        .update-link { font-weight: 700; font-size: 0.9rem; color: var(--rose); transition: opacity 0.15s; }
        .update-link:hover { opacity: 0.75; }

        @media (max-width: 600px) {
            .update-card { flex-direction: column; gap: 12px; }
            .update-meta { flex: unset; }
        }

        /* ══════════════════════════════════════
           MERCH SECTION
        ══════════════════════════════════════ */
        .merch-section {
            padding: 88px 28px;
            background: var(--tan);
            position: relative; overflow: hidden;
        }
        .merch-section::before {
            content: '🛍️';
            position: absolute; right: 5%; top: 50%;
            transform: translateY(-50%);
            font-size: 200px; opacity: 0.08;
            pointer-events: none;
        }
        .merch-inner {
            max-width: 680px; margin: 0 auto; text-align: center;
            position: relative; z-index: 1;
        }
        .merch-inner .section-tag { border-color: var(--charcoal); color: var(--charcoal); opacity: 0.7; }
        .merch-inner h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; color: var(--charcoal); margin-bottom: 16px; }
        .merch-inner p  { font-size: 1.05rem; color: var(--charcoal-lt); line-height: 1.7; margin-bottom: 32px; }

        /* ══════════════════════════════════════
           SOCIALS
        ══════════════════════════════════════ */
        .socials-section {
            padding: 88px 28px;
            background: var(--beige);
            border-top: 2px solid rgba(64,59,51,0.06);
        }
        .socials-grid {
            max-width: 1100px; margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 16px;
        }
        .social-card {
            background: white; border-radius: 18px;
            padding: 26px 18px;
            display: flex; flex-direction: column; align-items: center; gap: 10px;
            text-align: center;
            box-shadow: 0 4px 16px rgba(64,59,51,0.07);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .social-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(64,59,51,0.13); }
        .social-card img { width: 60px; height: 60px; object-fit: cover; border-radius: 12px; }
        .social-platform { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dk); }
        .social-name { font-size: 1rem; font-weight: 800; color: var(--charcoal); }
        .social-desc { font-size: 0.78rem; color: #7a746c; line-height: 1.4; }
        .social-arrow { font-size: 0.85rem; font-weight: 700; color: var(--rose); margin-top: 4px; }

        /* Contact row */
        .contact-row {
            max-width: 680px; margin: 48px auto 0;
            background: white; border-radius: 18px;
            padding: 36px 32px; text-align: center;
            box-shadow: 0 4px 20px rgba(64,59,51,0.07);
        }
        .contact-row h3 { font-size: 1.4rem; font-weight: 800; color: var(--charcoal); margin-bottom: 8px; }
        .contact-row p  { font-size: 0.95rem; color: var(--charcoal-lt); margin-bottom: 24px; }
        .contact-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
        .contact-btn {
            display: inline-flex; align-items: center; gap: 8px;
            font-weight: 700; font-size: 0.9rem; padding: 11px 22px;
            border-radius: 10px; border: 2px solid;
            transition: background 0.2s, color 0.2s, transform 0.15s;
        }
        .contact-btn:hover { transform: translateY(-2px); }
        .contact-btn.email { border-color: var(--rose); color: var(--rose); }
        .contact-btn.email:hover { background: var(--rose); color: white; }
        .contact-btn.insta { border-color: var(--teal-dk); color: var(--teal-dk); }
        .contact-btn.insta:hover { background: var(--teal-dk); color: white; }

        /* ══════════════════════════════════════
           ABOUT SECTION (bottom)
        ══════════════════════════════════════ */
        #about {
            padding: 72px 28px;
            background: var(--charcoal);
            text-align: center;
        }
        #about .section-tag { border-color: rgba(240,234,214,0.3); color: rgba(240,234,214,0.7); }
        #about h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 900; color: var(--beige); margin-bottom: 16px; }
        #about p  { font-size: 1rem; color: rgba(240,234,214,0.72); line-height: 1.8; max-width: 600px; margin: 0 auto; }

        /* ══════════════════════════════════════
           FOOTER
        ══════════════════════════════════════ */
        footer {
            background: #2e2a24;
            padding: 28px;
            text-align: center;
            color: rgba(240,234,214,0.35);
            font-size: 0.82rem;
        }
        footer a { color: rgba(240,234,214,0.5); transition: color 0.15s; }
        footer a:hover { color: rgba(240,234,214,0.85); }

        /* ══════════════════════════════════════
           RESPONSIVE TWEAKS
        ══════════════════════════════════════ */
        @media (max-width: 640px) {
            .hero-buttons { flex-direction: column; align-items: center; }
            .btn-primary, .btn-outline { width: 100%; max-width: 300px; justify-content: center; }
            .about-stats { gap: 24px; }
        }
    
        

    
        /* ═══════════════════════════════════
           SHARED: NAV + FOOTER  (v2 unified)
        ═══════════════════════════════════ */
        .footer-brand{display:flex;flex-direction:column;gap:6px;}
        /* ═══════════════════════════════════ */
        
        /* ═══════════════════════════════════
           DARK MODE CSS VARIABLES
        ═══════════════════════════════════ */
        :root {
            --bg-primary:    #F0EAD6;
            --bg-secondary:  #ffffff;
            --bg-tertiary:   #e8e0cc;
            --text-primary:  #403B33;
            --text-secondary:#5a5449;
            --text-muted:    #8a8278;
            --border:        #D2B48C;
            --border-lt:     rgba(64,59,51,.08);
            --header-bg:     rgba(255,255,255,.96);
            --card-bg:       #ffffff;
            --card-shadow:   0 5px 22px rgba(64,59,51,.07);
        }
        [data-theme="dark"] {
            --bg-primary:    #1e1c18;
            --bg-secondary:  #2a2720;
            --bg-tertiary:   #322f27;
            --text-primary:  #f0ead6;
            --text-secondary:#c8bfaa;
            --text-muted:    #7a7268;
            --border:        #3a3830;
            --border-lt:     rgba(240,234,214,.08);
            --header-bg:     rgba(30,28,24,.97);
            --card-bg:       #2a2720;
            --card-shadow:   0 5px 22px rgba(0,0,0,.3);
        }
        /* Apply variables to body */
        body { background-color: var(--bg-primary); color: var(--text-primary); }
        /* Dark mode header */
        [data-theme="dark"] .site-header { background: var(--header-bg) !important; border-color: var(--border-lt) !important; }
        [data-theme="dark"] .nav-link { color: var(--text-secondary) !important; }
        [data-theme="dark"] .nav-link:hover { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; }
        [data-theme="dark"] .main-nav { background: var(--bg-secondary) !important; border-color: var(--border-lt) !important; }
        [data-theme="dark"] .main-nav a { color: var(--text-secondary) !important; border-color: var(--border-lt) !important; }
        [data-theme="dark"] .main-nav a:hover { background: var(--bg-tertiary) !important; }
        /* Dark mode toggle button in header */
        .theme-toggle {
            background: none;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            padding: 5px 9px;
            font-size: .9rem;
            cursor: pointer;
            color: var(--text-secondary);
            flex-shrink: 0;
            transition: background .15s, border-color .15s;
            margin-left: 6px;
        }
        .theme-toggle:hover { background: var(--bg-tertiary); }

        /* ═══════════════════════════════════════════════
           DARK MODE, COMPREHENSIVE OVERRIDES
        ═══════════════════════════════════════════════ */
        [data-theme="dark"] .card                { background: var(--card-bg) !important; box-shadow: var(--card-shadow) !important; }
        [data-theme="dark"] .feat-card-title     { color: var(--text-primary) !important; }
        [data-theme="dark"] .feat-card-desc      { color: var(--text-secondary) !important; }
        [data-theme="dark"] .featured-section    { background: var(--bg-primary) !important; }
        [data-theme="dark"] .courses-section     { background: var(--bg-primary) !important; }
        [data-theme="dark"] .behind-section      { background: var(--bg-primary) !important; }
        [data-theme="dark"] .updates-section     { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .update-card         { background: var(--bg-tertiary) !important; }
        [data-theme="dark"] .update-title        { color: var(--text-primary) !important; }
        [data-theme="dark"] .update-body p       { color: var(--text-secondary) !important; }
        [data-theme="dark"] .socials-section     { background: var(--bg-primary) !important; border-color: var(--border-lt) !important; }
        [data-theme="dark"] .social-card         { background: var(--card-bg) !important; box-shadow: var(--card-shadow) !important; }
        [data-theme="dark"] .social-name         { color: var(--text-primary) !important; }
        [data-theme="dark"] .social-desc         { color: var(--text-muted) !important; }
        [data-theme="dark"] .contact-row         { background: var(--card-bg) !important; box-shadow: var(--card-shadow) !important; }
        [data-theme="dark"] .contact-row h3      { color: var(--text-primary) !important; }
        [data-theme="dark"] .contact-row p       { color: var(--text-secondary) !important; }
        [data-theme="dark"] .section-tag         { border-color: var(--border) !important; color: #fff !important; }
        [data-theme="dark"] .section-header h2   { color: var(--text-primary) !important; }
        [data-theme="dark"] .section-header p    { color: var(--text-secondary) !important; }
        [data-theme="dark"] .merch-section       { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .merch-inner h2      { color: var(--text-primary) !important; }
        [data-theme="dark"] .merch-inner p       { color: var(--text-secondary) !important; }
        [data-theme="dark"] .merch-inner .section-tag { color: var(--text-muted) !important; border-color: var(--border) !important; }
        [data-theme="dark"] .category-bar        { background: #1a1814 !important; }
        [data-theme="dark"] .hero-bg             {
            background: linear-gradient(-45deg,#1e1c18 0%,#2a2418 25%,#281818 50%,#182020 60%,#221e18 80%,#1e1c18 100%) !important;
            background-size: 400% 400% !important;
        }
        /* ═══════════════════════════════════ */
    
        /* ══ GAMES SECTION ══ */
        .games-section { padding: 80px 24px; background: var(--charcoal); }
        .games-section .section-tag { border-color: rgba(112,163,167,0.4); color: var(--teal); }
        .games-section .section-title { color: white; }
        .courses-section .section-title, .featured-section .section-title { color: var(--text-primary); }
        .games-grid {
            max-width: 1100px; margin: 48px auto 0;
            display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 20px;
        }
        .game-card {
            background: rgba(255,255,255,0.04); border: 1px solid rgba(240,234,214,0.1);
            border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; text-decoration: none;
        }
        .game-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); border-color: rgba(112,163,167,0.35); }
        .game-thumb { height: 140px; display: flex; align-items: center; justify-content: center; position: relative; }
        .game-emoji { font-size: 3rem; }
        .game-badge { position: absolute; top: 12px; right: 12px; background: var(--rose); color: white; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
        .game-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
        .game-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
        .game-title { font-size: 1.05rem; font-weight: 800; color: var(--beige); line-height: 1.2; }
        .game-desc { font-size: 0.82rem; color: rgba(240,234,214,0.55); line-height: 1.55; flex: 1; }
        .game-cta { font-size: 0.82rem; font-weight: 700; color: var(--teal); margin-top: 6px; }
        .game-card:hover .game-cta { color: #9dd4d7; }
        @media (max-width: 640px) { .games-grid { grid-template-columns: 1fr; } }

    
  .nav-toggle {
  display:none;background:none;border:none;
  padding:8px 12px;font-size:1.4rem;cursor:pointer;
  color:var(--charcoal,#403B33);flex-shrink:0;
  line-height:1;
}
  .main-nav {
  position:absolute;top:100%;left:0;right:0;z-index:200;
  background:#fff;
  border-top:3px solid var(--rose,#BC4749);
  box-shadow:0 8px 32px rgba(64,59,51,.18);
  max-height:0;overflow:hidden;
  transition:max-height .4s ease;
  display:block;
}
  .main-nav a {
  display:flex;align-items:center;gap:12px;
  padding:14px 24px;
  font-size:1rem;font-weight:600;
  color:var(--charcoal-lt,#5a5449);
  border-bottom:1px solid rgba(64,59,51,.06);
  transition:background .12s;
  text-decoration:none;
}
@media(max-width:860px){
  .main-nav,.nav-cta{ display:none!important; }
}
@media(min-width:861px){
}


/* ── WORKSHOP PAGE EXTRA ── */
.ws-hero{padding:72px 28px 60px;background:var(--beige);border-bottom:3px solid var(--tan);}
.ws-hero-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}
@media(max-width:680px){.ws-hero-inner{grid-template-columns:1fr;gap:20px}}
.ws-kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dk);margin-bottom:10px}
.ws-title{font-size:clamp(2.4rem,6vw,4rem);font-weight:900;color:var(--charcoal);line-height:1;margin-bottom:14px}
.ws-title span{color:var(--rose)}
.ws-sub{font-size:1rem;color:var(--charcoal-lt);line-height:1.7;max-width:440px}
.ws-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ws-pill{font-size:.68rem;font-weight:700;padding:5px 12px;border-radius:6px;background:rgba(64,59,51,.06);border:1px solid rgba(64,59,51,.12);letter-spacing:.04em}
.ws-stat-grid{background:white;border-radius:16px;box-shadow:0 4px 20px rgba(64,59,51,.08);padding:20px 22px;min-width:200px}
.ws-stat-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(64,59,51,.07);font-size:.82rem}
.ws-stat-row:last-child{border-bottom:none}
.ws-stat-label{color:var(--charcoal-lt)}
.ws-stat-val{font-weight:800;color:var(--rose)}

/* Course grid */
.courses-section{padding:72px 28px;background:white}
.courses-section.alt{background:var(--beige)}
.courses-inner{max-width:1100px;margin:0 auto}
.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:22px;margin-top:40px}
.course-card{background:white;border-radius:18px;overflow:hidden;box-shadow:0 4px 20px rgba(64,59,51,.08);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.course-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(64,59,51,.14)}
.course-thumb{height:160px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex-shrink:0}
.course-thumb-emoji{font-size:4rem;z-index:1}
.course-thumb-badge{position:absolute;top:12px;left:12px;font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:6px;color:white;z-index:2}
.course-body{padding:20px 22px;flex:1;display:flex;flex-direction:column;gap:6px}
.course-tag{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dk)}
.course-title{font-size:1.1rem;font-weight:900;color:var(--charcoal);line-height:1.2}
.course-desc{font-size:.82rem;color:var(--charcoal-lt);line-height:1.6;flex:1}
.course-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.course-chip{font-size:.65rem;font-weight:700;padding:3px 9px;border-radius:5px;background:rgba(64,59,51,.06)}
.course-cta{margin-top:12px;font-size:.85rem;font-weight:800;color:var(--rose);display:inline-flex;align-items:center;gap:5px;transition:gap .15s}
.course-card:hover .course-cta{gap:9px}



/* ── ARTICLE CARDS (behind the scenes) ── */
.cat-section { padding: 52px 28px 24px; }
.cat-header { max-width: 1100px; margin: 0 auto 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cat-label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.cat-title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900; color: var(--charcoal); line-height: 1.1; }
.cat-count { font-size: .78rem; font-weight: 700; color: var(--charcoal-lt); flex-shrink: 0; }
.cat-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.cat-divider { max-width: 1100px; margin: 40px auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--tan), transparent); }
.feat-article-wrap { max-width: 1100px; margin: 0 auto; padding: 0 0 8px; }



/* ── ARTICLE / BEHIND THE SCENES SECTION ── */
.behind-section { padding: 64px 28px; background: var(--beige); }
.behind-inner { max-width: 1100px; margin: 0 auto; }
.behind-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.behind-label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); margin-bottom: 5px; }
.behind-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: var(--charcoal); line-height: 1.1; }
.behind-count { font-size: .78rem; font-weight: 700; color: var(--charcoal-lt); flex-shrink: 0; }
/* A233: learn.html uses the hub featured-article markup but never loaded its styles, so the card
   rendered unstyled: light text on the beige behind-section. Ported from style-workshop-hub.css. */
/* ── FEATURED ARTICLE CARD ── */
.feat-article{grid-column:1/-1;display:flex;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#1a1830,#2a1840);box-shadow:0 8px 40px rgba(0,0,0,.18);transition:transform .25s,box-shadow .25s;cursor:pointer;text-decoration:none;color:inherit}
.feat-article:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.feat-article-img{flex:0 0 320px;overflow:hidden;position:relative;background:linear-gradient(135deg,#0e0a06,#1a0030);min-height:260px;display:flex;align-items:center;justify-content:center}
.feat-article-img .fa-icon,.feat-article-img .cover-img + .fa-icon{width:100%;height:100%;min-height:260px;display:flex;align-items:center;justify-content:center;font-size:5rem;position:relative;z-index:1}
.feat-article-body{flex:1;padding:36px 40px;display:flex;flex-direction:column;justify-content:center}
.fa-badge{display:inline-flex;align-items:center;gap:6px;font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#c084fc;margin-bottom:12px}
.fa-title{font-size:clamp(1.3rem,3vw,1.8rem);font-weight:900;color:white;line-height:1.3;margin-bottom:12px}
.fa-desc{font-size:.92rem;color:rgba(240,234,214,.85);line-height:1.7;margin-bottom:20px}
.fa-cta{font-size:.88rem;font-weight:700;color:var(--teal);display:inline-flex;align-items:center;gap:6px;transition:gap .15s}
.feat-article:hover .fa-cta{gap:10px}
@media(max-width:700px){.feat-article{flex-direction:column}.feat-article-img{flex:none;height:200px;min-height:200px}}
.behind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 22px; margin-top: 20px; }
.feat-wrap { margin-bottom: 8px; }


        .articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
        .article-card{background:white;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(64,59,51,.08);transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column;cursor:pointer}
        .article-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;flex-shrink:0}
        .article-thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem}
        .article-tag-badge{position:absolute;top:12px;left:12px;font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:999px;z-index:2}
        .article-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
        .article-date{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tan-dk);margin-bottom:8px}
        .article-title{font-family:'Inter',sans-serif;font-size:1.05rem;font-weight:800;color:var(--charcoal);line-height:1.35;margin-bottom:10px}
        .article-excerpt{font-size:.85rem;color:var(--charcoal-lt);line-height:1.7;flex:1;margin-bottom:16px}
        .article-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
        .article-read-time{font-size:.72rem;font-weight:600;color:var(--charcoal-lt);display:flex;align-items:center;gap:4px}
        .article-read-more{font-size:.8rem;font-weight:700;color:var(--teal-dk);display:inline-flex;align-items:center;gap:6px;transition:gap .15s,color .15s}
        

/* Extra learn page styles */
.learn-hero {
    padding: 80px 28px 68px;
    background: linear-gradient(160deg, #0d0b08 0%, #1a1208 40%, #0d1518 100%);
    border-bottom: 2px solid rgba(112,163,167,0.18);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.learn-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% -20%, rgba(188,71,73,.18) 0%, transparent 55%),
                radial-gradient(ellipse at 15% 100%, rgba(112,163,167,.1) 0%, transparent 50%),
                radial-gradient(ellipse at 85% 80%, rgba(188,71,73,.07) 0%, transparent 40%);
    pointer-events: none;
}
.learn-hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(112,163,167,.4), transparent);
}
.hero-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.hero-eyebrow {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--teal);
    margin-bottom: 18px;
    display: inline-flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
    content: ''; display: inline-block; width: 28px; height: 1.5px; background: var(--teal); opacity: 0.5;
}
.hero-title { font-family: 'Fredoka', cursive; font-size: clamp(2.8rem, 6vw, 4.2rem); font-weight: 700; color: #f0ead6; line-height: 1.05; margin-bottom: 16px; }
.hero-title .accent { color: var(--rose); }
.hero-title .accent2 { color: var(--teal); }
.hero-sub { font-size: 1.05rem; color: rgba(240,234,214,.6); line-height: 1.75; max-width: 520px; margin: 0 auto 32px; }
.hero-stats { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.hstat { text-align: center; }
.hstat-val { font-family: 'Fredoka', cursive; font-size: 2.2rem; font-weight: 700; color: var(--teal); line-height: 1; }
.hstat-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(240,234,214,.4); margin-top: 4px; }

/* Personal progress strip, self-contained on this page, no XP/badges, just light stats */
.teen-stats-strip { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 28px auto 0; padding: 12px 20px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.teen-stat-pill { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: rgba(240,234,214,.7); }
.teen-stat-pill span { color: #f0ead6; }
.teen-stat-sep { width: 1px; background: rgba(255,255,255,.12); margin: 0 2px; }

/* Age hub selector */
.hub-selector{padding:64px 28px;background:var(--charcoal);}
.hub-selector-inner{max-width:920px;margin:0 auto;}
.hub-selector-label{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,234,214,.3);text-align:center;margin-bottom:8px;}
.hub-selector-title{font-family:'Fredoka',cursive;font-size:1.5rem;font-weight:700;color:rgba(240,234,214,.85);text-align:center;margin-bottom:36px;}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:700px){.hub-grid{grid-template-columns:1fr;}}

/* Hub illustrated cards */
.hub-card{border-radius:24px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;box-shadow:0 8px 32px rgba(0,0,0,.3);transition:transform .25s,box-shadow .25s;position:relative;}
.hub-card:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(0,0,0,.5);}
.hub-card.tiny{background:linear-gradient(160deg,#fff8ee 0%,#fff0f8 100%);}
.hub-card.lab{background:linear-gradient(160deg,#0d0d12 0%,#12101e 100%);}
.hub-card.teen{background:linear-gradient(160deg,#0d1518 0%,#1a1208 100%);}
.hub-card.hub-active{box-shadow:0 0 0 3px var(--teal),0 8px 32px rgba(0,0,0,.35);}
.hub-card.hub-active::after{content:'YOU ARE HERE';position:absolute;top:16px;left:50%;transform:translateX(-50%);background:var(--teal);color:#0d1518;font-size:.58rem;font-weight:900;letter-spacing:.1em;padding:3px 12px;border-radius:999px;z-index:3;}
.hub-card-stripe{height:6px;}
.hub-card.tiny .hub-card-stripe{background:linear-gradient(90deg,#FF6B6B,#FFD93D,#6BCB77);}
.hub-card.lab  .hub-card-stripe{background:linear-gradient(90deg,#818CF8,#3EC9A7,#60A5FA);}
.hub-card.teen .hub-card-stripe{background:linear-gradient(90deg,var(--rose),var(--teal));}
.hub-new-ribbon{position:absolute;top:22px;right:-34px;transform:rotate(40deg);background:#FFD93D;color:#403B33;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 42px;box-shadow:0 3px 8px rgba(0,0,0,.2);z-index:2;}
.hub-card-body{padding:26px 24px 28px;flex:1;display:flex;flex-direction:column;gap:10px;}
.hub-scene{display:flex;justify-content:center;padding:6px 0 2px;}
.hub-scene svg{width:100%;max-width:230px;height:auto;overflow:visible;}
.hub-scene .float{animation:hubFloat 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.hub-scene .float.d1{animation-delay:.35s;}
.hub-scene .float.d2{animation-delay:.7s;}
@keyframes hubFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@media(prefers-reduced-motion:reduce){.hub-scene .float{animation:none;}}
.hub-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.hub-age-badge{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:999px;width:fit-content;}
.hub-card.tiny  .hub-age-badge{background:rgba(255,107,107,.15);color:#d44;}
.hub-card.lab   .hub-age-badge{background:rgba(129,140,248,.15);color:#818CF8;}
.hub-card.teen  .hub-age-badge{background:rgba(112,163,167,.15);color:var(--teal);}
.hub-count-badge{font-size:.72rem;font-weight:800;}
.hub-card.tiny  .hub-count-badge{color:var(--rose);}
.hub-card.lab   .hub-count-badge{color:#818CF8;}
.hub-card.teen  .hub-count-badge{color:var(--teal);}
.hub-card-name{font-family:'Fredoka',cursive;font-size:1.85rem;font-weight:700;line-height:1.1;}
.hub-card.tiny  .hub-card-name{color:var(--charcoal);}
.hub-card.lab   .hub-card-name,.hub-card.teen .hub-card-name{color:#f0ead6;}
.hub-card-desc{font-size:.86rem;line-height:1.6;}
.hub-card.tiny  .hub-card-desc{color:rgba(64,59,51,.65);}
.hub-card.lab   .hub-card-desc,.hub-card.teen .hub-card-desc{color:rgba(240,234,214,.55);}
.hub-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
.hub-tag{font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:7px;}
.hub-card.tiny  .hub-tag{background:rgba(64,59,51,.07);color:rgba(64,59,51,.6);}
.hub-card.lab   .hub-tag,.hub-card.teen .hub-tag{background:rgba(255,255,255,.07);color:rgba(255,255,255,.5);}
.hub-tag.is-new{font-weight:800;}
.hub-card.tiny  .hub-tag.is-new{background:rgba(255,107,107,.18);color:#c0392b;}
.hub-card.lab   .hub-tag.is-new{background:rgba(129,140,248,.2);color:#a5b4ff;}
.hub-card.teen  .hub-tag.is-new{background:rgba(112,163,167,.22);color:#9fc8cb;}
.hub-card-cta{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.92rem;margin-top:auto;padding-top:16px;transition:gap .15s;}
.hub-card:hover .hub-card-cta{gap:12px;}
.hub-card.tiny  .hub-card-cta{color:var(--rose);}
.hub-card.lab   .hub-card-cta{color:#818CF8;}
.hub-card.teen  .hub-card-cta{color:var(--teal);}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap}
/* style-shared.css loads last and overrides body to the site-wide dark theme,
   but this page has its own light/dark toggle driven by [data-theme], restore
   the CSS-variable-driven body rule after the shared sheet so the toggle still works. */
body { background-color: var(--bg-primary); color: var(--text-primary); }
.reveal{opacity:1!important;transform:none!important}