:root{
  --bg:#0b0f16;
  --paper:#f5efe1;
  --ink:#1d1a16;
  --gold:#c9b37a;
  --gold-d:#9d8650;
  --mid:#1a2230;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Garamond", "Georgia", serif;
  color:#eae2cf;
  background:
    radial-gradient(1200px 800px at 50% -20%, #172033, transparent 70%),
    radial-gradient(900px 600px at 120% 10%, #10192a, transparent 60%),
    linear-gradient(180deg, #0a0e16, #0f1420);
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{
  padding:40px 0 10px;
  text-align:center;
}
.logo-wrap{
  display:inline-block;
  padding:16px;
  border:2px solid var(--gold);
  border-radius:999px;
  box-shadow:0 0 0 4px rgba(201,179,122,0.15), 0 10px 30px rgba(0,0,0,.4);
  background: radial-gradient(200px 160px at 50% 40%, #132033, #0b1120);
}
.logo{
  width:140px;height:140px;object-fit:contain;display:block;
}
h1,h2,h3{
  font-family:"Cinzel","Garamond","Georgia",serif;
  letter-spacing:.5px;
}
.title{
  margin:18px 0 6px;
  font-size:36px;
  color:var(--gold);
  text-shadow:0 0 12px rgba(201,179,122,.2);
}
.subtitle{
  margin:0 auto;
  max-width:820px;
  color:#d8ceb6;
  font-size:18px;
  line-height:1.55;
}
.section{
  margin:40px auto;
  padding:24px;
  border:1px solid rgba(201,179,122,.35);
  border-radius:18px;
  background:
    radial-gradient(800px 500px at -20% -20%, rgba(201,179,122,.07), transparent 60%),
    linear-gradient(180deg, rgba(201,179,122,.04), rgba(201,179,122,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 6px 24px rgba(0,0,0,.25);
}
.section h2{
  margin:0 0 10px;
  color:var(--gold);
  font-size:24px;
  border-bottom:1px solid rgba(201,179,122,.25);
  padding-bottom:10px;
}
.grid{
  display:grid;
  gap:18px;
}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  border:1px solid rgba(201,179,122,.3);
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(14,17,26,.8), rgba(10,13,20,.9));
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.card img{width:100%;height:260px;object-fit:cover;display:block;border-bottom:1px solid rgba(201,179,122,.25)}
.card .content{padding:14px 16px 18px}
.card h3{margin:6px 0 6px;font-size:20px;color:#f0e5c7}
.card p{margin:0;color:#dbd2bb;line-height:1.55}
.rulelist, .plainlist{margin:8px 0 0 0;padding-left:16px}
.rulelist li{margin:8px 0}
.plainlist li{margin:6px 0}
.banner{
  margin:24px auto 8px;
  padding:12px 16px;
  border:1px dashed rgba(201,179,122,.4);
  border-radius:10px;
  color:#d9cfb6;
  background:linear-gradient(180deg, rgba(201,179,122,.08), rgba(201,179,122,.05));
  text-align:center;
  font-size:14px;
}
.cta{
  display:inline-block;
  margin-top:10px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--gold);
  background:linear-gradient(180deg, #f1e6c7, #d3bd85);
  color:#2b2214;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 6px 16px rgba(201,179,122,.25);
}
.footer{
  text-align:center;
  color:#b9ae95;
  font-size:13px;
  padding:30px 0 40px;
  opacity:.9;
}
.small{font-size:14px;color:#cabf9f}
blockquote{
  margin:10px auto;
  padding:12px 14px;
  border-left:3px solid var(--gold);
  background:linear-gradient(90deg, rgba(201,179,122,.08), transparent);
  color:#e8dec6;
  font-style:italic;
}
@media (max-width:860px){
  .grid.two{grid-template-columns:1fr}
  .card img{height:220px}
}