/* Black Arts Alchemy — shared site stylesheet
   Palette: bg #0f0e0b · panel #16140f · border #3a3429 · ink #e8e4d9
            muted #a39a85 · faint #645f54 · gold #d4af77 */

:root{
  --bg:#0f0e0b; --panel:#16140f; --line:#3a3429; --ink:#e8e4d9;
  --muted:#a39a85; --faint:#645f54; --gold:#d4af77; --gold-dark:#c9a36e;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:radial-gradient(circle at center,#1a1814 0%,#0f0e0b 100%);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.65;
  min-height:100vh;
}
h1,h2,h3,.serif{font-family:'Playfair Display',Georgia,serif;font-weight:700;letter-spacing:-.02em;line-height:1.1}
a{color:var(--gold-dark)}
img,svg{vertical-align:middle}

/* ---- Navigation ---- */
.site-nav{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--line);
  background:rgba(15,14,11,.95);backdrop-filter:blur(8px);
}
.site-nav .inner{max-width:72rem;margin:0 auto;padding:0 2rem;height:5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.site-nav .logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.site-nav .logo span{font-weight:600;font-size:1.3rem;letter-spacing:-.03em}
.site-nav .links{display:flex;gap:1.8rem;font-size:.85rem;font-weight:500;flex-wrap:wrap}
.site-nav .links a{color:var(--muted);text-decoration:none;transition:color .2s,transform .2s}
.site-nav .links a:hover{color:var(--gold);transform:translateY(-1px)}
.site-nav .links a.active{color:var(--gold)}

/* ---- Layout ---- */
.wrap{max-width:72rem;margin:0 auto;padding:0 2rem}
.narrow{max-width:48rem;margin:0 auto;padding:0 2rem}
section{padding:4.5rem 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:none}
.kicker{text-transform:uppercase;letter-spacing:3px;font-size:.72rem;font-weight:500;color:var(--gold);margin-bottom:.6rem}
.lead{font-size:1.2rem;color:var(--muted)}

/* ---- Hero ---- */
.hero{text-align:center;padding:5rem 2rem 6rem}
.hero .badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border:1px solid var(--line);background:var(--panel);border-radius:999px;font-size:.7rem;letter-spacing:3px;margin-bottom:1.6rem}
.hero .badge .pulse{width:.4rem;height:.4rem;border-radius:50%;background:var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-size:clamp(3rem,9vw,5.6rem);margin-bottom:1.2rem}
.hero .gold{color:var(--gold)}
.hero p{max-width:28rem;margin:0 auto;font-size:1.2rem;color:var(--muted)}

/* ---- Cards ---- */
.grid{display:grid;gap:1.1rem;margin-top:2.2rem}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.grid.cols-5{grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr))}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:1rem;
  padding:1.6rem;transition:border-color .3s,box-shadow .3s,transform .3s;position:relative;
}
.card:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);transform:translateY(-3px)}
.card .step{color:var(--gold);font-size:.72rem;letter-spacing:2px;font-weight:600;margin-bottom:.8rem}
.card h3{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:0;margin-bottom:.5rem;line-height:1.35}
.card p{font-size:.88rem;color:var(--muted)}
.card .role{color:var(--gold);font-size:.85rem;margin-bottom:.6rem}
.card.gold-border{border-color:rgba(212,175,119,.4)}
a.card{display:block;text-decoration:none;color:var(--ink)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 2.2rem;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:.85rem;letter-spacing:1.5px;
  transition:background .2s,transform .1s;
}
.btn.solid{background:var(--gold);color:var(--bg)}
.btn.solid:hover{background:var(--gold-dark)}
.btn.ghost{border:1px solid var(--gold);color:var(--gold)}
.btn.ghost:hover{background:var(--gold);color:var(--bg)}

/* ---- Prose (long-form pages) ---- */
.prose{padding:3.5rem 0 5rem}
.prose h1{font-size:clamp(2rem,5vw,3rem);color:var(--gold);margin-bottom:.4rem}
.prose h2{font-size:1.55rem;color:var(--gold);margin:2.6rem 0 .8rem}
.prose h3{font-size:1.15rem;margin:1.8rem 0 .5rem}
.prose p,.prose li{color:var(--ink)}
.prose p{margin:.8rem 0}
.prose ul,.prose ol{margin:.8rem 0 .8rem 1.4rem}
.prose li{margin:.45rem 0}
.prose .meta{color:var(--faint);font-size:.85rem;margin-bottom:2rem}
.prose blockquote{border-left:3px solid var(--gold);padding-left:1.1rem;margin:1.2rem 0;color:var(--muted)}
.prose strong{color:var(--gold)}
.prose table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.92rem}
.prose th,.prose td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left}
.prose th{color:var(--gold);background:var(--panel)}

/* ---- Alt band ---- */
.band{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- Footer ---- */
footer.site-footer{border-top:1px solid var(--line);padding:2.2rem;text-align:center;font-size:.78rem;color:var(--faint)}
footer.site-footer a{color:var(--faint)}
footer.site-footer .legal{margin-top:.7rem}
footer.site-footer .sig{max-width:44rem;margin:.8rem auto 0;font-style:italic}

@media (max-width:640px){
  .site-nav .inner{padding:0 1rem;height:auto;flex-wrap:wrap;padding-top:.8rem;padding-bottom:.8rem}
  .hero{padding:3.5rem 1rem 4rem}
  .wrap,.narrow{padding:0 1.2rem}
}