:root{
    --purple:#5B2C91;        /* Bibleman royal purple */
    --purple-deep:#3F1E6B;
    --purple-soft:#F4EEFB;
    --gold:#F5B921;          /* armor gold */
    --gold-soft:#FFF8E3;
    --blue:#1E73BE;          /* cape blue */
    --blue-soft:#EDF5FC;
    --red:#D8362A;
    --cream:#FFFFFF;         /* pure white background */
    --section-alt:#FAFAFC;   /* very subtle off-white for section variation */
    --ink:#1A1230;           /* deep readable text */
    --ink-soft:#5B5670;
    --line:rgba(91,44,145,0.10);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Source Sans 3',system-ui,sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.6;
    overflow-x:hidden;
  }
  /* Decorative star confetti background */
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(245,185,33,0.07) 0 2px, transparent 3px),
      radial-gradient(circle at 84% 22%, rgba(30,115,190,0.07) 0 2px, transparent 3px),
      radial-gradient(circle at 28% 78%, rgba(91,44,145,0.06) 0 2px, transparent 3px),
      radial-gradient(circle at 72% 88%, rgba(245,185,33,0.06) 0 2px, transparent 3px);
    background-size: 600px 600px;
    pointer-events:none;
    z-index:0;
  }

  /* ---------- NAV ---------- */
  nav.top{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1240px; margin:0 auto;
    padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between;
    gap:24px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Playfair Display',serif;
    font-size:24px;
    font-weight:800;
    color:var(--purple);
    letter-spacing:1.5px;
    text-decoration:none;
  }
  .brand-mark{
    width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;
    color:var(--gold);
    filter:drop-shadow(0 2px 4px rgba(91,44,145,0.25));
  }
  .brand-mark svg{ width:100%; height:100%; }
  .nav-links{
    display:flex; gap:6px; list-style:none; align-items:center;
  }
  .nav-links a{
    text-decoration:none;
    color:var(--ink);
    font-weight:600;
    font-size:15px;
    padding:10px 18px;
    border-radius:6px;
    transition:.2s;
    letter-spacing:.3px;
  }
  .nav-links a:hover{ background:var(--purple-soft); color:var(--purple); }
  .nav-links a.cta{
    background:var(--purple);
    color:white;
    box-shadow:0 2px 0 var(--purple-deep);
  }
  .nav-links a.cta:hover{ background:var(--purple-deep); color:white; }

  /* Nav social icons (top-right Instagram + Facebook) */
  .nav-socials{
    display:flex; gap:4px;
    padding:0 6px;
    margin:0 4px;
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
  }
  .nav-social{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px;
    padding:0 !important;
    border-radius:50% !important;
    color:var(--purple) !important;
    background:transparent !important;
    transition:.2s;
  }
  .nav-social svg{ width:20px; height:20px; }
  .nav-social:hover{
    background:var(--purple) !important;
    color:white !important;
    transform:translateY(-2px);
  }
  .menu-btn{display:none;background:none;border:none;font-size:28px;color:var(--purple);cursor:pointer}

  /* ---------- HERO ---------- */
  header.hero{
    position:relative;
    padding:20px 28px 140px;
    min-height:calc(100vh - 68px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-align:center;
    background:
      radial-gradient(ellipse 70% 50% at 50% 40%, #3a1d6b 0%, transparent 70%),
      radial-gradient(ellipse 60% 60% at 15% 80%, #1b3a6b 0%, transparent 70%),
      radial-gradient(ellipse 50% 50% at 85% 20%, #4a2470 0%, transparent 70%),
      linear-gradient(180deg, #0a0518 0%, #150a2e 45%, #0d0722 100%);
    color:white;
    isolation:isolate;
  }
  /* Cinematic Bibleman HQ background */
  .hero-scene{
    position:absolute; inset:0; z-index:0;
    overflow:hidden;
    background-color:#100620;
    background-image:url('img/hero-hq-background-approved.webp');
    background-size:cover;
    background-position:center 48%;
    transform:scale(1.015);
    animation:hq-camera-drift 18s ease-in-out infinite alternate;
  }
  .hero-scene::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg,rgba(8,3,20,.08) 0%,rgba(8,3,20,.05) 35%,rgba(8,3,20,.54) 76%,rgba(8,3,20,.9) 100%),
      radial-gradient(ellipse 42% 72% at 50% 43%,rgba(17,6,38,.05) 0%,rgba(17,6,38,.18) 58%,rgba(8,3,20,.6) 100%);
    pointer-events:none;
  }
  .hero-scene::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(4,2,12,.36) 0%,transparent 22%,transparent 78%,rgba(4,2,12,.36) 100%);
    pointer-events:none;
  }
  .hero-scene svg{
    display:none;
  }
  @keyframes hq-camera-drift{
    from{ transform:scale(1.015) translate3d(0,0,0); }
    to{ transform:scale(1.055) translate3d(0,-.5%,0); }
  }
  /* Layered command-center light above the emblem */
  .hero-spotlight{
    position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(ellipse 28% 30% at 50% 25%,rgba(192,126,255,.24) 0%,transparent 75%),
      radial-gradient(ellipse 42% 38% at 50% 53%,rgba(245,185,33,.13) 0%,transparent 72%);
    pointer-events:none;
    mix-blend-mode:screen;
    animation:hq-light-breathe 6s ease-in-out infinite;
  }
  @keyframes hq-light-breathe{
    0%,100%{ opacity:.72; }
    50%{ opacity:1; }
  }
  /* Fine energy scan texture keeps the room feeling alive */
  .hero-stars{
    position:absolute; inset:0; z-index:1;
    background-image:
      linear-gradient(90deg,transparent 0%,rgba(245,185,33,.16) 50%,transparent 100%),
      repeating-linear-gradient(180deg,transparent 0 79px,rgba(178,123,255,.08) 80px,transparent 81px);
    background-size:64% 2px,100% 81px;
    background-repeat:no-repeat,repeat;
    background-position:-80% 71%,0 0;
    opacity:.34;
    mix-blend-mode:screen;
    animation:hq-energy-scan 8s ease-in-out infinite;
  }
  @keyframes hq-energy-scan{
    0%,12%{ background-position:-160% 71%,0 0; opacity:.18; }
    50%{ opacity:.42; }
    88%,100%{ background-position:260% 71%,0 0; opacity:.18; }
  }
  /* Light rays from top */

  .hero-inner{ position:relative; z-index:5; max-width:1100px; margin:0 auto; }
  .hero-emblem-stage{
    position:relative;
    display:grid;
    place-items:center;
    width:min(460px, 82vw);
    aspect-ratio:346 / 198;
    margin:0 auto 12px;
    isolation:isolate;
  }
  .hero-logo-wrap{
    position:relative;
    z-index:3;
    display:block;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,0.45));
    animation:hero-logo-lock 1.65s cubic-bezier(.2,.8,.2,1) both;
  }
  .hero-logo-img{
    display:block;
    width:min(400px, 70vw);
    height:auto;
  }
  .hero-sword{
    position:absolute;
    z-index:2;
    left:50%;
    top:50%;
    width:auto;
    height:min(430px, 68vh);
    pointer-events:none;
    will-change:transform,opacity;
    filter:drop-shadow(0 0 18px rgba(245,185,33,.52)) drop-shadow(0 18px 20px rgba(0,0,0,.42));
    animation:sword-drop 1.65s cubic-bezier(.19,.9,.26,1) both;
  }
  .sword-impact{
    position:absolute;
    z-index:1;
    left:50%;
    top:52%;
    width:120px;
    aspect-ratio:1;
    border:3px solid rgba(255,211,92,.9);
    border-radius:50%;
    opacity:0;
    transform:translate(-50%,-50%) scale(.15);
    box-shadow:0 0 28px rgba(245,185,33,.75), inset 0 0 26px rgba(245,185,33,.35);
    animation:sword-impact 1.65s ease-out both;
  }
  .sword-impact-two{
    width:82px;
    border-color:rgba(192,126,255,.85);
    animation-delay:.08s;
  }
  @keyframes sword-drop{
    0%{
      opacity:0;
      transform:translate(-50%,calc(-50% - 105vh)) rotate(-3deg) scale(.64);
    }
    12%{ opacity:1; }
    62%{
      opacity:1;
      transform:translate(-50%,-50%) rotate(0deg) scale(.46);
    }
    70%{ transform:translate(-50%,calc(-50% + 12px)) scale(.45); }
    78%{ transform:translate(-50%,calc(-50% - 8px)) scale(.465); }
    86%{ opacity:1; transform:translate(-50%,-50%) scale(.46); }
    100%{ opacity:0; transform:translate(-50%,-50%) scale(.46); }
  }
  @keyframes hero-logo-lock{
    0%,58%{ opacity:0; transform:scale(.84); }
    68%{ opacity:.2; transform:scale(.9); }
    78%{ opacity:1; transform:scale(1.045); }
    88%{ transform:scale(.985); }
    100%{ opacity:1; transform:scale(1); }
  }
  @keyframes sword-impact{
    0%,62%{ opacity:0; transform:translate(-50%,-50%) scale(.15); }
    69%{ opacity:.95; }
    91%{ opacity:0; transform:translate(-50%,-50%) scale(2.35); }
    100%{ opacity:0; transform:translate(-50%,-50%) scale(2.35); }
  }

  h1.hero-title{
    font-family:'Bangers',cursive;
    font-weight:400;
    font-size:clamp(48px,7vw,84px);
    color:white;
    line-height:1;
    max-width:900px;
    margin:0 auto 22px;
    letter-spacing:2px;
    text-shadow:0 3px 8px rgba(0,0,0,0.55);
    animation:slide-down .8s .92s ease-out both;
    margin-top:0;
  }
  h1.hero-title em{
    font-style:normal;
    color:var(--gold);
    text-shadow:0 3px 8px rgba(0,0,0,0.55);
  }
  h1.hero-title .word-1{ color:#ffffff; }
  h1.hero-title .word-2{ color:#ffffff; }
  @keyframes slide-down{
    from{ opacity:0; transform:translateY(-30px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .hero-sub{
    font-size:clamp(17px,1.8vw,22px);
    color:rgba(255,255,255,0.88);
    max-width:680px;
    margin:0 auto 42px;
    font-weight:500;
    text-shadow:0 2px 5px rgba(0,0,0,0.6);
    animation:slide-up .8s 1.02s ease-out both;
  }
  @keyframes slide-up{
    from{ opacity:0; transform:translateY(20px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .hero-ctas{
    display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
    animation:fade-in .75s 1.14s ease-out both;
  }
  @keyframes fade-in{
    from{ opacity:0; }
    to{ opacity:1; }
  }
  .hero-tagline{
    margin-top:24px; font-size:14px;
    color:rgba(255,255,255,0.75);
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:600;
  }
  .hero-tagline strong{ color:var(--gold); font-weight:700; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:18px 36px;
    border-radius:8px;
    font-weight:800;
    font-size:17px;
    text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease;
    border:none; cursor:pointer;
    font-family:'Source Sans 3',sans-serif;
    letter-spacing:.8px;
    text-transform:uppercase;
    position:relative;
  }
  .btn-primary{
    background:linear-gradient(135deg, var(--purple) 0%, #7a3eb1 100%);
    color:white;
    box-shadow:0 6px 24px rgba(91,44,145,0.5), 0 0 0 1px rgba(255,255,255,0.1) inset;
    animation:pulse-btn 2.5s ease-in-out infinite;
  }
  @keyframes pulse-btn{
    0%,100%{ box-shadow:0 6px 24px rgba(91,44,145,0.5), 0 0 0 1px rgba(255,255,255,0.1) inset; }
    50%{ box-shadow:0 6px 36px rgba(91,44,145,0.8), 0 0 0 1px rgba(255,255,255,0.2) inset; }
  }
  .btn-primary:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 12px 36px rgba(91,44,145,0.7);
  }
  .btn-gold{
    background:linear-gradient(135deg, var(--gold) 0%, #ffd060 100%);
    color:var(--purple-deep);
    box-shadow:0 6px 24px rgba(245,185,33,0.5), 0 0 0 1px rgba(255,255,255,0.2) inset;
  }
  .btn-gold:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 12px 36px rgba(245,185,33,0.7);
  }
  .btn-ghost{
    background:rgba(255,255,255,0.95); color:var(--purple);
    border:2px solid var(--purple);
  }
  .btn-ghost:hover{ transform:translateY(-3px) scale(1.03); background:white; }

  /* Floating decorative shapes */
  .float{
    position:absolute; opacity:.35; animation:bob 6s ease-in-out infinite;
    pointer-events:none;
  }
  .float.f1{ top:14%; left:6%; font-size:42px; }
  .float.f2{ top:18%; right:8%; font-size:54px; animation-delay:-2s; }
  .float.f3{ bottom:10%; left:12%; font-size:38px; animation-delay:-4s; }
  .float.f4{ bottom:14%; right:10%; font-size:46px; animation-delay:-1s; }
  @keyframes bob{
    0%,100%{ transform:translateY(0) rotate(-6deg); }
    50%{ transform:translateY(-14px) rotate(6deg); }
  }

  /* ---------- SECTION SHARED ---------- */
  section{
    position:relative;
    padding:90px 28px;
    z-index:1;
  }
  .container{ max-width:1180px; margin:0 auto; }
  .eyebrow{
    display:inline-block;
    background:linear-gradient(135deg, var(--gold) 0%, #ffd060 100%);
    color:var(--purple-deep);
    padding:8px 18px;
    border-radius:4px;
    font-size:13px;
    font-weight:800;
    letter-spacing:2.5px;
    text-transform:uppercase;
    margin-bottom:22px;
    box-shadow:0 4px 12px rgba(245,185,33,0.3);
  }
  h2.section-title{
    font-family:'Bangers',cursive;
    font-weight:400;
    font-size:clamp(40px,5.5vw,68px);
    color:var(--purple-deep);
    line-height:1;
    margin-bottom:18px;
    letter-spacing:1.5px;
  }
  h2.section-title em{
    font-style:normal;
    color:var(--gold);
    -webkit-text-stroke:1.5px var(--purple-deep);
  }
  .section-sub{
    color:var(--ink-soft);
    font-size:18px;
    max-width:660px;
    margin-bottom:48px;
    font-weight:500;
  }
  .head-center{ text-align:center; }
  .head-center .section-sub{ margin-left:auto; margin-right:auto; }

  /* ---------- TEAM (animated adventures cast) ---------- */
  #team{
    background:linear-gradient(135deg, #2a1654 0%, #3F1E6B 100%);
    color:white;
    position:relative;
    overflow:hidden;
  }
  #team::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(245,185,33,0.15) 0%, transparent 25%),
      radial-gradient(circle at 80% 70%, rgba(30,115,190,0.2) 0%, transparent 25%);
    pointer-events:none;
  }
  #team .container{ position:relative; z-index:2; }
  #team h2.section-title{ color:white; }
  #team h2.section-title em{ color:var(--gold); -webkit-text-stroke:1.5px white; }
  #team .section-sub{ color:rgba(255,255,255,0.85); }
  #team .eyebrow{
    background:rgba(245,185,33,0.95);
    color:var(--purple-deep);
  }
  .team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:24px;
    max-width:1100px;
    margin:0 auto;
  }
  .hero-card{
    background:white;
    border-radius:12px;
    padding:32px 22px 26px;
    text-align:center;
    border:none;
    transition:.3s cubic-bezier(.4,0,.2,1);
    position:relative;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,0.25);
  }
  .hero-card:hover{
    transform:translateY(-8px) rotate(-1deg);
    box-shadow:0 24px 50px rgba(245,185,33,0.4), 0 0 0 3px var(--gold);
  }
  .hero-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:8px;
    background:linear-gradient(90deg, var(--purple), var(--blue), var(--gold));
  }
  .portrait{
    width:100%;
    aspect-ratio:1/1;
    border-radius:12px;
    margin:0 auto 18px;
    background:
      radial-gradient(circle at 50% 80%, rgba(245,185,33,0.4) 0%, transparent 55%),
      linear-gradient(180deg, #2a1654 0%, #5B2C91 100%);
    display:flex;align-items:flex-end;justify-content:center;
    border:3px solid white;
    box-shadow:0 8px 24px rgba(91,44,145,0.4), 0 0 0 4px var(--gold);
    position:relative;
    transition:.3s;
    overflow:hidden;
    max-width:240px;
  }
  .portrait::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.6), transparent),
      radial-gradient(1.5px 1.5px at 70% 20%, rgba(245,185,33,0.6), transparent),
      radial-gradient(2px 2px at 85% 60%, rgba(255,255,255,0.4), transparent),
      radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.5), transparent);
  }
  .portrait img{
    position:relative; z-index:2;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,0.45));
    transition:.3s;
  }
  .hero-card:hover .portrait{
    transform:scale(1.02);
    box-shadow:0 12px 30px rgba(245,185,33,0.5), 0 0 0 4px var(--gold);
  }
  .hero-card:hover .portrait img{
    transform:translateY(-4px) scale(1.05);
  }
  .portrait .ph-label{
    position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
    background:var(--gold); color:var(--purple-deep);
    font-size:9px; font-weight:800; letter-spacing:1px;
    padding:4px 10px; border-radius:3px; text-transform:uppercase;
    white-space:nowrap;
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
  }
  .hero-card h3{
    font-family:'Bangers',cursive;
    font-weight:400;
    color:var(--purple-deep);
    font-size:30px;
    margin-bottom:4px;
    letter-spacing:2px;
  }
  .hero-card .role{
    color:var(--gold); font-weight:800; font-size:11px;
    text-transform:uppercase; letter-spacing:2px;
    margin-bottom:14px;
    padding:4px 10px;
    background:var(--purple-soft);
    border-radius:3px;
    display:inline-block;
  }
  .hero-card p{ color:var(--ink-soft); font-size:14px; line-height:1.5; }
  .char-stats{
    list-style:none;
    padding:0;
    margin:0;
    text-align:left;
    font-size:13px;
    color:var(--ink-soft);
    line-height:1.5;
  }
  .char-stats li{
    padding:6px 0;
    border-bottom:1px dashed var(--line);
  }
  .char-stats li:last-child{ border-bottom:none; }
  .char-stats strong{
    color:var(--purple-deep);
    font-weight:800;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:.8px;
    display:inline-block;
    margin-right:4px;
  }

  /* ---------- ABOUT ---------- */
  #about{ background:white; }
  .about-grid{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:60px;
    align-items:center;
  }
  .about-text h2{ margin-bottom:18px; }
  .about-text p{ color:var(--ink-soft); font-size:17px; margin-bottom:16px; }
  .pillars{
    display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
    margin-top:24px;
  }
  .pillar{
    background:var(--section-alt);
    padding:18px;
    border-radius:6px;
    border-left:3px solid var(--gold);
  }
  .pillar strong{ color:var(--purple); font-size:15px; display:block; margin-bottom:4px; font-weight:700; }
  .pillar span{ color:var(--ink-soft); font-size:14px; }
  .about-visual{
    aspect-ratio:1;
    border-radius:16px;
    background:
      radial-gradient(circle at 30% 30%, rgba(245,185,33,0.35), transparent 55%),
      linear-gradient(135deg, var(--purple-deep), var(--blue));
    display:flex; align-items:flex-end; justify-content:center;
    color:white;
    font-family:'Bangers',cursive;
    font-weight:400;
    font-size:34px;
    text-align:center;
    padding:40px;
    box-shadow:0 30px 80px rgba(91,44,145,0.35), 0 0 0 6px white, 0 0 0 8px var(--gold);
    position:relative;
    overflow:hidden;
    letter-spacing:1.5px;
    line-height:1.1;
  }
  .about-visual-img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 25%;
    z-index:0;
  }
  /* clean artwork: only a soft fade at the very bottom so the verse reads */
  .about-visual::before{
    content:""; position:absolute; left:0; right:0; bottom:0; height:42%; z-index:1;
    background:linear-gradient(180deg, rgba(16,7,36,0) 0%, rgba(16,7,36,0.62) 55%, rgba(16,7,36,0.85) 100%);
  }
  .about-visual::after{ content:none; }
  .about-visual span{
    position:relative; z-index:2; line-height:1.2;
    align-self:flex-end;
    text-shadow:0 4px 18px rgba(0,0,0,0.75), 0 0 40px rgba(0,0,0,0.5);
  }

  /* ---------- EPISODES ---------- */
  #episodes{
    background:linear-gradient(180deg, var(--cream) 0%, var(--purple-soft) 100%);
  }
  .ep-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:26px;
  }
  .ep-card{
    background:white;
    border-radius:12px;
    overflow:hidden;
    border:none;
    transition:.3s cubic-bezier(.4,0,.2,1);
    cursor:pointer;
    box-shadow:0 8px 24px rgba(91,44,145,0.12);
  }
  .ep-card:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 24px 50px rgba(91,44,145,0.25), 0 0 0 3px var(--gold);
  }
  .ep-thumb{
    aspect-ratio:16/9;
    background:linear-gradient(135deg,var(--purple),var(--blue));
    position:relative;
    display:flex; align-items:center; justify-content:center;
    color:white;
    overflow:hidden;
  }
  .ep-thumb::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 50%);
  }
  .ep-thumb .play{
    width:74px;height:74px;border-radius:50%;
    background:rgba(255,255,255,0.95);
    color:var(--purple);
    display:flex;align-items:center;justify-content:center;
    font-size:28px;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    transition:.3s;
    position:relative; z-index:2;
  }
  .ep-card:hover .play{
    transform:scale(1.15);
    background:var(--gold);
    box-shadow:0 12px 36px rgba(245,185,33,0.6);
  }
  .ep-thumb .badge{
    position:absolute; top:14px; left:14px;
    background:var(--gold); color:var(--purple-deep);
    font-weight:800; font-size:11px;
    padding:6px 12px; border-radius:4px;
    letter-spacing:2px; text-transform:uppercase;
    box-shadow:0 4px 12px rgba(245,185,33,0.4);
    z-index:3;
  }
  .ep-thumb .duration{
    position:absolute; bottom:14px; right:14px;
    background:rgba(0,0,0,0.75); color:white;
    font-size:12px; font-weight:700;
    padding:5px 10px; border-radius:3px;
    z-index:3;
  }
  .ep-body{ padding:22px 24px 24px; }
  .ep-body h4{
    font-family:'Bangers',cursive;
    font-weight:400;
    color:var(--purple-deep);
    font-size:26px;
    margin-bottom:8px;
    letter-spacing:1.2px;
    line-height:1.1;
  }
  .ep-body p{ color:var(--ink-soft); font-size:14px; line-height:1.55; }
  .ep-meta{ display:flex; gap:10px; align-items:center; margin-top:14px; font-size:12px; color:var(--ink-soft); font-weight:600; }
  .verse-tag{
    background:var(--purple-soft); color:var(--purple);
    padding:4px 10px; border-radius:3px;
    font-weight:700;
    letter-spacing:.3px;
  }

  /* Streaming platforms strip */
  .stream-strip{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:14px;
    margin-bottom:36px;
    padding:18px 22px;
    background:white;
    border:1px solid var(--line);
    border-radius:8px;
  }
  .stream-label{
    font-weight:700; font-size:13px;
    color:var(--ink); letter-spacing:.5px;
    text-transform:uppercase;
    margin-right:6px;
  }
  .stream-pill{
    display:inline-flex; flex-direction:column;
    text-decoration:none;
    padding:10px 18px;
    border-radius:6px;
    background:var(--section-alt);
    border:1px solid var(--line);
    transition:.2s;
    min-width:140px;
  }
  .stream-pill:hover{
    background:var(--purple-soft);
    border-color:var(--purple);
    transform:translateY(-2px);
  }
  .stream-pill strong{
    color:var(--purple-deep);
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:17px;
    line-height:1.2;
  }
  .stream-pill span{
    color:var(--ink-soft);
    font-size:12px;
    margin-top:2px;
  }

  /* ---------- CLASSICS ---------- */
  #classics{ background:white; }
  .classics-intro{
    display:flex; justify-content:center; gap:36px; flex-wrap:wrap;
    margin-bottom:60px;
    padding:32px 28px;
    background:linear-gradient(135deg, var(--purple-soft) 0%, var(--gold-soft) 100%);
    border-radius:12px;
    border:1px solid var(--line);
  }
  .classic-stat{ text-align:center; min-width:140px; }
  .classic-stat strong{
    display:block;
    font-family:'Bangers',cursive;
    font-weight:400;
    font-size:56px;
    color:var(--purple-deep);
    line-height:1;
    letter-spacing:2px;
  }
  .classic-stat span{
    color:var(--ink-soft); font-size:13px;
    font-weight:700; letter-spacing:1px; text-transform:uppercase;
    margin-top:8px; display:block;
  }

  /* Legacy block (text + quote) */
  .legacy-grid{
    display:grid;
    grid-template-columns: 1.3fr .7fr;
    gap:50px;
    align-items:center;
    margin-bottom:70px;
  }
  .legacy-heading{
    font-family:'Bangers',cursive;
    font-weight:400;
    font-size:40px;
    color:var(--purple-deep);
    letter-spacing:1.5px;
    margin-bottom:18px;
    line-height:1.05;
  }
  .legacy-text p{
    color:var(--ink-soft);
    font-size:17px;
    margin-bottom:16px;
    line-height:1.65;
  }
  .legacy-text p strong{ color:var(--purple); font-weight:700; }
  .legacy-visual{
    aspect-ratio:1;
    border-radius:16px;
    background:
      radial-gradient(circle at 30% 30%, rgba(245,185,33,0.35), transparent 55%),
      linear-gradient(135deg, var(--purple-deep), var(--blue));
    display:flex; align-items:flex-end; justify-content:center;
    color:white;
    font-family:'Bangers',cursive;
    font-weight:400;
    font-size:30px;
    text-align:center;
    padding:30px;
    box-shadow:0 20px 50px rgba(91,44,145,0.3), 0 0 0 5px white, 0 0 0 7px var(--gold);
    position:relative;
    overflow:hidden;
    letter-spacing:1.5px;
    line-height:1.15;
  }
  .legacy-visual::after{
    content:""; position:absolute; inset:0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 2px);
    background-size: 25px 25px;
  }
  .legacy-visual span{ position:relative; z-index:2; }

  /* Era heading */
  .era-section-heading{
    font-family:'Bangers',cursive;
    font-weight:400;
    font-size:42px;
    color:var(--purple-deep);
    letter-spacing:2px;
    text-align:center;
    margin-bottom:36px;
    position:relative;
    padding-bottom:18px;
  }
  .era-section-heading::after{
    content:"";
    position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:80px; height:4px;
    background:var(--gold);
    border-radius:2px;
  }

  /* Era cards (3 across) */
  .era-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-bottom:30px;
  }
  .era-card{
    background:white;
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--line);
    transition:.3s;
    box-shadow:0 4px 14px rgba(91,44,145,0.08);
  }
  .era-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(91,44,145,0.18), 0 0 0 2px var(--gold);
  }
  .era-card-banner{
    aspect-ratio:16/8;
    position:relative;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .era-1{ background:linear-gradient(135deg, #8b6f47, #c9a26f); }
  .era-2{ background:linear-gradient(135deg, var(--purple-deep), #6b3da3); }
  .era-3{ background:linear-gradient(135deg, #1b5b96, #2a8acf); }
  .era-card-banner::before{
    content:"";
    position:absolute; inset:0;
    background-image: repeating-linear-gradient(
      90deg, transparent 0, transparent 18px,
      rgba(0,0,0,0.15) 18px, rgba(0,0,0,0.15) 22px
    );
    opacity:.3;
  }
  .era-card-banner::after{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.4) 100%);
  }
  .era-card-year{
    position:relative; z-index:2;
    color:white;
    font-family:'Bangers',cursive;
    font-size:36px;
    letter-spacing:3px;
    text-shadow:0 4px 10px rgba(0,0,0,0.5);
  }
  .era-card-body{ padding:22px 24px 24px; }
  .era-card-body h4{
    font-family:'Bangers',cursive;
    font-weight:400;
    color:var(--purple-deep);
    font-size:26px;
    letter-spacing:1.5px;
    margin-bottom:10px;
    line-height:1.1;
  }
  .era-card-body p{ color:var(--ink-soft); font-size:14.5px; line-height:1.55; }

  /* Coming Soon Sales CTA */
  .classics-cta{
    margin-top:60px;
    text-align:center;
    padding:50px 40px;
    background:linear-gradient(135deg, var(--purple-soft) 0%, white 100%);
    border-radius:16px;
    border:2px dashed var(--purple);
  }
  .cta-badge{
    display:inline-block;
    background:var(--gold);
    color:var(--purple-deep);
    padding:6px 16px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:16px;
    box-shadow:0 4px 12px rgba(245,185,33,0.4);
  }
  .classics-cta h3{
    font-family:'Bangers',cursive;
    font-weight:400;
    color:var(--purple-deep);
    font-size:42px;
    letter-spacing:2px;
    margin-bottom:14px;
  }
  .classics-cta p{
    color:var(--ink-soft);
    font-size:17px;
    max-width:580px;
    margin:0 auto 24px;
    line-height:1.6;
  }

  @media (max-width:880px){
    .legacy-grid{ grid-template-columns:1fr; gap:30px; }
    .legacy-visual{ max-width:340px; margin:0 auto; }
  }


  /* ---------- CONTACT ---------- */
  #contact{ background:white; }
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:start;
  }
  .contact-info-card{
    background:var(--section-alt);
    border-radius:8px;
    padding:36px;
    border:1px solid var(--line);
  }
  .contact-info-card h3{
    font-family:'Playfair Display',serif;
    font-weight:800;
    color:var(--purple-deep);
    font-size:26px;
    margin-bottom:8px;
  }
  .contact-info-card > p{ color:var(--ink-soft); margin-bottom:24px; }
  .info-row{
    display:flex; gap:14px; align-items:flex-start;
    padding:16px 0;
    border-top:1px solid var(--line);
  }
  .info-row:first-of-type{ border-top:none; padding-top:0; }
  .info-icon{
    width:42px;height:42px;border-radius:6px;
    background:var(--purple-soft); color:var(--purple);
    display:flex;align-items:center;justify-content:center;
    font-size:18px; flex-shrink:0;
  }
  .info-row strong{ display:block; color:var(--ink); font-size:15px; margin-bottom:2px; font-weight:700; }
  .info-row span{ color:var(--ink-soft); font-size:14px; }

  form{
    background:var(--section-alt);
    border-radius:8px;
    padding:36px;
    border:1px solid var(--line);
  }
  form h3{
    font-family:'Playfair Display',serif;
    font-weight:800;
    color:var(--purple-deep);
    font-size:26px;
    margin-bottom:18px;
  }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
  label{ display:block; font-weight:600; font-size:13px; color:var(--ink); margin-bottom:6px; letter-spacing:.3px; }
  input, select, textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:6px;
    font-family:inherit;
    font-size:15px;
    background:white;
    transition:.15s;
  }
  input:focus, select:focus, textarea:focus{
    outline:none; border-color:var(--purple);
    background:white;
    box-shadow:0 0 0 3px var(--purple-soft);
  }
  textarea{ resize:vertical; min-height:120px; }
  .field{ margin-bottom:14px; }
  .form-btn{
    width:100%; margin-top:10px;
    background:var(--purple); color:white;
    padding:15px; border:none; border-radius:6px;
    font-family:inherit; font-weight:700; font-size:15px;
    letter-spacing:.5px;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(91,44,145,0.3);
    transition:.15s;
  }
  .form-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(91,44,145,0.4); }

  /* ---------- SHOP TEASER ---------- */
  .shop-teaser{
    background:linear-gradient(135deg, var(--gold) 0%, #ffd060 100%);
    border-radius:12px;
    padding:48px;
    text-align:center;
    margin-top:60px;
    position:relative;
    overflow:hidden;
  }
  .shop-teaser::before{
    content:""; position:absolute; top:-20px; right:-20px;
  }
  .shop-teaser h3{
    font-family:'Bangers',cursive;
    font-weight:400;
    color:var(--purple-deep);
    font-size:48px;
    letter-spacing:2px;
    margin-bottom:12px;
    position:relative;
  }
  .shop-teaser p{ color:var(--purple-deep); font-weight:500; margin-bottom:24px; position:relative; font-size:17px; }
  .shop-teaser .btn{ position:relative; }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--purple-deep);
    color:white;
    padding:60px 28px 24px;
    position:relative;
  }
  .foot-grid{
    max-width:1180px; margin:0 auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:40px;
    margin-bottom:40px;
  }
  .foot-brand{
    font-family:'Playfair Display',serif;
    font-weight:800;
    color:var(--gold);
    font-size:28px;
    letter-spacing:2px;
    margin-bottom:14px;
  }
  footer p{ color:rgba(255,255,255,0.75); font-size:14px; max-width:340px; }
  footer h5{ color:var(--gold); font-size:14px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px; }
  footer ul{ list-style:none; }
  footer ul li{ margin-bottom:10px; }
  footer ul a{ color:rgba(255,255,255,0.8); text-decoration:none; font-size:14px; transition:.15s; }
  footer ul a:hover{ color:var(--gold); }
  .foot-bottom{
    max-width:1180px; margin:0 auto;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.12);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
    font-size:13px; color:rgba(255,255,255,0.6);
  }
  .socials{ display:flex; gap:10px; }
  .socials a{
    width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,0.1);
    display:inline-flex; align-items:center; justify-content:center;
    color:white; text-decoration:none; transition:.2s;
  }
  .socials a:hover{ background:var(--gold); color:var(--purple-deep); }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:880px){
    .menu-btn{ display:block; }
    .nav-links{
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column;
      background:white;
      border-top:2px solid var(--line);
      padding:14px;
      display:none;
    }
    .nav-links.open{ display:flex; }
    .nav-links a{ width:100%; text-align:center; }
    .nav-socials{
      flex-direction:row;
      justify-content:center;
      border:none;
      padding:8px 0;
      margin:0;
      gap:12px;
    }
    .nav-social{ width:44px; height:44px; }
    header.hero{ padding:18px 20px 96px; }
    .hero-scene{ background-position:center 42%; }
    .hero-emblem-stage{ width:min(390px, 88vw); margin-bottom:8px; }
    .hero-sword{ height:min(390px, 60vh); }
    .about-grid, .contact-grid, .foot-grid{ grid-template-columns:1fr; }
    .form-row{ grid-template-columns:1fr; }
    section{ padding:60px 20px; }
    .foot-grid{ gap:30px; }
  }

  /* ---------- REVEAL ANIMATION ---------- */
  .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .hero-sword,.sword-impact{ display:none; }
    .hero-logo-wrap,h1.hero-title,.hero-sub,.hero-ctas{
      animation:none;
      opacity:1;
      transform:none;
    }
    .hero-scene,.hero-spotlight,.hero-stars,.btn-primary,.float{ animation:none; }
    .reveal{ opacity:1; transform:none; transition:none; }
  }
/* ---------- PAGE HEADER (inner pages) ---------- */
.page-header{
  position:relative;
  padding:80px 28px 50px;
  text-align:center;
  overflow:hidden;
  background:linear-gradient(180deg, var(--purple-soft) 0%, transparent 100%);
}
.page-header .container{ position:relative; z-index:2; }
.page-header h1{
  font-family:'Bangers',cursive;
  font-weight:400;
  font-size:clamp(44px,6vw,72px);
  color:var(--purple-deep);
  line-height:1;
  letter-spacing:2px;
  margin-bottom:14px;
}
.page-header p{
  font-size:18px;
  color:var(--ink-soft);
  max-width:640px;
  margin:0 auto;
}
@media (max-width:880px){
  .page-header{ padding:60px 20px 36px; }
}

/* Home page tiles hover */
.home-tile{
  text-decoration:none;
  padding:32px 24px;
  border-radius:12px;
  color:var(--purple-deep);
  text-align:center;
  transition:.2s;
  display:block;
  border:2px solid transparent;
}
.home-tile:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:0 12px 24px rgba(91,44,145,0.15);
}

/* Inner pages: trim top padding of first section since page-header already exists */
.page-header + section{ padding-top:40px; }

/* ---------- CLASSICS POSTER ---------- */
.legacy-poster{
  aspect-ratio:3/4;
  padding:0;
  background:#0e0820;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 25px 50px rgba(91,44,145,0.4), 0 0 0 5px white, 0 0 0 8px var(--gold);
  position:relative;
}
.legacy-poster::after{ display:none; }
.legacy-poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- ICON SIZING (emoji replacements) ---------- */
.socials svg{ width:18px; height:18px; }
.info-icon svg{ width:20px; height:20px; }
.menu-btn svg{ width:26px; height:26px; display:block; }

/* ---------- SHOP / CATALOG ---------- */
#shop{ background:white; }
.shop-layout{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:48px;
  align-items:start;
}
.shop-sidebar{ position:sticky; top:96px; }
.sidebar-title{
  font-family:'Bangers',cursive;
  font-weight:400;
  font-size:26px;
  letter-spacing:1.5px;
  color:var(--purple-deep);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:3px solid var(--gold);
}
.cat-list{ list-style:none; padding:0; margin:0 0 40px; }
.cat-list li{ margin-bottom:2px; }
.cat-btn{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  font-family:'Source Sans 3',sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--purple);
  padding:9px 12px;
  border-radius:6px;
  cursor:pointer;
  transition:.15s;
}
.cat-btn:hover{ background:var(--purple-soft); }
.cat-btn.is-active{
  background:var(--purple);
  color:white;
}
.popular-list{ list-style:none; padding:0; margin:0; }
.popular-list li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.popular-list li:last-child{ border-bottom:none; }
.pop-thumb{
  width:60px; height:72px;
  flex-shrink:0;
  border-radius:6px;
  background:#fff;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.pop-thumb img{ width:100%; height:100%; object-fit:contain; }
.pop-name{
  font-size:14px;
  font-weight:600;
  color:var(--purple);
  line-height:1.3;
}

.shop-count{
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:20px;
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:26px;
}
.product-card{
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:.25s;
  box-shadow:0 2px 10px rgba(91,44,145,0.05);
}
.product-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 36px rgba(91,44,145,0.16);
  border-color:var(--gold);
}
.product-media{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:3/4;
  background:linear-gradient(170deg, #ffffff 0%, #f2eefa 100%);
  padding:14px;
  border-bottom:1px solid var(--line);
}
.product-media img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:3px;
  filter:drop-shadow(0 8px 18px rgba(26,18,48,0.28));
}
/* graceful fallback when a product photo hasn't been added yet */
.product-media.no-img::after{
  content:"Add product photo";
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--purple);
  opacity:.5;
}
.product-body{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.product-tag{
  align-self:flex-start;
  background:var(--gold);
  color:var(--purple-deep);
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:3px;
  margin-bottom:10px;
}
.product-body h4{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:18px;
  color:var(--purple-deep);
  line-height:1.25;
  margin-bottom:8px;
}
.product-body p{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.5;
  margin-bottom:16px;
  flex:1;
}
.buy-btn{
  display:block;
  text-align:center;
  text-decoration:none;
  background:var(--purple);
  color:white;
  font-weight:800;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:12px;
  border-radius:6px;
  transition:.15s;
}
.buy-btn:hover{ background:var(--purple-deep); }

@media (max-width:880px){
  .shop-layout{ grid-template-columns:1fr; gap:32px; }
  .shop-sidebar{ position:static; }
  .cat-list{ display:flex; gap:8px; margin-bottom:28px; }
  .cat-btn{ text-align:center; }
}

.all-merch-btn{
  display:block;
  text-align:center;
  text-decoration:none;
  background:var(--gold);
  color:var(--purple-deep);
  font-weight:800;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:12px 10px;
  border-radius:6px;
  margin:0 0 36px;
  transition:.15s;
}
.all-merch-btn:hover{ background:#ffd060; transform:translateY(-2px); }
.popular-list a{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.popular-list a:hover .pop-name{ color:var(--purple-deep); text-decoration:underline; }

/* ---------- KIDS ZONE ---------- */
#kids-zone{ background:white; }
.how-to{
  background:var(--section-alt);
  border:1px solid var(--line);
  border-left:4px solid var(--gold);
  border-radius:10px;
  padding:26px 30px;
  margin-bottom:36px;
}
.how-to h3{
  font-family:'Bangers',cursive;
  font-weight:400;
  font-size:26px;
  letter-spacing:1.5px;
  color:var(--purple-deep);
  margin-bottom:12px;
}
.how-to ol{ margin:0; padding-left:20px; }
.how-to li{ color:var(--ink-soft); font-size:15px; margin-bottom:7px; line-height:1.55; }

.craft-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}
.craft-card{
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transition:.25s;
  box-shadow:0 2px 10px rgba(91,44,145,0.05);
}
.craft-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 36px rgba(91,44,145,0.16);
  border-color:var(--gold);
}
.craft-media{
  aspect-ratio:1/1;
  background:
    radial-gradient(circle at 50% 80%, rgba(245,185,33,0.35) 0%, transparent 55%),
    linear-gradient(180deg, #2a1654 0%, #5B2C91 100%);
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
}
.craft-media img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.craft-body{ padding:18px 20px 20px; text-align:center; }
.craft-body h4{
  font-family:'Bangers',cursive; font-weight:400;
  font-size:26px; letter-spacing:1.5px;
  color:var(--purple-deep); margin-bottom:6px;
}
.craft-body p{ color:var(--ink-soft); font-size:14px; margin-bottom:14px; line-height:1.5; }

.color-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:22px;
}
.color-card{
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transition:.25s;
  box-shadow:0 2px 10px rgba(91,44,145,0.05);
}
.color-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(91,44,145,0.14);
  border-color:var(--gold);
}
.color-media{
  aspect-ratio:8.5/11;
  background:
    repeating-linear-gradient(45deg, #faf7ff 0 12px, #f3edfb 12px 24px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  border-bottom:1px solid var(--line);
}
.color-media span{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:17px;
  color:var(--purple);
  text-align:center;
  line-height:1.3;
  opacity:.75;
}
.color-body{ padding:16px 18px 18px; text-align:center; }
.color-body h4{
  font-family:'Playfair Display',serif; font-weight:700;
  font-size:16px; color:var(--purple-deep); margin-bottom:12px;
}
.dl-btn{
  display:block;
  text-align:center;
  text-decoration:none;
  background:var(--purple);
  color:white;
  font-weight:800;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:11px;
  border-radius:6px;
  transition:.15s;
}
.dl-btn:hover{ background:var(--purple-deep); }

/* ---------- FOR PARENTS ---------- */
#parents-intro{ background:white; }
.parents-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:50px;
  align-items:center;
}
.parents-text p{ color:var(--ink-soft); font-size:17px; margin-bottom:16px; line-height:1.65; }
.parents-text p strong{ color:var(--purple); }
.parents-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.parents-visual{
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 45px rgba(91,44,145,0.28), 0 0 0 5px white, 0 0 0 7px var(--gold);
}
.parents-visual img{ width:100%; height:100%; display:block; object-fit:cover; }

#episode-guide{ background:var(--section-alt); }
.ep-filter{ margin-bottom:26px; max-width:420px; }
.ep-filter label{
  display:block; font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:6px;
}
.ep-filter input{
  width:100%; padding:12px 14px;
  border:1px solid var(--line); border-radius:8px;
  font-family:inherit; font-size:15px; background:white;
}
.ep-filter input:focus{
  outline:none; border-color:var(--purple);
  box-shadow:0 0 0 3px var(--purple-soft);
}
.ep-list{ display:flex; flex-direction:column; gap:10px; }
.ep-item{
  background:white;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.ep-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 18px;
  background:var(--section-alt);
  border-bottom:1px solid transparent;
  transition:.15s;
}
.ep-item summary::-webkit-details-marker{ display:none; }
.ep-item summary::before{
  content:"+";
  flex-shrink:0;
  font-size:19px;
  font-weight:700;
  line-height:1.25;
  color:var(--purple);
  width:14px;
}
.ep-item[open] summary::before{ content:"\2013"; }
.ep-item[open] summary{ border-bottom-color:var(--line); }
.ep-item summary:hover{ background:var(--purple-soft); }
.ep-sum{
  font-family:'Source Sans 3',sans-serif;
  font-weight:700;
  font-size:17px;
  color:var(--purple-deep);
  line-height:1.35;
}
.ep-sum .ep-n{ color:var(--purple-deep); }
.ep-sum em{
  font-style:italic;
  font-weight:600;
  color:var(--ink-soft);
}
.ep-content{ padding:18px 22px 20px 44px; }
.ep-content p{
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
  margin-bottom:14px;
}
.ep-meta-line{
  font-size:15px !important;
  color:var(--ink) !important;
  margin-bottom:0 !important;
}
.ep-meta-line strong{ color:var(--gold); font-weight:800; }
.ep-tools{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom:26px;
}
.ep-tool-btn{
  background:white;
  border:1px solid var(--line);
  border-radius:6px;
  padding:9px 16px;
  font-family:'Source Sans 3',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--purple);
  cursor:pointer;
  transition:.15s;
}
.ep-tool-btn:hover{ background:var(--purple-soft); border-color:var(--purple); }
.ep-empty{ text-align:center; color:var(--ink-soft); padding:30px 0; }

@media (max-width:880px){
  .parents-grid{ grid-template-columns:1fr; gap:28px; }
  .ep-content{ padding:16px 18px 18px 20px; }
  .ep-sum{ font-size:16px; }
}

/* Kids Zone: PDF sheet thumbnails */
.sheet-media{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:8.5/11;
  text-decoration:none;
  background:
    radial-gradient(circle at 50% 30%, rgba(245,185,33,0.28) 0%, transparent 60%),
    linear-gradient(180deg, #2a1654 0%, #5B2C91 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  transition:.25s;
}
.sheet-media::before{
  content:"";
  position:absolute; inset:12px;
  border:2px dashed rgba(255,255,255,0.22);
  border-radius:6px;
}
.sheet-media:hover{ filter:brightness(1.12); }
.sheet-num{
  font-family:'Bangers',cursive;
  font-size:64px;
  letter-spacing:2px;
  color:white;
  text-shadow:0 4px 18px rgba(0,0,0,0.45);
  line-height:1;
}
.sheet-kind{
  position:absolute;
  bottom:14px;
  background:var(--gold);
  color:var(--purple-deep);
  font-size:10px; font-weight:800;
  letter-spacing:2px;
  padding:4px 10px;
  border-radius:3px;
}
.sheet-media.sheet-light{
  background:
    repeating-linear-gradient(45deg, #faf7ff 0 12px, #f3edfb 12px 24px);
}
.sheet-media.sheet-light::before{ border-color:rgba(91,44,145,0.22); }
.sheet-media.sheet-light .sheet-num{
  color:var(--purple);
  text-shadow:none;
  opacity:.8;
}

/* Kids Zone: real PDF preview thumbnails */
.sheet-media.has-thumb{
  background:#ffffff;
  padding:10px;
}
.sheet-media.has-thumb::before{ display:none; }
.craft-card .sheet-media.has-thumb{ aspect-ratio:5/4; }
.color-card .sheet-media.has-thumb{ aspect-ratio:4/5; }
.sheet-media.has-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition:transform .25s ease;
}
.sheet-media.has-thumb:hover img{ transform:scale(1.04); }
.sheet-media.has-thumb .sheet-kind{
  bottom:8px;
  right:8px;
  left:auto;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}