/* Realm: fantasy kingdom. Cinzel and EB Garamond (OFL). */
@font-face { font-family: "Cinzel"; src: url(fonts/cinzel-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url(fonts/cinzel-800-normal.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(fonts/eb-garamond-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(fonts/eb-garamond-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(fonts/eb-garamond-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
:root {
  --bg: #eadcbc;
  --bg-alt: #e3d2ad;
  --surface: #f6ecd4;
  --surface-2: #e6d5b0;
  --line: #c4ab7c;
  --text: #2e2013;
  --muted: #6e5638;
  --accent: #8c2f1b;
  --on-accent: #fbf3df;
  --ok: #3f7a1e;
  --warn: #a8640c;
  --bad: #9c1c22;
  --radius: 2px;
  --radius-sm: 2px;
  --shadow: 0 1px 0 #c4ab7c, 0 10px 24px -14px rgba(60, 38, 14, 0.45);
  --font-body: "EB Garamond", Garamond, Georgia, serif;
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --display-weight: 800;
  --display-tracking: 0.04em;
  --display-leading: 1;
  --hero-size: clamp(48px, 9vw, 112px);
  --hero-overlay: radial-gradient(ellipse at center, rgba(46, 32, 19, 0.35), rgba(30, 18, 8, 0.85));
  --hero-text: #fbf3df;
  --topbar-bg: color-mix(in srgb, #eadcbc 90%, transparent);
}
body { font-size: 19px; background: radial-gradient(ellipse at 50% 0%, #f3e7cb 0%, #eadcbc 55%, #dcc79c 100%) fixed; }
.hero { text-align: center; border-bottom: 3px double var(--line); }
.hero-in { grid-template-columns: 1fr; justify-items: center; }
.hero-mark { display: block; order: -1; }
.hero-mark img { width: clamp(100px, 14vw, 160px); }
.hero-copy { margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero-tagline { font-style: italic; font-size: clamp(21px, 2.6vw, 28px); }
.join { align-items: center; }
.hero-actions { justify-content: center; }
.live-line { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.btn { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; font-size: 14px; }
.btn-primary { box-shadow: inset 0 0 0 1px rgba(251, 243, 223, 0.35), 0 2px 0 #5a1d10; }
.nav a { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; font-size: 14px; color: var(--muted); }
.section-head { justify-content: center; text-align: center; flex-direction: column; align-items: center; gap: 8px; }
.section-head h2::before, .section-head h2::after { content: ""; display: inline-block; width: 48px; height: 1px; background: var(--accent); vertical-align: middle; margin: 0 18px; }
.page-head { text-align: center; border-bottom: 3px double var(--line); }
.eyebrow { font-family: var(--font-display); letter-spacing: 0.2em; }
.stats { background: var(--bg-alt); border-bottom: 3px double var(--line); }
.stat { align-items: center; text-align: center; border-left: 0; padding-left: 0; }
.stat-n { color: var(--accent); }
.feature-grid { border-top: 0; gap: var(--gap); }
.feature { background: var(--surface); padding: 28px; border: 1px solid var(--line); box-shadow: var(--shadow); outline: 1px solid var(--line); outline-offset: -7px; }
.feature-n { font-family: var(--font-display); font-size: 15px; }
.server, .rank, .staff, .contact { outline: 1px solid var(--line); outline-offset: -6px; }
.server-art { border-radius: 2px; box-shadow: inset 0 0 0 2px var(--line); }
.server-name, .rank-head h2 { letter-spacing: 0.03em; }
.server-desc, .rank .prose, .feature .prose { font-size: 17.5px; }
.perks li::before { content: "✦"; background: none; color: var(--accent); width: auto; height: auto; margin-top: 0; font-size: 13px; }
.rule-n { font-family: var(--font-display); }
.post time { font-family: var(--font-body); font-style: italic; font-size: 16px; letter-spacing: 0; }
.cta { background: #3a2412; color: #fbf3df; text-align: center; border-top: 3px double #c4ab7c; }
.cta-in { flex-direction: column; align-items: center; }
.cta .join { align-items: center; }
.cta .btn-primary { background: #c99a3a; color: #2e2013; }
.mc-badge { border-radius: 2px; }
.footer { text-align: center; border-top: 3px double var(--line); }
.footer-in { grid-template-columns: 1fr; justify-items: center; }
.footer-brand { align-items: center; }
.footer-nav { justify-content: center; }