:root{
  --bg: #0b0e13;
  --panel: #0e121a;
  --ink: #e7eef7;
  --mute: #a7b2c2;
  --accent: #6fe7ff;
  --accent-2: #b892ff;
  --glow: 0 0 24px rgba(111,231,255,.35), 0 0 64px rgba(184,146,255,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height:1.5; overflow-x:hidden;
}
.bg-stars{
  position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(111,231,255,.06), transparent 60%),
              radial-gradient(900px 600px at 120% 10%, rgba(184,146,255,.05), transparent 55%),
              radial-gradient(1000px 800px at 50% 120%, rgba(111,231,255,.04), transparent 60%);
  filter:saturate(110%);
}
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; position:sticky; top:0; z-index:10; backdrop-filter: blur(6px);
  background: linear-gradient(to bottom, rgba(11,14,19,.85), rgba(11,14,19,.35) 70%, transparent);
  border-bottom:1px solid rgba(111,231,255,.08);
}
.brand{display:flex; align-items:center; gap:12px}
.brand h1{font-family:Cinzel, serif; letter-spacing:.5px; font-weight:700; margin:0}
.brand .thin{font-weight:500; opacity:.8}
.brand-glyph{display:grid;place-items:center; width:34px;height:34px; border-radius:50%;
  background: linear-gradient(135deg, rgba(111,231,255,.25), rgba(184,146,255,.25));
  box-shadow: var(--glow); animation: spin 12s linear infinite;
}
@keyframes spin{to{transform: rotate(360deg)}}
.nav a{color:var(--ink); text-decoration:none; margin-left:16px; opacity:.88}
.nav a:hover{opacity:1; text-shadow: var(--glow)}
.nav .nav-pill{
  border:1px solid rgba(111,231,255,.25); border-radius:999px; padding:6px 12px; margin-left:22px;
  background: linear-gradient(180deg, rgba(111,231,255,.08), rgba(184,146,255,.08));
}
.container{max-width:1100px; margin:0 auto; padding:24px}
.hero{padding:40px 8px 16px}
.hero h2{font-size:clamp(22px, 4vw, 32px); margin:0 0 8px; font-weight:800; letter-spacing:.2px}
.hero .lede{color:var(--mute); max-width:70ch}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px; padding:16px 0 56px}
.sigil-card{position:relative; display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(111,231,255,.14); border-radius:18px; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sigil-card:hover{transform: translateY(-4px) scale(1.01); box-shadow: var(--glow); border-color: rgba(111,231,255,.35)}
.sigil-frame{aspect-ratio: 16/9; background: radial-gradient(100% 80% at 50% 10%, rgba(111,231,255,.08), transparent);
  display:grid; place-items:center; overflow:hidden}
.sigil-frame img{max-width:66%; filter: drop-shadow(0 6px 24px rgba(111,231,255,.25)); transform: translateZ(0)}
.sigil-meta{padding:16px 16px 18px}
.sigil-meta h3{margin:0 0 6px; font-weight:700; letter-spacing:.2px}
.sigil-meta p{margin:0; color:var(--mute)}
.site-footer{border-top:1px solid rgba(111,231,255,.12); padding:22px 8px; color:var(--mute); text-align:center}
.site-footer a{color:var(--ink)}
.site-footer .dot{color:var(--accent)}
.page{max-width:960px; margin:0 auto; padding:26px}
.page-header{display:flex; gap:20px; align-items:flex-start; margin:12px 0 22px}
.cover{width:min(320px, 36vw); aspect-ratio: 3/4; border-radius:12px; overflow:hidden; background:#11161f;
  border:1px solid rgba(111,231,255,.18); box-shadow: var(--glow)}
.cover img{width:100%; height:100%; object-fit:cover}
.meta h1{margin:.2rem 0 .25rem; font-family:Cinzel, serif}
.meta .tag{display:inline-block; margin:.2rem .4rem .6rem 0; padding:.25rem .6rem; border-radius:999px;
  border:1px solid rgba(111,231,255,.2); background:linear-gradient(180deg, rgba(111,231,255,.08), rgba(184,146,255,.08))}
.blurb{color:var(--mute); margin-top:.3rem}
.cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.button{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink);
  border:1px solid rgba(111,231,255,.25); padding:9px 14px; border-radius:12px;
  background:linear-gradient(180deg, rgba(111,231,255,.09), rgba(184,146,255,.09));
}
.button:hover{box-shadow: var(--glow); border-color: rgba(111,231,255,.4)}
.section{margin:26px 0}
.section h2{font-size:1.1rem; letter-spacing:.4px}
.prose{color:var(--ink); opacity:.92}
.prose p{margin:.7rem 0}
.backlink{display:inline-flex; align-items:center; gap:8px; margin:6px 0 18px; opacity:.85}
.backlink:hover{opacity:1}
@media (max-width:860px){
  .page-header{flex-direction:column}
  .cover{width:100%; max-width:480px}
}