:root{--radius:26px}

.hero{position:relative;background:var(--coral);color:#fff;padding:56px 0 110px;overflow:hidden}
.crumbs{font-weight:700;opacity:.9;font-size:.9rem}
.hero h1{font-size:clamp(3rem,9vw,6rem);font-weight:800;margin:10px 0 12px}
.hero h1 em{font-style:normal;background:var(--sun);color:var(--ink);padding:0 .22em;border-radius:.3em;display:inline-block;transform:rotate(-3deg);margin-left:.1em}
.hero p{font-size:1.15rem;max-width:34em;opacity:.97}
.hero .stats{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.chip{background:#fff;color:var(--ink);font-weight:800;padding:8px 18px;border-radius:999px;border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-size:.92rem}
.sun{position:absolute;right:-60px;top:-60px;width:320px;height:320px;border-radius:50%;background:var(--sun);animation:spin 40s linear infinite}
.sun::after{content:"📖";position:absolute;inset:0;display:grid;place-items:center;font-size:7rem;animation:spin 40s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.wave{position:absolute;bottom:-1px;left:0;width:100%;height:70px}

/* next lesson box (sits over the hero wave) */
.next{margin-top:-52px;position:relative;z-index:5;background:#fff;border:3px solid var(--ink);border-radius:30px;box-shadow:0 9px 0 var(--ink);padding:24px 28px;display:grid;grid-template-columns:auto 1fr auto;gap:18px 26px;align-items:center}
.nd{background:var(--c);color:var(--fg,var(--ink));border:3px solid var(--ink);border-radius:20px;padding:6px 18px;text-align:center;transform:rotate(-4deg);min-width:96px}
.nd small{display:block;font-weight:800;letter-spacing:.14em;font-size:.78rem}
.nd b{display:block;font-family:var(--font-display);font-size:2.8rem;line-height:1}
.tag{display:inline-block;background:var(--sun);font-weight:800;padding:3px 14px;border-radius:999px;border:2px solid var(--ink);font-size:.78rem;margin-bottom:6px}
.ni h2{font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:800}
.ni p{color:var(--muted);font-weight:700}
.na{display:flex;flex-direction:column;gap:10px}
.na .open{text-align:center;font-weight:800;padding:11px 20px;border-radius:999px;border:2px solid var(--ink);background:var(--sun);box-shadow:0 5px 0 var(--ink);transition:.15s}
.na .open:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.na button{font:inherit;font-weight:800;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:999px;padding:8px 16px;cursor:pointer;transition:.15s}
.na button:hover{background:#fff3d6}
.card.is-next{outline:4px solid var(--sun);outline-offset:4px}
.nx{position:absolute;top:-14px;right:18px;background:var(--sun);border:3px solid var(--ink);border-radius:14px;padding:0 10px;font-family:var(--font-display);font-weight:800;font-size:.95rem}
@media(max-width:760px){.next{grid-template-columns:1fr;text-align:center;justify-items:center;padding:22px 18px}.na{width:100%}}

.tools{margin-top:26px;position:relative;z-index:5;display:flex}
.search{flex:1 1 280px;display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:6px 20px;box-shadow:0 6px 0 var(--ink)}
.search input{flex:1;border:0;outline:0;font:inherit;font-weight:700;padding:10px 0;background:transparent;color:var(--ink);min-width:0}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.filters button{font:inherit;font-weight:800;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:9px 16px;cursor:pointer;transition:.15s;color:var(--ink)}
.filters button i{font-style:normal;font-size:.78rem;background:#fff3d6;border:2px solid var(--ink);border-radius:999px;padding:0 8px;margin-left:4px;color:var(--ink)}
.filters button:hover{background:#fff3d6}
.filters button.on{background:var(--grape);color:#fff;box-shadow:0 4px 0 var(--accent-deep)}

.count{margin:26px 0 0;font-weight:800;color:var(--muted)}
main{padding-bottom:80px}

/* one section per topic */
.topic{margin-top:30px}
.thead{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;background:var(--c);color:var(--fg,var(--ink));border:3px solid var(--ink);border-radius:24px;padding:18px 24px;box-shadow:0 6px 0 var(--ink);margin-bottom:30px}
.thead div{flex:1 1 300px}
.thead h2{font-size:1.9rem;font-weight:800}
.thead .n{background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:4px 14px;font-weight:800;font-size:.85rem;white-space:nowrap}
.t-god-is{--c:var(--coral);--fg:#fff}
.t-gods-creation{--c:var(--sky)}
.t-proper-humanity{--c:var(--peach)}
.t-character{--c:var(--mint)}
.t-ten-commandments{--c:var(--grape);--fg:#fff}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px 20px}
.card{position:relative;background:#fff;border:3px solid var(--ink);border-radius:var(--radius);padding:22px 22px 24px;box-shadow:0 8px 0 var(--ink);display:flex;flex-direction:column;gap:12px;transition:.18s}   /* height: its content; cards in a row match the tallest */
.card:hover{transform:translateY(5px) rotate(-.6deg);box-shadow:0 3px 0 var(--ink)}
.num{position:absolute;top:-14px;left:18px;font-family:var(--font-display);font-weight:800;color:#fff;border:3px solid var(--ink);border-radius:14px;padding:0 12px;font-size:1.05rem}
.card h3{font-size:1.45rem;font-weight:800;flex:1;margin-top:10px}
.meta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.date{font-size:1rem;font-weight:800;color:var(--muted);white-space:nowrap}
.pdf{display:inline-flex;gap:6px;align-items:center;font-weight:800;font-size:.85rem;padding:7px 14px;border-radius:999px;background:var(--sun);border:2px solid var(--ink)}
.card:hover .pdf{background:var(--mint)}
.empty{text-align:center;padding:60px 0;font-size:1.2rem;font-weight:700;color:var(--muted);display:none}

footer{background:var(--ink);color:#d9d4ff;padding:36px 0;text-align:center;font-size:.9rem}
.reveal{animation:pop .5s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.96)}}
@media(max-width:640px){.sun{width:200px;height:200px;opacity:.55}.thead{padding:16px 18px}.thead h2{font-size:1.6rem}}
/* "Save offline" tab on each card's bottom edge (css/site.css): room for it between rows */
.grid:has(.has-offl){row-gap:40px}
.na button.offl{padding:8px 16px;font-size:.9rem}