/* Spell Sigils: the symbol atlas (atlas.html), after base.css. A grid of cards, one per symbol */
:root{--measure:1180px; --card:#0e101c; --line-soft:#1a1d2e; --accent-dim:#4e7ba8;}
header{margin-bottom:56px;}
.eyebrow{font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dim);}
.doc h1{margin-top:.5em;} /* under the eyebrow */

section{margin-bottom:64px;}
.section-head{display:flex; align-items:baseline; gap:16px; border-bottom:1px solid var(--line); padding-bottom:14px;}
.section-head h2{font-family:'Cinzel', serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:1.05rem; margin:0;}
.count{font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.78rem; color:var(--ink-faint); margin-left:auto;}
.section-note{font-style:italic; color:var(--ink-dim); font-size:.92rem; margin:12px 0 28px; max-width:72ch;}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:14px;}
.card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:8px; padding:14px 10px 12px;
  display:flex; flex-direction:column; align-items:center; gap:8px; transition:border-color .15s, background .15s;
}
.card:hover{border-color:var(--accent-dim); background:#101322;}
.card svg.big{width:56px; height:56px; overflow:visible; filter:drop-shadow(0 0 3px var(--glow, transparent));}
.stations{display:flex; gap:6px;}
.stations svg{width:30px; height:30px;}
.label{font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.72rem; color:var(--ink); text-align:center; word-break:break-word; line-height:1.3;}
.note{font-size:.82rem; color:var(--ink-dim); text-align:center; line-height:1.25;}

.trad-block{margin-bottom:30px;}
.trad-head{font-family:'Cinzel', serif; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; margin:0 0 12px; display:flex; align-items:baseline; gap:10px; color:var(--trad);}
.trad-count{font-family:'JetBrains Mono', ui-monospace, monospace; font-weight:400; letter-spacing:0; text-transform:none; font-size:.72rem; color:var(--ink-faint);}

footer{text-align:center; color:var(--ink-faint); font-style:italic; font-size:.85rem; margin-top:40px;}
footer code{font-family:'JetBrains Mono', ui-monospace, monospace; font-style:normal; color:var(--ink-dim);}
@media (max-width:640px){ .grid{grid-template-columns:repeat(auto-fill, minmax(108px, 1fr));} }
/* on paper the page turns light but the cards stay dark, so each symbol shows as it does in a glowing
   sigil; a tradition's heading takes its parchment ink, which js/atlas.js sets beside its bright colour */
@media (prefers-color-scheme:light){
  .card{color-scheme:dark; --ink:#d8dae8; --ink-dim:#8388a8;}
  .trad-head{color:var(--trad-ink);}
}