:root{
  --bg:#0c1016; --bg2:#11161f; --card:#151c27; --line:#24303f;
  --ink:#e7edf5; --dim:#9aa8bb; --faint:#67788e;
  --cyan:#09add3; --cyan-dim:#0a8bab;
  --cr:#c084fc; --ae:#5db4ff; --ws:#e0a458;
  --maxw:1040px;

  /* type palette */
  --t-fire:#ff6b4a; --t-water:#4aa8ff; --t-ice:#7fe0ea; --t-electric:#ffd24a;
  --t-earth:#c08a5a; --t-wind:#8fe0c8; --t-holy:#ffe38a; --t-nature:#6fd06f;
  --t-death:#b98cff; --t-arcane:#ff8ce0; --t-none:#8595a8;
  /* grade palette */
  --g-mundane:#9aa8bb; --g-attuned:#6fd06f; --g-empowered:#5db4ff; --g-ascendant:#e0a458;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
code{background:#0a0e14;border:1px solid var(--line);border-radius:5px;
  padding:.12em .45em;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.92em;color:#cbe7f0}

/* top nav */
nav.top{position:sticky;top:0;z-index:20;background:rgba(12,16,22,.86);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:20px;height:52px}
nav.top .brand{font-weight:700;color:var(--ink)}
nav.top .brand .cy{color:var(--cyan)}
nav.top a.lnk{color:var(--dim);font-size:.95rem}
nav.top a.lnk:hover{color:var(--cyan);text-decoration:none}
nav.top .sp{flex:1}

/* hero */
header.hero{
  text-align:center;padding:64px 20px 48px;
  background:radial-gradient(1000px 380px at 50% -60px,rgba(9,173,211,.16),transparent 70%);
  border-bottom:1px solid var(--line);
}
.hero h1{font-size:clamp(2rem,6vw,3.2rem);margin:0 0 .1em;letter-spacing:-.02em}
.hero .cy{color:var(--cyan)}
.hero p.tag{color:var(--dim);font-size:1.12rem;margin:.3em auto 0;max-width:640px}

section{padding:48px 0 8px}
h2{font-size:1.5rem;margin:0 0 .2em;letter-spacing:-.01em}
h2 .mk{color:var(--cyan);font-weight:700}
.lead{color:var(--dim);margin:.2em 0 1.5em;max-width:720px}

.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.card h3{margin:0 0 .35em;font-size:1.15rem;display:flex;align-items:center;gap:.5em}
.card p{margin:.3em 0;color:var(--dim)}
.card ul{margin:.4em 0 0;padding-left:1.1em;color:var(--dim)}
.card ul li{margin:.2em 0}

.pill{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.2em .6em;border-radius:100px;white-space:nowrap}
.pill.soon{background:rgba(224,164,88,.12);color:var(--ws);border:1px solid #6a5330}
.pill.live{background:rgba(9,173,211,.15);color:var(--cyan);border:1px solid var(--cyan-dim)}

/* badges (types / grades / form) */
.badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.badge{font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:.16em .55em;
  border-radius:6px;border:1px solid;white-space:nowrap}
.fm{color:var(--dim);border-color:var(--line);background:#0a0e14;text-transform:uppercase;font-size:.68rem;letter-spacing:.05em}
.gr{background:#0a0e14}
.gr-mundane{color:var(--g-mundane);border-color:#3a4658}
.gr-attuned{color:var(--g-attuned);border-color:#2f5a2f}
.gr-empowered{color:var(--g-empowered);border-color:#2b4d70}
.gr-ascendant{color:var(--g-ascendant);border-color:#6a5330}
.ty{background:#0a0e14}
.ty-fire{color:var(--t-fire);border-color:#5c3226}
.ty-water{color:var(--t-water);border-color:#264a6a}
.ty-ice{color:var(--t-ice);border-color:#2c5860}
.ty-electric{color:var(--t-electric);border-color:#5c5226}
.ty-earth{color:var(--t-earth);border-color:#5a4432}
.ty-wind{color:var(--t-wind);border-color:#2f5a4e}
.ty-holy{color:var(--t-holy);border-color:#5c5230}
.ty-nature{color:var(--t-nature);border-color:#2f5a2f}
.ty-death{color:var(--t-death);border-color:#463466}
.ty-arcane{color:var(--t-arcane);border-color:#5c3450}
.ty-none{color:var(--t-none);border-color:#3a4658}
.cond{color:var(--ws);border-color:#5a4a2a;background:#0a0e14}
.fac{color:#ffcf8a;border-color:#6a5330;background:#1c1710;font-weight:700}

/* domain/type legend chips */
.chip{display:inline-flex;align-items:center;gap:.4em;font-size:.85rem;color:var(--dim);
  background:var(--card);border:1px solid var(--line);border-radius:100px;padding:.25em .7em}
.dot{width:.7em;height:.7em;border-radius:50%;display:inline-block}

/* spell list */
.filters{position:sticky;top:52px;z-index:10;background:rgba(12,16,22,.92);
  backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin:8px 0 20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filters input[type=search]{flex:1 1 200px;min-width:160px;background:#0a0e14;border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:.5em .7em;font-size:.95rem}
.filters select{background:#0a0e14;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:.5em .6em;font-size:.9rem}
.filters .count{color:var(--faint);font-size:.85rem;margin-left:auto}
.filters button.clear{background:#0a0e14;border:1px solid var(--line);color:var(--dim);
  border-radius:8px;padding:.5em .8em;font-size:.85rem;cursor:pointer}
.filters button.clear:hover{color:var(--cyan);border-color:var(--cyan-dim)}

.schoolhead{margin:34px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:.6em}
.schoolhead h3{margin:0;font-size:1.25rem}
.schoolhead .sub{color:var(--faint);font-size:.9rem}

.spells{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start}
.spell{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:16px 18px}
.spell h4{margin:0;font-size:1.14rem;letter-spacing:-.01em}
.spell .sub{font-style:italic;color:var(--faint);font-size:.9rem;
  margin:.1em 0 .7em;padding-bottom:.6em;border-bottom:1px solid var(--line)}
dl.stat{display:grid;grid-template-columns:max-content 1fr;gap:.22em .9em;margin:0 0 .75em;font-size:.9rem}
dl.stat dt{color:var(--faint);font-weight:600}
dl.stat dd{margin:0;color:var(--ink)}
dl.stat dd.fac-v{color:#ffcf8a;font-weight:600}
.spell .desc{color:var(--dim);margin:0;font-size:.93rem;line-height:1.55}
/* text-color helpers (types & grades) */
.tc-fire{color:var(--t-fire)}.tc-water{color:var(--t-water)}.tc-ice{color:var(--t-ice)}
.tc-electric{color:var(--t-electric)}.tc-earth{color:var(--t-earth)}.tc-wind{color:var(--t-wind)}
.tc-holy{color:var(--t-holy)}.tc-nature{color:var(--t-nature)}.tc-death{color:var(--t-death)}
.tc-arcane{color:var(--t-arcane)}.tc-none{color:var(--t-none)}
.gc-mundane{color:var(--g-mundane)}.gc-attuned{color:var(--g-attuned)}
.gc-empowered{color:var(--g-empowered)}.gc-ascendant{color:var(--g-ascendant)}
.noresult{color:var(--faint);text-align:center;padding:40px 0}

footer{margin-top:56px;border-top:1px solid var(--line);padding:28px 20px 48px;
  text-align:center;color:var(--faint);font-size:.9rem}
.callout{background:linear-gradient(180deg,rgba(9,173,211,.08),transparent);
  border:1px solid var(--cyan-dim);border-radius:12px;padding:22px 24px;text-align:center;margin-top:10px}
.callout a.btn{display:inline-block;margin-top:.6em;background:var(--cyan);color:#04222b;
  font-weight:700;padding:.6em 1.3em;border-radius:9px}
.callout a.btn:hover{text-decoration:none;filter:brightness(1.08)}