@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Mrs+Saint+Delafield&display=swap');

:root{
  --bg: #0a0713;
  --bg-vignette: radial-gradient(ellipse 80% 60% at 50% 0%, #241432 0%, #0a0713 55%, #05040a 100%);
  --panel: #140d1e;
  --panel-edge: #2a1a3d;
  --parchment: #1a1224;
  --ink: #e9def0;
  --ink-dim: #a897bf;
  --ink-faint: #6f6088;
  --violet: #7c3aed;
  --violet-bright: #a678ff;
  --violet-glow: rgba(140, 80, 240, 0.35);
  --blood: #7a0c1e;
  --blood-bright: #c81633;
  --blood-glow: rgba(200, 22, 51, 0.45);
  --gold: #b9964f;
  --rule: #33223f;
  --font-title: 'UnifrakturMaguntia', 'Cinzel', serif;
  --font-head: 'Cinzel', 'Cormorant Garamond', serif;
  --font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sign: 'Mrs Saint Delafield', 'Brush Script MT', cursive;
}

*{ box-sizing: border-box; }
html{ background: var(--bg); }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.embers{ position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; background: var(--bg-vignette); }
.ember{
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--violet-bright); box-shadow: 0 0 6px 1px var(--violet-glow);
  opacity: 0; animation: rise 9s linear infinite;
}
@keyframes rise{
  0%{ transform: translateY(0) translateX(0); opacity: 0; }
  8%{ opacity: .8; }
  90%{ opacity: .5; }
  100%{ transform: translateY(-100vh) translateX(var(--drift, 20px)); opacity: 0; }
}

a{ color: var(--violet-bright); }

.topnav{
  position: relative; z-index: 1;
  display:flex; align-items:center; justify-content:space-between;
  max-width: 760px; margin: 0 auto; padding: 20px clamp(18px, 5vw, 28px) 0;
  font-family: var(--font-head);
}
.topnav .brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-size: .85rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink);
}
.topnav .brand svg{ width:20px; height:20px; }
.topnav .brand svg path, .topnav .brand svg circle{ stroke: var(--violet-bright); }
.topnav .links{ display:flex; gap: 20px; }
.topnav .links a{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color: var(--ink-dim);
  transition: color .15s;
}
.topnav .links a:hover, .topnav .links a:focus-visible{ color: var(--violet-bright); }

.page{
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
  padding: clamp(20px, 5vw, 40px) clamp(18px, 5vw, 28px) 80px;
}

.divider{ display:flex; align-items:center; gap: 14px; margin: 44px 0 28px; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background: linear-gradient(90deg, transparent, var(--rule), transparent); }
.divider svg{ width:18px; height:18px; opacity:.7; flex-shrink:0; }
.divider svg path{ fill: var(--violet-bright); }

button, .btn{
  font-family: var(--font-head); font-size: .9rem; letter-spacing:.1em; text-transform:uppercase;
  color: #f4e9ff; background: linear-gradient(180deg, #4a1a8f, #2c0f5c);
  border: 1px solid #6b3fc4; border-radius: 3px; padding: 12px 26px;
  cursor:pointer; transition: transform .15s, box-shadow .15s;
  box-shadow: 0 0 20px -4px var(--violet-glow);
  text-decoration:none; display:inline-block;
}
button:hover:not(:disabled), .btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 26px -4px var(--violet-glow); }
button:disabled{ opacity:.4; cursor:not-allowed; }
button:focus-visible, a:focus-visible{ outline: 2px solid var(--violet-bright); outline-offset:2px; }

[hidden]{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  .ember{ animation: none; opacity:0; }
}