:root{
  --bg-deep:#0b0907;
  --ink:#2b2118;
  --parchment:#f3e6c1;
  --parchment-ink:#3f2f1e;
  --gold:#c8a24a;
  --blood:#7a0d0d;
  --blood-dark:#4f0808;
  --moss:#556b2f;
  --ember:#d07d2b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:#e9e4d6;
  background:
    radial-gradient(1200px 700px at 10% 0%, #1a140f 0%, transparent 70%),
    radial-gradient(900px 600px at 90% 100%, #14100c 0%, transparent 70%),
    linear-gradient(180deg, #0d0a08 0%, #0b0907 100%);
  font-family: "Cinzel", "IM Fell English", Georgia, "Times New Roman", serif;
  letter-spacing: .3px;
}

.page{
  min-height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:4rem 1.25rem;
}

.scroll{
  max-width:880px;width:100%;
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)) ,
    radial-gradient(1200px 800px at -10% -10%, rgba(255,255,255,.05), rgba(0,0,0,0)),
    repeating-linear-gradient(180deg, rgba(0,0,0,.05) 0 2px, rgba(0,0,0,0) 2px 4px),
    linear-gradient(180deg, #f6eccc, #e7d6a8);
  color:var(--parchment-ink);
  padding:2.25rem 2rem 2.5rem;
  border-radius:14px;
  box-shadow: 0 25px 60px rgba(0,0,0,.6), inset 0 0 0 2px rgba(0,0,0,.25);
  position:relative;
}
.scroll:before,.scroll:after{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
}
.scroll:before{ box-shadow: inset 0 0 120px rgba(63,47,30,.35), inset 0 0 18px rgba(0,0,0,.25); }
.scroll:after{ background: radial-gradient(300px 80px at 50% -20px, rgba(0,0,0,.25), transparent), radial-gradient(300px 80px at 50% 120%, rgba(0,0,0,.2), transparent); mix-blend-mode:multiply; }

.header{ text-align:center; margin-bottom:1.25rem; }
.title{
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.9rem, 2.8vw, 3rem);
  letter-spacing: 1px;
  color:#e8dec7;
  text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 0 18px rgba(200,162,74,.25);
  margin:0 0 .35rem 0;
}
.subtitle{ color:#d9c89e; margin:0; font-size:1rem; opacity:.95 }

.hr-runes{ display:flex; align-items:center; gap:.75rem; margin:1.25rem 0 1.5rem }
.hr-runes:before,.hr-runes:after{ content:""; height:1px; background:linear-gradient(90deg, transparent, rgba(63,47,30,.6), transparent); flex:1 }
.runes{ color:#d4b483; letter-spacing:.35em; font-variant: small-caps; text-shadow: 0 0 6px rgba(212,180,131,.6) }

.copy{ line-height:1.6; font-size:1.025rem; margin:0 0 1.25rem 0 }
.hint{ color:#7b694d; font-style:italic }

.form{ display:grid; gap:1rem; margin-top:.5rem }
.label{ font-weight:600; color:#5b4631 }
.input{
  width:100%; padding:.85rem 1rem; border-radius:8px;
  background:#fbf3d7; color:#3a2a1a; border:1px solid #bda171;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.12);
  font-size:1rem;
}
.input::placeholder{ color:#9f8c62 }

.row{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem }
@media (max-width: 640px){ .row{ grid-template-columns: 1fr } }

.actions{ display:flex; gap:.75rem; align-items:center; justify-content:flex-start; margin-top:.5rem }
.btn{
  appearance:none; border:0; cursor:pointer; position:relative;
  padding:.9rem 1.25rem; border-radius:10px; color:#f8efe0; font-weight:700; letter-spacing:.5px;
  background: radial-gradient(120% 180% at 30% 20%, #9f1717 0%, #6a1010 60%, #560c0c 100%);
  box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.25), inset 0 -6px 18px rgba(255,255,255,.06);
}
.btn:hover{ filter:brightness(1.05) }
.btn:active{ transform: translateY(1px) }
.btn--ghost{ background:transparent; color:#6a1010; border:1px solid #6a1010 }

.badge{
  display:inline-block; padding:.25rem .5rem; border-radius:999px;
  background:rgba(200,162,74,.18); color:#6a4b16; border:1px solid rgba(200,162,74,.35);
  font-size:.8rem; letter-spacing:.3px
}
/* The stone remembers.
01010100 01101111 01110111 01100101 01110010 00101101 01101111 01100110 00101101 01010100 01101001 01101101
*/
.footer{ margin-top:1.25rem; display:flex; justify-content:space-between; align-items:center; color:#7b694d; font-size:.9rem }

/* Hidden relic */
#relic{ display:none }

/* Decorative drop caps */
.dropcap::first-letter{
  float:left; font-size:2.1em; line-height:.8; padding:.05em .1em 0 0; font-family:"Cinzel", Georgia, serif; color:#6a4b16; text-shadow:0 1px 0 rgba(0,0,0,.15)
}

/* Glow flicker for runes */
@keyframes emberGlow{
  0%, 100% { text-shadow: 0 0 4px rgba(208,125,43,.5), 0 0 12px rgba(208,125,43,.35) }
  50% { text-shadow: 0 0 8px rgba(208,125,43,.75), 0 0 18px rgba(208,125,43,.55) }
}
.runes{ animation: emberGlow 3s ease-in-out infinite }

.scroll{ background-image: url('/assets/texture.png?v=01010100011011110111011101100101011100100010110101101111011001100010110101010100011010010110110101100101'); }

/* Flash message */
.flash{ padding:.75rem 1rem; border-radius:8px; border:1px solid rgba(0,0,0,.08); margin:.5rem 0 1rem 0 }
.flash--error{ background:rgba(122,13,13,.12); color:#5a0b0b; border-color:rgba(122,13,13,.35) }