/* Magic Creators Club - shared styles (mobile-first) for nav, footer, cookie, and subpages */
@font-face{font-family:"Brasika";src:url("assets/brasika-display.woff2") format("woff2"),url("assets/brasika-display.otf") format("opentype"),local("Brasika"),local("Brasika Display");font-display:swap}
@font-face{font-family:"Champagne & Limousines";src:local("Champagne & Limousines");font-display:swap}

:root{
  --navy:#121954;--cloud:#FFF8F5;--cream:#FFFAEC;--mint:#DCEFD9;--sky:#B8DDFF;--blush:#FCD6E4;
  --white:#fff;--ink:#121954;--muted:#5a5f86;
  --display:"Brasika", Georgia, "Times New Roman", serif;
  --body:"Champagne & Limousines","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--cloud);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.display{font-family:var(--display)}
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 20px}

/* shared top nav (subpages) */
.topnav{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1140px;margin:0 auto;padding:14px 20px;position:relative;z-index:6;flex-wrap:wrap}
.topnav .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.15rem;color:var(--navy);text-decoration:none}
.topnav .brand img{width:42px;height:42px;border-radius:12px;object-fit:cover;box-shadow:0 6px 16px rgba(18,25,84,.14)}
.topnav .links{display:flex;gap:18px;font-size:.95rem;flex-wrap:wrap}
.topnav .links a{text-decoration:none;color:var(--navy);opacity:.82}
.topnav .links a:hover,.topnav .links a[aria-current="page"]{opacity:1;text-decoration:underline}
.topnav .navcta{background:var(--navy);color:#fff;padding:10px 20px;border-radius:30px;font-size:.9rem;font-weight:700;text-decoration:none}
@media (max-width:640px){.topnav{justify-content:center;text-align:center}.topnav .links{justify-content:center;gap:14px;width:100%;order:3}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--navy);color:#fff;border:none;
  padding:15px 30px;border-radius:32px;font-size:1.02rem;font-weight:700;text-decoration:none;font-family:var(--body);cursor:pointer;
  transition:transform .15s,box-shadow .15s;min-height:48px}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(18,25,84,.24)}
.btn.blush{background:var(--blush);color:var(--navy)}

/* generic page header band */
.pagehead{background:linear-gradient(180deg,#EAF2FF 0%,#F4E6FB 55%,#FFFAEC 100%);padding:46px 20px 40px;text-align:center}
.pagehead .eyebrow{font-size:.74rem;letter-spacing:3px;text-transform:uppercase;color:#8b91b8;font-weight:700;margin-bottom:8px}
.pagehead h1{font-family:var(--display);color:var(--navy);font-size:clamp(2rem,6vw,3.2rem);line-height:1.05}
.pagehead p{color:var(--muted);max-width:620px;margin:14px auto 0;font-size:1.05rem}

/* legal / article reading column */
.reading{max-width:780px;margin:0 auto;padding:44px 20px 20px}
.reading h2{font-family:var(--display);color:var(--navy);font-size:1.4rem;margin:30px 0 8px}
.reading h3{color:var(--navy);font-size:1.05rem;margin:18px 0 6px}
.reading p,.reading li{color:#3b3f63;font-size:1rem;margin-bottom:10px}
.reading ul{padding-left:22px;margin-bottom:10px}
.reading a{color:#b8458a}
.reading .updated{color:var(--muted);font-size:.9rem;margin-bottom:8px}
.reading .note{background:var(--cream);border-radius:16px;padding:16px 18px;font-size:.95rem;color:#3b3f63;margin:18px 0}

/* contact */
.contact-wrap{max-width:680px;margin:0 auto;padding:40px 20px 10px}
.contact-card{background:#fff;border-radius:24px;padding:30px 24px;box-shadow:0 16px 44px rgba(18,25,84,.08)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-weight:700;font-size:.9rem;color:var(--navy)}
.field input,.field textarea{width:100%;padding:14px 16px;border:1px solid rgba(18,25,84,.16);border-radius:14px;font-size:1rem;font-family:inherit;color:var(--navy);background:#fff}
.field input:focus,.field textarea:focus{outline:none;box-shadow:0 0 0 3px var(--sky)}
.field textarea{min-height:140px;resize:vertical}
.contact-alt{text-align:center;color:var(--muted);margin-top:22px;font-size:.95rem}
.contact-alt a{color:#b8458a;font-weight:700}

/* The Storybook */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:900px;margin:0 auto 30px;padding:0 20px}
.chip{border:1px solid rgba(18,25,84,.18);background:#fff;color:var(--navy);border-radius:30px;padding:9px 18px;font-size:.9rem;font-weight:700;cursor:pointer;min-height:42px}
.chip[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.chapters{display:grid;grid-template-columns:1fr;gap:22px;max-width:1080px;margin:0 auto;padding:0 20px 10px}
@media (min-width:620px){.chapters{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.chapters{grid-template-columns:1fr 1fr 1fr}}
.chapcard{display:flex;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;text-decoration:none;color:var(--navy);
  box-shadow:0 12px 34px rgba(18,25,84,.08);transition:transform .2s,box-shadow .2s}
.chapcard:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(18,25,84,.14)}
.chapcard .cover{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:2.4rem}
.chapcard .cover.cat-about{background:var(--blush)}
.chapcard .cover.cat-behind{background:var(--sky)}
.chapcard .cover.cat-tips{background:var(--mint)}
.chapcard .body{padding:20px 20px 24px}
.chapcard .tag{display:inline-block;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:#8b91b8;margin-bottom:8px}
.chapcard .num{font-family:var(--display);color:#b8458a;font-size:.95rem}
.chapcard h3{font-family:var(--display);font-size:1.4rem;line-height:1.1;margin:2px 0 8px;color:var(--navy)}
.chapcard p{color:#3b3f63;font-size:.95rem}
.empty{text-align:center;color:var(--muted);padding:30px;display:none}

/* chapter (single) */
.chapter{max-width:740px;margin:0 auto;padding:34px 20px 10px}
.chapter .meta{color:var(--muted);font-size:.88rem;margin-bottom:6px}
.chapter h1{font-family:var(--display);color:var(--navy);font-size:clamp(2rem,6.5vw,3rem);line-height:1.06;margin-bottom:10px}
.chapter .lede{font-size:1.12rem;color:#3b3f63;margin:8px 0 22px}
.chapter .cover{border-radius:22px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:3rem;margin-bottom:26px}
.chapter p{color:#2f3358;font-size:1.05rem;margin-bottom:16px}
.chapter h2{font-family:var(--display);color:var(--navy);font-size:1.5rem;margin:26px 0 8px}
.chapter blockquote{margin:22px 0;padding:14px 20px;border-left:4px solid var(--blush);background:var(--cream);border-radius:0 14px 14px 0;font-size:1.08rem;color:#2f3358}
.chapnav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:740px;margin:30px auto 0;padding:0 20px}
.chapnav a{text-decoration:none;font-weight:700;color:var(--navy);background:#fff;border-radius:16px;padding:12px 18px;box-shadow:0 8px 22px rgba(18,25,84,.08)}

/* shared footer */
.sitefooter{text-align:center;padding:48px 20px 40px;color:#9aa0c2;font-size:.85rem;background:var(--cloud)}
.sitefooter .flogo{width:60px;height:60px;border-radius:16px;object-fit:cover;box-shadow:0 8px 20px rgba(18,25,84,.12);margin:0 auto 12px}
.sitefooter .fbrand{font-family:var(--display);color:var(--navy);font-size:1.25rem;margin-bottom:4px}
.sitefooter .socials{display:flex;gap:14px;justify-content:center;margin:16px 0}
.sitefooter .socials a{width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(18,25,84,.1);text-decoration:none}
.sitefooter .socials svg{width:22px;height:22px;fill:var(--navy)}
.sitefooter .socials a:hover{transform:translateY(-2px)}
.sitefooter .flinks{display:flex;gap:8px 18px;justify-content:center;flex-wrap:wrap;margin:14px 0 6px}
.sitefooter .flinks a,.sitefooter .flinks button{color:var(--navy);opacity:.8;text-decoration:none;font-size:.9rem;background:none;border:none;cursor:pointer;font-family:inherit;padding:6px 4px;min-height:40px}
.sitefooter .flinks a:hover,.sitefooter .flinks button:hover{opacity:1;text-decoration:underline}
.sitefooter .addr{font-size:.8rem;color:#a7adca;margin-top:8px;line-height:1.5}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}