:root{
  --obsidian:#0a0705;--ember-black:#160d08;--ash-panel:#1c1109;
  --ashfall:#9c8d7d;--ash-dim:#6f6357;
  --gold:#e8b64c;--gold-pale:#f4d98a;--gold-deep:#b8862f;
  --dragonblood:#c1440e;--line:rgba(232,182,76,.14);
  --display:'Cinzel',serif;--body:'EB Garamond',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--obsidian);color:var(--ashfall);font-family:var(--body);
  min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:19px;line-height:1.7;position:relative}
/* warm radial wash so the black isn't cold/empty */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 108%, rgba(193,68,14,.22), transparent 60%),
    radial-gradient(ellipse 70% 50% at 15% 0%, rgba(120,45,12,.14), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 12%, rgba(150,60,15,.12), transparent 55%)}
a{color:inherit;text-decoration:none}
#embers{position:fixed;inset:0;z-index:1;pointer-events:none}

/* glowing coal-bed rising from the base of every page */
.fire-bed{position:fixed;left:0;right:0;bottom:0;height:42vh;z-index:0;pointer-events:none;
  background:linear-gradient(0deg,
    rgba(224,74,20,.30) 0%,
    rgba(193,68,14,.16) 22%,
    rgba(140,50,14,.06) 48%,
    transparent 100%);
  filter:blur(2px);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 100%);
  mask-image:linear-gradient(0deg,#000 0%,transparent 100%);
  animation:coalPulse 5.5s ease-in-out infinite}
/* slow flickering heat haze over the coal-bed */
.heat-haze{position:fixed;left:0;right:0;bottom:0;height:30vh;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(240,140,40,.18), transparent 70%);
  mix-blend-mode:screen;animation:haze 7s ease-in-out infinite}
@keyframes coalPulse{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes haze{0%,100%{opacity:.55;transform:translateX(-2%) scaleY(1)}50%{opacity:.85;transform:translateX(2%) scaleY(1.06)}}
@media(prefers-reduced-motion:reduce){.fire-bed,.heat-haze{animation:none}}

/* header */
header.site{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,56px)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:600;
  letter-spacing:.22em;font-size:15px;color:var(--gold-pale)}
.brand svg{width:24px;height:24px}
.head-right{display:flex;align-items:center;gap:22px}
.head-right a{font-family:var(--display);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ashfall);transition:color .25s}
.head-right a:hover{color:var(--gold-pale)}

/* page shell */
.page{position:relative;z-index:2;flex:1;width:100%;max-width:1100px;margin:0 auto;
  padding:clamp(30px,6vh,64px) clamp(20px,5vw,56px) clamp(50px,8vh,90px)}
.eyebrow{font-family:var(--display);font-size:12px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:18px;display:flex;align-items:center;gap:16px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold-deep)}
h1.page-title{font-family:var(--display);font-weight:700;font-size:clamp(36px,6vw,68px);line-height:1;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff6df 8%,var(--gold-pale) 34%,var(--gold) 60%,var(--gold-deep) 90%,#7a4d18 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 5px 26px rgba(193,68,14,.28))}
.page-title.center{text-align:center;background:linear-gradient(180deg,#fff6df,var(--gold) 55%,var(--gold-deep));-webkit-background-clip:text;background-clip:text}
.lead{max-width:60ch;margin:20px 0 0;font-style:italic;font-size:clamp(17px,2vw,20px);color:var(--ashfall)}
.back{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:30px;transition:color .25s}
.back:hover{color:var(--gold-pale)}

/* generic content */
.prose{max-width:70ch;margin-top:34px}
.prose h2{font-family:var(--display);font-weight:600;color:var(--gold-pale);font-size:clamp(24px,3.4vw,34px);
  margin:44px 0 14px;letter-spacing:.03em}
.prose p{margin-bottom:20px}
.prose p .drop{float:left;font-family:var(--display);font-weight:700;font-size:64px;line-height:.72;
  padding:6px 12px 0 0;background:linear-gradient(180deg,var(--gold-pale),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.prose b,.prose strong{color:var(--gold-pale);font-weight:500}

/* cards grid (houses/factions/court) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:38px}
.card{position:relative;padding:30px 28px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,var(--ember-black),var(--obsidian));transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s}
.card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(ellipse at 50% 130%,rgba(232,182,76,.14),transparent 68%)}
.card:hover{transform:translateY(-5px);border-color:var(--gold-deep)}
.card:hover::before{opacity:1}
.card .sigil{width:42px;height:42px;color:var(--gold);margin-bottom:18px}
.card h3{font-family:var(--display);font-weight:600;font-size:20px;color:var(--gold-pale);letter-spacing:.03em;margin-bottom:4px}
.card .tier{position:absolute;top:26px;right:26px;font-family:var(--display);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}
.card .words{font-style:italic;font-size:15px;color:var(--gold-deep);margin-bottom:12px}
.card p{font-size:15.5px;line-height:1.55;color:var(--ash-dim);position:relative}

/* table (laws / court) */
.ledger{width:100%;border-collapse:collapse;margin-top:34px;border:1px solid var(--line)}
.ledger th{font-family:var(--display);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--ember-black)}
.ledger td{padding:16px 20px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ashfall);vertical-align:top}
.ledger tr:last-child td{border-bottom:none}
.ledger td.k{font-family:var(--display);color:var(--gold-pale);font-size:15px;letter-spacing:.02em;white-space:nowrap}
.ledger .sev{font-family:var(--display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dragonblood)}

/* forms */
.auth{max-width:440px;margin:10px auto 0}
.auth .card-form{border:1px solid var(--line);background:linear-gradient(165deg,var(--ember-black),var(--obsidian));padding:38px 34px}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.field input{width:100%;padding:13px 15px;background:var(--obsidian);border:1px solid var(--line);color:var(--ashfall);
  font-family:var(--body);font-size:17px;transition:border-color .25s}
.field input:focus{outline:none;border-color:var(--gold-deep)}
.btn{font-family:var(--display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:14px 26px;
  cursor:pointer;transition:all .3s;border:1px solid var(--gold);width:100%;
  background:linear-gradient(180deg,var(--gold-pale),var(--gold) 60%,var(--gold-deep));color:var(--obsidian)}
.btn:hover{box-shadow:0 0 28px rgba(232,182,76,.5)}
.btn.ghost{background:rgba(232,182,76,.04);color:var(--gold-pale);border-color:var(--gold-deep)}
.btn.ghost:hover{background:rgba(232,182,76,.1);border-color:var(--gold);box-shadow:none}
.form-alt{text-align:center;margin-top:22px;font-size:15px;color:var(--ash-dim)}
.form-alt a{color:var(--gold-pale)}
.notice{padding:14px 18px;border:1px solid var(--line);margin-bottom:22px;font-size:15.5px;background:rgba(232,182,76,.05)}
.notice.err{border-color:rgba(193,68,14,.5);background:rgba(193,68,14,.08);color:#e8a884}
.notice.ok{border-color:var(--gold-deep);color:var(--gold-pale)}
.code-box{font-family:var(--display);letter-spacing:.18em;font-size:20px;color:var(--gold-pale);
  background:var(--obsidian);border:1px dashed var(--gold-deep);padding:14px 18px;text-align:center;margin:8px 0 4px;user-select:all}
.steps{counter-reset:s;margin:20px 0}
.steps li{list-style:none;position:relative;padding:6px 0 6px 40px;font-size:15.5px;color:var(--ashfall)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:5px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:12px;
  color:var(--gold);border:1px solid var(--gold-deep);border-radius:50%}

/* footer */
footer.site{position:relative;z-index:2;text-align:center;padding:22px;font-size:12.5px;
  font-style:italic;color:var(--ash-dim);border-top:1px solid var(--line)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#embers{display:none}}