/* The wiki's look, shared by every wiki page: the site's gold and jade on night blue, hairlines and corner ticks. */
:root {
  --ink: #05090d; --night: #0a1118; --panel: #0f1922; --line: #1e2f3c;
  --gold: #c8aa6e; --gold-hi: #f0e6d2; --gold-dim: #785a28; --jade: #0ac8b9; --jade-dim: #0a5a5a;
  --text: #cdd6dc; --muted: #8a9aa6; --red: #c8463a; --hair: rgba(200, 170, 110, .2); --hair-hi: rgba(200, 170, 110, .55);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--text); font: 16px/1.65 Inter, system-ui, sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: Cinzel, Georgia, serif; color: var(--gold-hi); margin: 0; letter-spacing: .03em; }
.wrap { width: min(1240px, 100% - 32px); margin: 0 auto; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }
.corners { position: relative; }
.corners::before { content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none; --t: 12px; --c: var(--gold);
  background: linear-gradient(var(--c), var(--c)) left top / var(--t) 1px, linear-gradient(var(--c), var(--c)) left top / 1px var(--t),
    linear-gradient(var(--c), var(--c)) right top / var(--t) 1px, linear-gradient(var(--c), var(--c)) right top / 1px var(--t),
    linear-gradient(var(--c), var(--c)) left bottom / var(--t) 1px, linear-gradient(var(--c), var(--c)) left bottom / 1px var(--t),
    linear-gradient(var(--c), var(--c)) right bottom / var(--t) 1px, linear-gradient(var(--c), var(--c)) right bottom / 1px var(--t);
  background-repeat: no-repeat; }

/* Top bar. */
nav { position: sticky; top: 0; z-index: 10; height: 60px; display: flex; align-items: center; background: rgba(5, 9, 13, .94);
  backdrop-filter: blur(8px); }
nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); opacity: .5; }
nav .wrap { display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; font: 800 18px Cinzel, serif; color: var(--gold-hi); letter-spacing: .08em; }
.seal { width: 30px; height: 30px; display: grid; place-items: center; background: var(--red); color: #fff2e0; font: 16px serif; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255, 230, 200, .35); }
.logo small { font: 700 11px Inter; letter-spacing: .25em; color: var(--jade); margin-left: 4px; }
.search { flex: 1; max-width: 420px; margin-left: auto; position: relative; }
.search input { width: 100%; padding: 9px 14px 9px 36px; background: var(--panel); border: 1px solid var(--hair); color: var(--gold-hi); font: 14px Inter; outline: none; }
.search input:focus { border-color: var(--hair-hi); }
.search::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border: 2px solid var(--gold); border-radius: 50%; }
.search::after { content: ""; position: absolute; left: 22px; top: 50%; width: 6px; height: 2px; margin-top: 4px; background: var(--gold); transform: rotate(45deg); }
.back { font: 700 12px Inter; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); } .back:hover { color: var(--gold-hi); }
@media (max-width: 760px) { .back, .logo small { display: none; } }

/* Layout: side index + content. */
.layout { display: grid; grid-template-columns: 230px 1fr; gap: 40px; padding: 36px 0 90px; }
aside { position: sticky; top: 84px; align-self: start; }
aside h4 { margin: 18px 0 6px; font: 700 11px Inter; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
aside a { display: block; padding: 5px 0 5px 12px; border-left: 1px solid var(--line); font-size: 14px; color: var(--muted); }
aside a:hover { color: var(--gold-hi); border-color: var(--gold-dim); }
aside a.on { color: var(--gold-hi); border-color: var(--gold); }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } aside { display: none; } }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; } .crumbs a:hover { color: var(--gold-hi); } .crumbs span { color: var(--gold-dim); margin: 0 8px; }

/* Panels. */
.panel { background: var(--panel); border: 1px solid var(--hair); padding: 24px 26px; }
.tag { display: inline-block; padding: 2px 9px; border: 1px solid var(--jade-dim); color: var(--jade); font: 700 11px Inter; letter-spacing: .15em; text-transform: uppercase; }
.tag.gold { border-color: var(--gold-dim); color: var(--gold); }
.rule { width: 100px; height: 12px; margin: 14px 0 0; background: linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat; position: relative; }
.rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%) rotate(45deg); background: var(--ink); border: 1px solid var(--gold); }
footer { padding: 30px 0; border-top: 1px solid var(--hair); color: var(--muted); font-size: 13px; }