/* Ritual Buff — shared site styles
 * Palette echoes the app: void black, bone, muted, tarnished gold.
 */

:root{
  --void:#0A0908;
  --ink:#14100D;
  --bone:#F3E8D4;
  --muted:#C7B79B;
  --gold:#D6A84F;
  --gold-soft:rgba(214,168,79,0.18);
  --gold-line:rgba(214,168,79,0.4);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--void);
  color:var(--bone);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

main{max-width:760px;margin:0 auto;padding:64px 24px 96px}

/* Header / hero shared */
header{margin-bottom:42px}
header .kicker{
  font-size:11px;font-weight:900;letter-spacing:2.6px;
  color:var(--muted);margin-bottom:14px;
}
header h1{
  font-size:42px;line-height:1.02;margin:0 0 14px;
  font-weight:800;color:var(--bone);
}
header .meta{
  font-size:12px;font-weight:800;letter-spacing:2px;
  color:var(--gold);text-transform:uppercase;
}
header .tagline{
  color:var(--muted);font-size:17px;line-height:1.55;
  margin:18px 0 0;max-width:560px;
}

/* Body */
h2{
  font-size:13px;font-weight:900;letter-spacing:2.2px;
  color:var(--muted);text-transform:uppercase;
  margin:36px 0 12px;padding-top:18px;
  border-top:1px solid var(--gold-soft);
}
p{font-size:16px;color:var(--bone);margin:0 0 14px}
p.lede{color:var(--muted);font-size:16px;line-height:1.6}
strong{color:var(--bone);font-weight:800}
ul{margin:6px 0 18px;padding:0 0 0 20px}
li{font-size:15px;color:var(--bone);margin-bottom:6px}
a{
  color:var(--gold);text-decoration:none;
  border-bottom:1px solid var(--gold-line);
  transition:border-color .12s ease;
}
a:hover{border-bottom-color:var(--gold)}
.operator{
  font-size:12px;color:var(--muted);
  margin-top:8px;letter-spacing:0.4px;
}

/* Landing-page-specific: mechanism grid */
.mech{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:18px 0 4px;
}
.mech-card{
  background:rgba(20,16,13,0.6);
  border:1px solid var(--gold-soft);
  border-radius:10px;
  padding:18px;
}
.mech-card .label{
  font-size:11px;font-weight:900;letter-spacing:2px;
  color:var(--gold);margin-bottom:8px;
}
.mech-card .body{
  font-size:14px;color:var(--bone);line-height:1.45;
}
@media (max-width:560px){
  .mech{grid-template-columns:1fr}
}

/* Landing-page-specific: buff strip */
.buffs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:14px 0 4px;
}
.buff{
  display:flex;align-items:baseline;gap:14px;
  padding:14px 16px;
  background:rgba(20,16,13,0.5);
  border:1px solid var(--gold-soft);
  border-radius:8px;
}
.buff .sigil{
  font-size:22px;color:var(--gold);
  width:24px;text-align:center;flex-shrink:0;
}
.buff .name{
  font-size:11px;font-weight:900;letter-spacing:1.8px;
  color:var(--gold);text-transform:uppercase;
}
.buff .phrase{
  font-size:14px;color:var(--bone);margin-top:2px;
  font-style:italic;
}
.buff-text{flex:1;min-width:0}
@media (max-width:560px){
  .buffs{grid-template-columns:1fr}
}

/* CTA */
.cta{
  margin:32px 0 0;
  padding:24px;
  border:1px solid var(--gold-line);
  border-radius:10px;
  background:rgba(20,16,13,0.7);
  text-align:center;
}
.cta .label{
  font-size:11px;font-weight:900;letter-spacing:2.4px;
  color:var(--gold);margin-bottom:10px;
}
.cta .body{
  font-size:18px;color:var(--bone);line-height:1.3;
  font-weight:700;margin-bottom:14px;
}
.cta .note{
  font-size:13px;color:var(--muted);line-height:1.45;
}

/* Footer */
footer{
  margin-top:64px;padding-top:24px;
  border-top:1px solid var(--gold-soft);
  color:var(--muted);font-size:12px;
  letter-spacing:1.4px;text-transform:uppercase;
  display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:18px;
}
footer .nav{display:flex;gap:18px}
footer .nav a{
  color:var(--muted);border-bottom-color:transparent;
}
footer .nav a:hover{color:var(--gold);border-bottom-color:var(--gold-line)}