/* <Cleaves Edge>: a World of Warcraft flavoured guild hall. Dark = night stone & gold, Light = parchment & bronze. */
@font-face { font-family: "Cinzel"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/cinzel-600.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/cinzel-700.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 900; font-style: normal; font-display: swap; src: url("/static/fonts/cinzel-900.woff2") format("woff2"); }

:root, :root[data-theme="dark"] {
  --bg: #0a0c11; --bg-2: #141824; --card: #171c2a; --card-2: #10141f; --line: #3a3120;
  --text: #ebe6d8; --muted: #9a9484;
  --gold: #d4a63f; --gold-hi: #f5dc94; --gold-lo: #8a6416; --gold-line: rgba(212, 166, 63, .38);
  --accent: #d4a63f; --accent-ink: #1b1204; --link: #e8bd5c; --ember: #c0392b;
  --danger: #ff8077; --ok: #7bd896;
  --h1-grad: linear-gradient(180deg, #fff6d2 0%, #f1cf6f 48%, #b98524 100%);
  --btn-grad: linear-gradient(180deg, #f7dc8d 0%, #d9a93f 52%, #a67618 100%);
  --btn-border: #6b4d10;
  --panel: linear-gradient(180deg, #1b2131 0%, #141926 100%);
  --shadow: 0 1px 0 rgba(255, 235, 170, .07) inset, 0 10px 28px rgba(0, 0, 0, .45);
  --glow: rgba(212, 166, 63, .16); --vignette: rgba(0, 0, 0, .35);
  --cc-priest: #f2f2f2; --cc-rogue: #fff468; --cc-druid: #ff7c0a; --cc-hunter: #aad372; --cc-mage: #3fc7eb;
  --cc-monk: #00ff98; --cc-paladin: #f48cba; --cc-shaman: #2f8cff; --cc-warlock: #9a9bf5; --cc-warrior: #c69b6d;
  --cc-death-knight: #e0384f; --cc-demon-hunter: #c24ae0; --cc-evoker: #33b79a;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #e8dcc0; --bg-2: #ddcfae; --card: #f6ecd3; --card-2: #efe2c2; --line: #b9985a;
  --text: #2b2113; --muted: #66583f;
  --gold: #8f5f0c; --gold-hi: #6b4506; --gold-lo: #5a3a05; --gold-line: rgba(122, 82, 12, .5);
  --accent: #9a6a12; --accent-ink: #fff8e6; --link: #7a3f0a; --ember: #9b2c20;
  --danger: #a3261b; --ok: #1d6e36;
  --h1-grad: linear-gradient(180deg, #7a4d07 0%, #5a3504 100%);
  --btn-grad: linear-gradient(180deg, #c58f2a 0%, #9a6a12 55%, #75500c 100%);
  --btn-border: #4f3507;
  --panel: linear-gradient(180deg, #f9f0d9 0%, #f1e5c6 100%);
  --shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 16px rgba(70, 48, 10, .2);
  --glow: rgba(160, 110, 20, .2); --vignette: rgba(120, 80, 20, .10);
  --cc-priest: #5a5f6b; --cc-rogue: #857500; --cc-druid: #bd5600; --cc-hunter: #4a7a18; --cc-mage: #0a809f;
  --cc-monk: #007a55; --cc-paladin: #b8407a; --cc-shaman: #0054bd; --cc-warlock: #5556c4; --cc-warrior: #8a6536;
  --cc-death-knight: #a91c32; --cc-demon-hunter: #84209f; --cc-evoker: #1a7864;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); background-color: var(--bg);
  font: 16px/1.62 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
  background-image:
    radial-gradient(900px 380px at 50% -80px, var(--glow), transparent 70%),
    radial-gradient(ellipse at 50% 120%, var(--vignette), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 6px);
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, scroll;
}
main { flex: 1; width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, .brand, .eyebrow, .tag, th, .btn, .pager, .list .t, .mainnav a, .big { font-family: "Cinzel", Georgia, "Times New Roman", serif; }
h1, h2 { line-height: 1.2; margin: 0 0 .6rem; letter-spacing: .02em; }
h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.4rem); font-weight: 900;
  color: var(--gold-hi); background: var(--h1-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35));
}
:root[data-theme="light"] h1 { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }
h2 { font-size: 1.1rem; font-weight: 700; color: var(--gold-hi); }
:root[data-theme="light"] h2 { color: var(--gold-lo); }
code { background: var(--card-2); border: 1px solid var(--line); padding: .1rem .45rem; border-radius: 5px; font-size: .9em; letter-spacing: .05em; }
.wrap { width: min(100% - 32px, 1000px); margin-inline: auto; padding-block: 24px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.meta, .hint, small { color: var(--muted); font-size: .9rem; }
.meta { margin: 0; }
.hint { margin: .2rem 0 1rem; }
em { color: var(--muted); }

/* header: dark stone bar with a gold rule */
.top {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 94%, black) 0%, color-mix(in srgb, var(--bg) 96%, black) 100%);
  border-bottom: 1px solid var(--gold-line); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); backdrop-filter: blur(8px);
}
.top::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7; }
.bar { width: min(100% - 32px, 1000px); margin-inline: auto; display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; padding: 10px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.15rem; letter-spacing: .04em; color: var(--gold-hi); text-decoration: none; }
:root[data-theme="light"] .brand { color: var(--gold-lo); }
.logo { width: 26px; height: 30px; }
.shield { fill: var(--card-2); stroke: var(--gold); stroke-width: 1.6; }
.shield-in { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .55; }
.sword { fill: var(--gold); stroke: var(--gold); stroke-linejoin: round; }
.sword-line { stroke: var(--card-2); stroke-width: 1.6; }
.mainnav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.mainnav a, .account a, .link { color: var(--muted); text-decoration: none; padding: 6px 11px; border-radius: 6px; }
.mainnav a { font-size: .88rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.mainnav a:hover, .account a:hover, .link:hover { color: var(--gold-hi); background: rgba(212, 166, 63, .1); }
:root[data-theme="light"] .mainnav a:hover, :root[data-theme="light"] .account a:hover, :root[data-theme="light"] .link:hover { color: var(--gold-lo); background: rgba(122, 82, 12, .1); }
[aria-current="page"] { color: var(--gold-hi) !important; background: rgba(212, 166, 63, .12); box-shadow: inset 0 -2px 0 var(--gold); }
:root[data-theme="light"] [aria-current="page"] { color: var(--gold-lo) !important; }
.account { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.account .who { color: var(--text); font-weight: 600; }
.theme-toggle {
  margin-left: 8px; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--gold-line); background: var(--panel); color: var(--gold); border-radius: 50%;
  box-shadow: var(--shadow);
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold-hi); }
:root[data-theme="light"] .theme-toggle:hover { color: var(--gold-lo); }
.theme-toggle svg { width: 19px; height: 19px; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="light"] .icon-moon { display: none; }
.foot { border-top: 1px solid var(--gold-line); color: var(--muted); font: 600 .8rem/1.4 "Cinzel", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; text-align: center; background: rgba(0, 0, 0, .12); }

/* ornamental divider */
.divider { height: 14px; margin: 8px auto 18px; max-width: 520px; position: relative; }
.divider::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); opacity: .75; }
.divider::after { content: ""; position: absolute; left: 50%; top: 1px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: var(--bg); border: 1.5px solid var(--gold); }

/* controls */
button, input, select, textarea { font: inherit; color: inherit; }
.btn {
  display: inline-block; padding: .55rem 1.2rem; border-radius: 6px; cursor: pointer; text-decoration: none;
  font-weight: 700; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--gold-line); background: var(--panel); color: var(--gold-hi);
  box-shadow: 0 1px 0 rgba(255, 235, 170, .08) inset, 0 2px 0 rgba(0, 0, 0, .35);
}
:root[data-theme="light"] .btn { color: var(--gold-lo); }
.btn:hover { border-color: var(--gold); filter: brightness(1.08); }
.btn.primary {
  background: var(--btn-grad); color: var(--accent-ink); border-color: var(--btn-border);
  text-shadow: 0 1px 0 rgba(255, 245, 200, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 3px 0 rgba(0, 0, 0, .4), 0 6px 14px rgba(0, 0, 0, .25);
}
:root[data-theme="light"] .btn.primary { color: #fff8e6; text-shadow: 0 1px 0 rgba(40, 24, 0, .5); }
.btn.primary:hover { filter: brightness(1.1); }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 1px 0 rgba(0, 0, 0, .4); }
button.link { background: none; border: 0; cursor: pointer; font-size: .95rem; }
button.danger, .danger { color: var(--danger); }
input, select, textarea {
  width: 100%; padding: .62rem .8rem; border-radius: 6px; border: 1px solid var(--line);
  background: var(--card-2); box-shadow: 0 2px 5px rgba(0, 0, 0, .25) inset;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--glow), 0 2px 5px rgba(0, 0, 0, .25) inset; }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 5px; font-weight: 600; font-size: .9rem; letter-spacing: .02em; }
.form small { font-weight: 400; }
.form .btn { justify-self: start; }
.form input, .form select, .form textarea { font-weight: 400; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inline { display: inline; }
.form label.choice { grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--gold-line); border-radius: 8px; background: var(--card-2); cursor: pointer; font-weight: 400; }
.choice input { width: auto; margin-top: 5px; accent-color: var(--gold); box-shadow: none; }
.choice strong { display: block; color: var(--text); font-weight: 700; }
.choice small { display: block; }
.choice:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 2px var(--glow); }
.inlineform { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; margin-top: 14px; }

/* cards: stone panel, gold hairline, corner brackets */
.card {
  position: relative; margin-block: 16px; padding: 22px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--gold-line); box-shadow: var(--shadow);
}
.card::before, .card::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--gold); opacity: .85; pointer-events: none; }
.card::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.card::after { bottom: 5px; right: 5px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.card.narrow { max-width: 460px; margin-inline: auto; }
.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid.two > .card { margin-block: 0; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.big { font-size: 3.2rem; font-weight: 900; line-height: 1; margin: .2rem 0; color: var(--gold-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, .4), 0 0 24px var(--glow); }
:root[data-theme="light"] .big { color: var(--gold-lo); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.stat p { margin: .2rem 0; }
.hero { text-align: center; padding: 38px 0 16px; }
.hero.compact { padding: 24px 0 4px; text-align: left; }
.hero h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); letter-spacing: .05em; }
.crest { width: 92px; height: auto; margin: 0 auto 6px; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)) drop-shadow(0 0 18px var(--glow)); }
.crest .shield { fill: var(--card-2); stroke-width: 3; }
.crest .shield-in { stroke-width: 1.5; }
.eyebrow { text-transform: uppercase; letter-spacing: .24em; font-size: .72rem; color: var(--gold); margin: 0 0 .6rem; font-weight: 700; }
.lede { max-width: 56ch; margin: .5rem auto 1.6rem; color: var(--muted); font-size: 1.08rem; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.crumbs { color: var(--muted); margin: 0 0 6px; font-size: .9rem; }

/* lists */
.list { list-style: none; margin: 12px 0 0; padding: 0; }
.list li { padding: 13px 0; border-top: 1px solid var(--gold-line); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.list li:first-child { border-top: 0; }
.list .t { font-weight: 700; font-size: 1.02rem; letter-spacing: .02em; }
.list .empty { color: var(--muted); }
.list:not(.cats) li { flex-direction: column; align-items: flex-start; gap: 2px; }
.count { text-align: right; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.count strong { color: var(--gold-hi); }
:root[data-theme="light"] .count strong { color: var(--gold-lo); }
.tag {
  display: inline-block; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; padding: 1px 8px; border-radius: 3px; vertical-align: middle; font-weight: 700;
  background: linear-gradient(180deg, rgba(212, 166, 63, .28), rgba(212, 166, 63, .12)); color: var(--gold-hi); border: 1px solid var(--gold-line);
}
:root[data-theme="light"] .tag { color: var(--gold-lo); background: rgba(122, 82, 12, .12); }
.tag.muted { background: var(--card-2); color: var(--muted); border-color: var(--line); }

/* posts */
.post {
  display: grid; grid-template-columns: 176px 1fr; gap: 18px; margin-block: 12px; padding: 16px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--gold-line); box-shadow: var(--shadow);
}
.post .author { border-right: 1px solid var(--gold-line); padding-right: 14px; word-break: break-word; }
.post .author .tag { margin-left: 6px; }
.post .content { min-width: 0; }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; margin: .5rem 0; }
.modbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--card-2); border: 1px solid var(--gold-line); padding: 4px 12px; border-radius: 6px; margin: 8px 0; color: var(--muted); font-size: .9rem; }
.cc { font-weight: 700; color: var(--text); }
.cc-priest { color: var(--cc-priest); } .cc-rogue { color: var(--cc-rogue); } .cc-druid { color: var(--cc-druid); }
.cc-hunter { color: var(--cc-hunter); } .cc-mage { color: var(--cc-mage); } .cc-monk { color: var(--cc-monk); }
.cc-paladin { color: var(--cc-paladin); } .cc-shaman { color: var(--cc-shaman); } .cc-warlock { color: var(--cc-warlock); }
.cc-warrior { color: var(--cc-warrior); } .cc-death-knight { color: var(--cc-death-knight); }
.cc-demon-hunter { color: var(--cc-demon-hunter); } .cc-evoker { color: var(--cc-evoker); }

/* tables, pager, notices */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--gold-line); vertical-align: middle; }
th { color: var(--gold); font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; border-top: 0; }
td select { width: auto; padding: .3rem .5rem; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; font-size: .85rem; }
.pager a, .pager span { padding: 4px 11px; border: 1px solid var(--gold-line); border-radius: 5px; text-decoration: none; background: var(--panel); }
.pager .current { background: var(--btn-grad); color: var(--accent-ink); border-color: var(--btn-border); font-weight: 700; }
:root[data-theme="light"] .pager .current { color: #fff8e6; }
.pager .gap { border: 0; background: none; }
.notice { padding: 10px 14px; border-radius: 6px; background: var(--card-2); border: 1px solid var(--gold-line); }
.notice.ok { border-color: var(--ok); color: var(--ok); }
.errors { margin: 0 0 14px; padding: 10px 14px 10px 32px; border: 1px solid var(--danger); color: var(--danger); border-radius: 6px; background: color-mix(in srgb, var(--danger) 10%, transparent); }

@media (max-width: 720px) {
  .grid.two, .split { grid-template-columns: 1fr; }
  .post { grid-template-columns: 1fr; gap: 8px; }
  .post .author { border-right: 0; border-bottom: 1px solid var(--gold-line); padding: 0 0 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
  .list li { flex-direction: column; align-items: flex-start; }
  .count { text-align: left; }
  .mainnav { order: 3; flex-basis: 100%; }
  .account { margin-left: auto; }
  .crest { width: 76px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }