MediaWiki:Common.css: Difference between revisions

Content deleted Content added
Inline
Revision as of 15:50, 18 August 2026


/* ========================================================================
   ERINDAL WIKI - LIVE VECTOR THEME v6.3.16 STRUCTURALLY OPTIMIZED - PHASE 2
   Target: MediaWiki 1.43.x, legacy Vector skin
   ======================================================================== */

/* Optimized: removed superseded typography passes and obsolete v5 topbar CSS.
   Current v6 server-rendered shell and page/template systems are preserved. */

:root {
  --ew-sidebar: 276px;
  --ew-topbar: 56px;
  --ew-content-max: calc(100vw - var(--ew-sidebar));
  --ew-dark-0: #02070a;
  --ew-dark-1: #061119;
  --ew-dark-2: #0b1a23;
  --ew-gold: #d1a24a;
  --ew-gold-soft: #efc979;
  --ew-paper: #efe7d9;
  --ew-paper-light: #f8f2e8;
  --ew-ink: #171513;
  --ew-border: rgba(111, 86, 54, .34);
  --ew-link: #0c4771;
}

/* ========================================================================
   PAGE THEME POLICY
   Common.css owns shared layout, typography and component behaviour.
   Individual countries, cities, deities, organizations, characters, magic
   articles and other designed pages set their own --country-*, --city-*,
   --deity-* or --wiki-* palette variables on their page wrapper.
   Do not add per-page colour classes or page-name selectors here.
   ======================================================================== */

html, body {
  background: var(--ew-dark-0) !important;
}

body {
  color: var(--ew-ink);
  font-family: "Crimson Text", Georgia, serif;
}

/* ---------- GLOBAL DARK SHELL ---------- */
#mw-panel {
  position: fixed !important;
  z-index: 90;
  top: 0 !important;
  left: 0 !important;
  bottom: 0;
  width: var(--ew-sidebar) !important;
  overflow-y: auto;
  padding: 0 16px 24px !important;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 45% 0%, rgba(58, 83, 98, .25), transparent 300px),
    linear-gradient(180deg, #0b1a23 0%, #041019 58%, #020a0f 100%) !important;
  border-right: 2px solid rgba(125, 102, 69, .52);
  box-shadow: inset -12px 0 24px rgba(0,0,0,.38), 4px 0 18px rgba(0,0,0,.18);
  color: #f4eee3;
}

/* Decorative corners */
#mw-panel::before,
#mw-panel::after {
  content: "";
  position: fixed;
  z-index: 92;
  top: 4px;
  width: 18px;
  height: 18px;
  border-color: rgba(207,163,80,.62);
  border-style: solid;
  pointer-events: none;
}
#mw-panel::before { left: 4px; border-width: 1px 0 0 1px; }
#mw-panel::after  { left: calc(var(--ew-sidebar) - 23px); border-width: 1px 1px 0 0; }

/* Replace default Vector logo area with Erindal wordmark */
#p-logo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: calc(var(--ew-sidebar) - 32px) !important;
  height: 126px !important;
  margin: 0 0 12px !important;
  border-bottom: 1px solid rgba(139,116,79,.45);
}
#p-logo a {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: none !important;
  z-index: 5;
}
#p-logo::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 25px;
  width: 72px;
  height: 72px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23d6a74d' stroke-width='3'%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Cpath d='M50 6L58 41L94 50L58 59L50 94L42 59L6 50L42 41Z'/%3E%3Cpath d='M50 17L53 44L83 50L53 56L50 83L47 56L17 50L47 44Z'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='5' fill='%23d6a74d'/%3E%3C/svg%3E");
}
#p-logo::after {
  content: "ERINDAL\A WIKI";
  white-space: pre;
  position: absolute;
  left: 101px;
  top: 28px;
  color: var(--ew-gold-soft);
  font: 700 27px/1.05 "Cinzel", Georgia, serif;
  letter-spacing: .075em;
  text-shadow: 0 2px 2px rgba(0,0,0,.65);
}

/* Sidebar sections */
#mw-panel .portal {
  background: none !important;
  margin: 0 !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid rgba(139,116,79,.46);
}
#mw-panel .portal + .portal,
#mw-panel .vector-menu-portal + .vector-menu-portal,
#mw-panel .mw-portlet + .mw-portlet {
  margin-top: 18px !important;
}
#mw-panel .portal h3 {
  height: auto !important;
  margin: 0 0 9px 12px !important;
  padding: 0 !important;
  color: #b9ad9a !important;
  background: none !important;
  font: 600 12px/1.2 "Cinzel", Georgia, serif !important;
  text-transform: uppercase;
  letter-spacing: .055em;
}
#mw-panel .portal .body {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
#mw-panel .portal .body ul { margin: 0 !important; list-style: none !important; }
#mw-panel .portal .body li,
#mw-panel .vector-menu-content-list li {
  margin: 2px 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}
#mw-panel .portal .body li a,
#mw-panel .portal .body li a:visited {
  position: relative;
  display: block;
  padding: 7px 8px 7px 39px !important;
  color: #f1ede6 !important;
  text-decoration: none !important;
  border-radius: 2px;
}
#mw-panel .portal .body li a:hover {
  color: var(--ew-gold-soft) !important;
  background: linear-gradient(90deg, rgba(35,67,93,.72), rgba(22,43,57,.20));
}
#mw-panel .portal .body li a::before,
#mw-panel .vector-menu-content-list li a::before,
#mw-panel .mw-list-item > a::before {
  content: "◆";
  position: absolute;
  left: 14px;
  top: 7px;
  width: 16px;
  color: #98a09e;
  text-align: center;
  font-size: 11px;
}
#mw-panel .portal:first-of-type .body li:first-child a {
  color: var(--ew-gold-soft) !important;
  background: linear-gradient(90deg, rgba(35,67,93,.95), rgba(22,43,57,.42));
}
#mw-panel .portal:first-of-type .body li:first-child a::before,
#p-navigation .vector-menu-content-list li:first-child a::before,
#p-navigation .mw-list-item:first-child > a::before {
  content: "⌂";
  color: var(--ew-gold-soft);
  font-size: 18px;
  top: 4px;
}

/* Hide default sidebar toolbox/footer links we don't need in the fantasy navigation */
#p-tb { display: none !important; }


/* --- Vector 1.43 legacy compatibility --- */
#mw-page-base {
  margin-left: var(--ew-sidebar) !important;
  width: calc(100vw - var(--ew-sidebar)) !important;
  background: #061119 !important;
  height: var(--ew-topbar) !important;
  max-width: none !important;
}

#mw-panel .vector-menu-portal,
#mw-panel .mw-portlet {
  background: none !important;
  margin: 0 !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid rgba(139,116,79,.46) !important;
}

#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-heading-label,
#mw-panel .mw-portlet h3 {
  height: auto !important;
  margin: 0 0 9px 12px !important;
  padding: 0 !important;
  color: #b9ad9a !important;
  background: none !important;
  font: 600 12px/1.2 "Cinzel", Georgia, serif !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
}
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list { margin:0 !important; padding:0 !important; background:none !important; }
#mw-panel .vector-menu-content-list { list-style:none !important; }
#mw-panel .vector-menu-content-list li a,
#mw-panel .vector-menu-content-list li a:visited {
  position: relative !important;
  display: block !important;
  padding: 7px 8px 7px 39px !important;
  color: #f1ede6 !important;
  text-decoration: none !important;
  border-radius: 2px !important;
}
#mw-panel .vector-menu-content-list li a:hover {
  color: var(--ew-gold-soft) !important;
  background: linear-gradient(90deg,rgba(35,67,93,.72),rgba(22,43,57,.20)) !important;
}
#p-navigation .vector-menu-content-list li:first-child a {
  color: var(--ew-gold-soft) !important;
  background: linear-gradient(90deg,rgba(35,67,93,.95),rgba(22,43,57,.42)) !important;
}


/* Vector 1.43 link text lives inside spans; style those explicitly. */
#mw-panel .mw-list-item > a,
#mw-panel .mw-list-item > a:visited {
  position: relative !important;
  display: block !important;
  padding: 7px 8px 7px 39px !important;
  color: #f1ede6 !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  font: 15px/1.2 "Crimson Text", Georgia, serif !important;
}
#mw-panel .mw-list-item > a > span,
#mw-panel .mw-list-item > a:visited > span {
  color: inherit !important;
  font: inherit !important;
}
#mw-panel .mw-list-item > a:hover {
  color: var(--ew-gold-soft) !important;
  background: linear-gradient(90deg, rgba(35,67,93,.72), rgba(22,43,57,.20)) !important;
}
#p-navigation .mw-list-item:first-child > a {
  color: var(--ew-gold-soft) !important;
  background: linear-gradient(90deg, rgba(35,67,93,.95), rgba(22,43,57,.42)) !important;
}

/* Never show an auto-generated TOC on the front page. */
body.page-Main_Page .toc,
body.page-Main_Page #toc { display: none !important; }

/* MediaWiki file markup wrappers */
.ew-hero-image > span, .ew-hero-image > a,
.ew-map-image > span, .ew-map-image > a,
.ew-feature-image > span, .ew-feature-image > a,
.ew-strip > span, .ew-strip > a { display:block !important; width:100% !important; height:100% !important; }
.ew-hero-image .mw-file-description,
.ew-map-image .mw-file-description,
.ew-feature-image .mw-file-description,
.ew-strip .mw-file-description { display:block !important; width:100% !important; height:100% !important; }

/* ---------- GLOBAL TOPBAR COMPONENTS ---------- */
.ew-global-menu {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-width: 0;
}
.ew-global-menu a,
.ew-global-menu a:visited {
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: #f3eee5 !important;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none !important;
  white-space: nowrap;
}
.ew-global-menu a:hover { color: var(--ew-gold-soft) !important; background: rgba(255,255,255,.035); }
.ew-menu-arrow { margin-left: 6px; font-size: 11px; }
.ew-global-search {
  margin-left: auto;
  width: min(304px, 26vw);
  height: 35px;
  display: flex;
  border: 1px solid rgba(151,128,91,.42);
  background: rgba(0,0,0,.28);
  border-radius: 4px;
  overflow: hidden;
}
.ew-global-search input[type="search"] {
  min-width: 0;
  flex: 1;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #eee8de !important;
  padding: 0 12px !important;
  font: 15px "Crimson Text", Georgia, serif !important;
}
.ew-global-search input::placeholder { color: #d4cbc0; opacity: .88; }
.ew-global-search button {
  width: 42px;
  border: 0;
  border-left: 1px solid rgba(151,128,91,.34);
  background: transparent;
  color: #f1eade;
  font-size: 22px;
  cursor: pointer;
}
.ew-global-tools { display: flex; height: 100%; margin-left: 9px; }
.ew-tool-link,
.ew-tool-link:visited {
  width: 44px;
  display: grid;
  place-items: center;
  color: #f3eee5 !important;
  text-decoration: none !important;
  border-left: 1px solid rgba(151,128,91,.20);
  font-size: 21px;
}
.ew-tool-link:hover { color: var(--ew-gold-soft) !important; }

/* ---------- VECTOR CONTENT POSITIONING ---------- */
#mw-head-base {
  margin-left: var(--ew-sidebar) !important;
  width: calc(100vw - var(--ew-sidebar)) !important;
  margin-top: var(--ew-topbar) !important;
  height: 34px !important;
  background: #0a151c !important;
  max-width: none !important;
}
#mw-head {
  left: var(--ew-sidebar) !important;
  right: auto !important;
  width: calc(100vw - var(--ew-sidebar)) !important;
  top: var(--ew-topbar) !important;
  height: 34px !important;
  background: linear-gradient(180deg, #0a151c, #071017) !important;
  border-bottom: 1px solid rgba(125,102,69,.30);
  box-sizing: border-box;
  max-width: none !important;
}
#left-navigation,
#right-navigation { margin-top: 0 !important; height: 34px !important; }
.vector-menu-tabs,
.vector-menu-tabs span,
.vector-menu-tabs ul { background-image: none !important; }
.vector-menu-tabs li {
  background-image: none !important;
  background: transparent !important;
  height: 34px !important;
}
.vector-menu-tabs li a,
.vector-menu-tabs li a:visited {
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 10px !important;
  color: #cfc6ba !important;
  background: transparent !important;
  font-size: 12px !important;
}
.vector-menu-tabs li.selected a,
.vector-menu-tabs li a:hover { color: var(--ew-gold-soft) !important; }
#p-personal { display: none !important; }

#content {
  margin-left: var(--ew-sidebar) !important;
  width: calc(100vw - var(--ew-sidebar)) !important;
  max-width: none !important;
  margin-top: 0 !important;
  border: 0 !important;
  min-height: calc(100vh - 90px);
  box-sizing: border-box;
  padding: 34px 42px 44px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.02)),
    repeating-linear-gradient(45deg, rgba(119,91,49,.012), rgba(119,91,49,.012) 2px, transparent 2px, transparent 7px),
    var(--ew-paper) !important;
  color: var(--ew-ink) !important;
}
#content a,
#content a:visited { color: var(--ew-link); }
#content a:hover { color: #8c5d0a; }
#firstHeading,
#content h1,
#content h2,
#content h3,
#content h4 { font-family: "Cinzel", Georgia, serif; color: #181512; }
#firstHeading { border-bottom: 1px solid rgba(91,70,44,.35); }

#footer {
  position: relative;
  margin-left: var(--ew-sidebar) !important;
  width: calc(100vw - var(--ew-sidebar)) !important;
  max-width: none !important;
  box-sizing: border-box;
  padding: 17px 28px 19px !important;
  background:
    linear-gradient(180deg, rgba(18,39,51,.22), rgba(6,17,25,0) 55%),
    #061119 !important;
  color: #c8c2b7 !important;
  border-top: 1px solid rgba(197,157,79,.36);
}

/* Vector gives the individual footer lists/items their own colours in some
   versions. Set them explicitly so the last-edited line never disappears
   against the dark Erindal footer. */
#footer #footer-info,
#footer #footer-info li,
#footer #footer-info-lastmod,
#footer #footer-info-copyright {
  color: #bdb7ac !important;
}

#footer #footer-info {
  margin: 0 0 0.55rem !important;
  padding: 0 !important;
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
}

#footer #footer-places {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0 !important;
  padding: 0 !important;
}

#footer #footer-places li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#footer a,
#footer a:visited {
  color: #d1b66d !important;
  text-decoration: none !important;
}

#footer a:hover,
#footer a:focus {
  color: #fff0bd !important;
  text-decoration: underline !important;
}

/* The stock MediaWiki and Debian image badges clash with the custom fantasy
   shell. The software credits remain available through the normal site/about
   information; hide only the graphical footer badges. */
#footer #footer-icons {
  display: none !important;
}

/* ---------- MAIN PAGE: remove article chrome ---------- */
body.page-Main_Page #mw-head,
body.page-Main_Page #mw-head-base,
body.page-Main_Page #mw-page-base { display: none !important; }
body.page-Main_Page #content {
  margin-top: var(--ew-topbar) !important;
  padding: 0 !important;
  background: var(--ew-dark-0) !important;
}
body.page-Main_Page #firstHeading,
body.page-Main_Page #siteSub,
body.page-Main_Page #contentSub,
body.page-Main_Page .mw-indicators,
body.page-Main_Page .catlinks,
body.page-Main_Page #jump-to-nav { display: none !important; }
body.page-Main_Page #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output { margin: 0 !important; padding: 0 !important; }
body.page-Main_Page .mw-parser-output > p:empty { display:none; }

/* ---------- HOMEPAGE ---------- */
.ew-home,
.ew-home * { box-sizing: border-box; }
.ew-home {
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--ew-ink);
  background: var(--ew-paper);
  font-family: "Crimson Text", Georgia, serif;
}
.ew-home a { text-decoration: none !important; }

.ew-hero {
  height: clamp(278px, 18vw, 340px);
  position: relative;
  overflow: hidden;
  background: #061019;
  border-bottom: 2px solid rgba(91,70,44,.48);
}
.ew-hero-image { position:absolute; inset:0; overflow:hidden; }
.ew-hero-image .mw-file-element,
.ew-hero-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}
.ew-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(2,7,10,.94) 0%, rgba(2,7,10,.78) 30%, rgba(2,7,10,.30) 48%, rgba(2,7,10,.08) 69%, rgba(2,7,10,.14) 100%);
}
.ew-hero-copy {
  position: relative;
  z-index: 2;
  padding: 48px 0 0 55px;
  color: #fffaf1;
  text-shadow: 0 3px 4px rgba(0,0,0,.75);
}
.ew-hero-kicker { text-transform: uppercase; font-size: 22px; letter-spacing: .04em; margin-bottom: 2px; }
.ew-hero-title {
  color: #fffaf1;
  font-size: 54px;
  line-height: 1.03;
  letter-spacing: .045em;
  text-transform: uppercase;
  font-weight: 500;
}
.ew-gold-rule { height: 28px; display: flex; align-items: center; margin: 4px 0 8px; }
.ew-gold-rule::before { content: "✧"; color: var(--ew-gold); font-size: 17px; margin-right: 4px; }
.ew-gold-rule span { display:block; width:68px; height:2px; background:linear-gradient(90deg,var(--ew-gold),rgba(209,162,74,0)); }
.ew-hero-copy p { margin:0; color:#fff7eb; font-size:16px; line-height:1.45; }

.ew-home-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(420px,38%,560px);
  gap:8px;
  padding:8px 10px 0;
  background:#efe7d9;
}
.ew-home-left,
.ew-home-right { min-width:0; }
.ew-panel {
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.08)),
    repeating-linear-gradient(45deg,rgba(119,91,49,.018),rgba(119,91,49,.018) 2px,transparent 2px,transparent 7px),
    var(--ew-paper-light);
  border:1px solid var(--ew-border);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.27),0 1px 2px rgba(0,0,0,.08);
}
.ew-panel::before,
.ew-panel::after {
  content:"";
  position:absolute;
  width:13px;
  height:13px;
  border-color:rgba(142,116,78,.32);
  border-style:solid;
  pointer-events:none;
}
.ew-panel::before { top:5px; left:5px; border-width:1px 0 0 1px; }
.ew-panel::after { top:5px; right:5px; border-width:1px 1px 0 0; }
.ew-panel h2 {
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  color:#111 !important;
  font-size:20px !important;
  line-height:1.25 !important;
  text-transform:uppercase;
  font-weight:700;
}
.ew-panel p { color:#171717; font-size:15.5px; line-height:1.42; }

.ew-overview {
  min-height:222px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 42%;
  overflow:hidden;
}
.ew-panel-copy { padding:31px 24px 24px 39px; }
.ew-heading-mark { color:#58605f; margin-right:9px; font-size:26px; vertical-align:-2px; }
.ew-map-image { min-height:210px; overflow:hidden; opacity:.80; }
.ew-map-image .mw-file-element,
.ew-map-image img { width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; mix-blend-mode:multiply; }

.ew-categories-panel { margin-top:8px; padding:20px 18px 18px; min-height:337px; }
.ew-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin-top:12px; }
.ew-card {
  min-height:75px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 13px;
  border:1px solid rgba(118,93,58,.25);
  background:rgba(250,246,238,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.ew-card-icon { width:42px; flex:0 0 auto; color:#454847; font-size:30px; text-align:center; line-height:1; }
.ew-card-icon.ew-gold { color:#ba7e12; }
.ew-card a,
.ew-card-label { display:block; color:#151515 !important; text-transform:uppercase; font-size:12.5px; font-weight:700; line-height:1.15; }
.ew-card:hover { background:rgba(255,250,240,.96); border-color:rgba(153,111,52,.48); }
.ew-card:focus-visible { outline:2px solid var(--ew-gold); outline-offset:-3px; }
.ew-card small { display:block; margin-top:7px; color:#2d2b27; font-size:12px; }
.ew-strip { grid-column:span 3; min-height:75px; overflow:hidden; border:1px solid rgba(118,93,58,.25); }
.ew-strip .mw-file-element,
.ew-strip img { width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; filter:sepia(.16) saturate(.78) brightness(1.04); }

.ew-home-right .ew-panel { margin-bottom:8px; }
.ew-featured { padding:19px 18px 18px; }
.ew-featured h2 { display:flex; align-items:center; gap:12px; margin-bottom:12px !important; }
.ew-featured h2 span { color:#5d6260; font-size:23px; }
.ew-feature-image { height:145px; overflow:hidden; border:1px solid rgba(65,47,27,.35); margin-bottom:9px; }
.ew-feature-image .mw-file-element,
.ew-feature-image img { width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; }
.ew-featured h3 { margin:0 0 5px !important; padding:0 !important; border:0 !important; color:#111 !important; font-size:20px !important; text-transform:uppercase; font-weight:500; }
.ew-featured p { margin:0; font-size:15px; line-height:1.3; }
.ew-readmore { margin-top:9px; font-size:14px; }
.ew-readmore a { color:#073d67 !important; }

.ew-recent { padding:15px 17px 15px; min-height:246px; }
.ew-recent h2 { display:flex; align-items:center; gap:8px; font-size:16px !important; margin-bottom:12px !important; }
.ew-recent-row { display:grid; grid-template-columns:32px minmax(0,1fr); gap:9px; align-items:center; margin:6px 0; }
.ew-recent-icon { width:32px; height:32px; display:grid; place-items:center; background:#1a2228; color:#eee9dd; border:1px solid rgba(100,78,45,.48); font-size:12px; }
.ew-recent-row a { color:#073d67 !important; font-size:13.5px; line-height:1.1; }
.ew-recent-row small { display:block; color:#4c4842; font-size:11.5px; margin-top:2px; }
.ew-recent-loading { padding:8px 0; color:#5b554c; font-size:13px; }

.ew-important { margin:6px 10px 10px; padding:14px 26px 16px; }
.ew-important h2 { font-size:15px !important; margin-bottom:12px !important; }
.ew-important h2 span { color:#676b68; margin-right:8px; }
.ew-important-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; }
.ew-important-grid a { color:#073d67 !important; font-size:14px; }
.ew-important-grid small { display:block; margin-top:4px; color:#171717; font-size:12px; line-height:1.28; }

/* ---------- Article styling ---------- */
body:not(.page-Main_Page) .mw-parser-output { max-width: 1180px; }
body:not(.page-Main_Page) .mw-parser-output p { font-size: 16px; line-height: 1.58; }
body:not(.page-Main_Page) .mw-parser-output h2 {
  margin-top: 1.5em;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(91,70,44,.28);
}
.mw-editsection { font-family: Arial, sans-serif; font-size: 11px; }
.toc, .mw-warning, .mw-message-box {
  background: rgba(255,255,255,.42) !important;
  border-color: rgba(111,86,54,.32) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .ew-global-menu a { padding: 0 10px; font-size: 12px; }
  .ew-global-search { width: 220px; }
  .ew-home-grid { grid-template-columns:1fr; }
  .ew-home-right { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .ew-home-right .ew-panel { margin-bottom:0; }
}

@media (max-width: 900px) {
  :root { --ew-sidebar: 218px; }
  #p-logo::before { width:58px; height:58px; left:8px; top:30px; }
  #p-logo::after { left:72px; top:34px; font-size:21px; }
  .ew-global-menu a:nth-child(n+4) { display:none; }
  #content { padding:26px 24px 36px !important; }
  body.page-Main_Page #content { padding:0 0 10px !important; }
  .ew-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ew-strip { grid-column:span 2; }
  .ew-important-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  :root { --ew-sidebar: 0px; }
  #mw-panel { display:none !important; }
  #ew-global-topbar { left:0; padding-left:10px; }
  #mw-head, #mw-head-base { left:0 !important; margin-left:0 !important; }
  #content, #footer { margin-left:0 !important; }
  .ew-global-menu a:nth-child(n+3) { display:none; }
  .ew-global-search { width: min(240px, 45vw); }
  .ew-tool-link:first-child { display:none; }
  .ew-overview { grid-template-columns:1fr; }
  .ew-map-image { display:none; }
  .ew-home-right { grid-template-columns:1fr; }
  .ew-category-grid { grid-template-columns:1fr; }
  .ew-strip { grid-column:span 1; }
  .ew-important-grid { grid-template-columns:1fr; }
  .ew-hero-copy { padding-left:26px; }
  .ew-hero-title { font-size:40px; }
}


/* Final MediaWiki parser cleanup */
body.page-Main_Page .ew-home p { margin-top:0; }
body.page-Main_Page .ew-home .mw-default-size,
body.page-Main_Page .ew-home figure { margin:0 !important; padding:0 !important; max-width:none !important; }
body.page-Main_Page .ew-home figure > a { display:block !important; width:100% !important; height:100% !important; }
body.page-Main_Page #mw-page-base { background:#061119 !important; }


/* ---------- FLUID / WIDE-SCREEN LAYOUT ---------- */

body.page-Main_Page .ew-home {
  width: 100% !important;
  max-width: none !important;
}

/* Keep the right column useful on wide screens without letting it eat half the page. */

/* Let category cards gain columns on very wide displays instead of becoming huge. */
@media (min-width: 1900px) {
  .ew-category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ew-strip { grid-column: span 4; }
}

/* When viewport is only moderately wide, preserve the reference-image proportions. */
@media (min-width: 1181px) and (max-width: 1550px) {
  .ew-home-grid { grid-template-columns: minmax(0, 1.56fr) minmax(360px, .98fr); }
}


/* ========================================================================
   TYPOGRAPHY - CONSOLIDATED CURRENT STATE

   Final values from the former v4.4-v4.8 typography passes. Older font
   experiments were removed so each element has one authoritative rule.
   ======================================================================== */

/* Readable body/lore face. */
html body,
#content,
#bodyContent,
#mw-content-text,
.mw-parser-output,
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output td,
.mw-parser-output th,
.mw-parser-output dd,
.mw-parser-output dt,
.ew-home,
.ew-panel p,
.ew-card small,
.ew-recent-row,
.ew-global-search input[type="search"] {
  font-family: "Alegreya", Georgia, serif !important;
  font-weight: 400 !important;
}

/* Navigation chrome. */
#mw-panel .mw-list-item > a,
#mw-panel .mw-list-item > a > span,
#mw-panel .vector-menu-content-list li a,
#mw-panel .portal .body li a {
  font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: .012em !important;
}

#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-heading-label,
#mw-panel .portal h3 {
  font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .07em !important;
}

/* Legacy Vector fallback for portlets that expose only an h3 heading. */
#mw-panel .mw-portlet h3 {
  font-family: "Cinzel", Georgia, serif !important;
  font-weight: 600 !important;
}

#ew-global-topbar,
.ew-global-menu,
.ew-global-menu a {
  font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
}

.ew-global-menu { font-weight: 400 !important; }

.ew-global-menu a {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .045em !important;
}

/* Content-facing headings and labels. */
#firstHeading,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
.ew-panel h2,
.ew-panel h3,
.ew-panel-title,
.ew-section-title,
.ew-category-title,
.ew-featured h2,
.ew-featured h3,
.ew-recent h2,
.ew-important h2,
.ew-overview h2,
.ew-category h2,
.ew-card-label {
  font-family: "Alegreya SC", "Alegreya", Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: .015em !important;
}

.ew-card-label {
  display: block !important;
  color: #171513 !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
}

.ew-featured h3,
.ew-featured h3 a,
.ew-featured .mw-selflink {
  font-family: "Alegreya SC", "Alegreya", Georgia, serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .018em !important;
  text-transform: none !important;
}

.ew-panel h2,
.ew-panel-title,
.ew-section-title,
.ew-category-title,
.ew-overview h2,
.ew-category h2,
.ew-featured h2,
.ew-recent h2,
.ew-important h2 {
  font-size: 21px !important;
  line-height: 1.15 !important;
}

#firstHeading { font-size: 34px !important; line-height: 1.12 !important; }
#content h2 { font-size: 26px !important; line-height: 1.18 !important; }
#content h3 { font-size: 21px !important; line-height: 1.2 !important; }
#content h4 { font-size: 18px !important; line-height: 1.22 !important; }

/* Strong display face only for branding. */
#p-logo::after,
.ew-hero-title {
  font-family: "Cinzel Decorative", "Cinzel", Georgia, serif !important;
  font-weight: 700 !important;
}

#p-logo::after { letter-spacing: .055em !important; }
.ew-hero-title { letter-spacing: .025em !important; }

.ew-hero-kicker {
  font-family: "Alegreya SC", "Alegreya", Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

/* Long-form prose sizing. */
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output dd,
.mw-parser-output dt,
.ew-home,
.ew-panel p {
  font-size: 16.5px !important;
  line-height: 1.48 !important;
}

/* Use Vector's own edit controls. Do not create a second custom one. */
#ca-edit,
#ca-ve-edit,
#ca-viewsource {
  display: list-item !important;
}

/* Legacy custom edit shortcut is no longer used. */
.ew-edit-link { display: none !important; }

/* =========================================================
   SHARED ARTICLE PRIMITIVES
   Structural rules shared by the designed article systems.
   Page-specific colours and unique behavior remain local.
   ========================================================= */

.country-page,
.history-page,
.city-page,
.deity-page,
.wiki-page {
  box-sizing: border-box;
  width: calc(100vw - var(--ew-sidebar) - 84px) !important;
  max-width: none !important;
  font-family: "Alegreya", Georgia, serif;
  line-height: 1.62;
}

.country-hero,
.history-hero,
.city-hero,
.deity-hero,
.wiki-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.country-hero,
.history-hero,
.city-hero,
.deity-hero {
  box-shadow: 0 12px 30px rgba(28, 18, 13, 0.19);
}

.country-hero__overlay,
.history-hero__overlay,
.city-hero__overlay,
.deity-hero__overlay,
.wiki-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.country-hero__eyebrow,
.history-hero__eyebrow,
.city-hero__eyebrow,
.deity-hero__eyebrow,
.wiki-hero__eyebrow {
  margin-bottom: 0.25rem;
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.country-hero__title,
.history-hero__title,
.city-hero__title,
.deity-hero__title,
.wiki-hero__title {
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.72);
}

.country-hero__subtitle,
.history-hero__subtitle,
.city-hero__subtitle,
.deity-hero__subtitle,
.wiki-hero__subtitle {
  font-style: italic;
}

.country-overview,
.history-overview,
.city-overview,
.deity-overview {
  display: grid;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2.25rem;
}

.country-overview__lead,
.history-overview__lead,
.city-overview__lead,
.deity-overview__lead {
  font-size: 1.08rem;
}

.country-overview__lead > p:first-child::first-letter,
.history-overview__lead > p:first-child::first-letter,
.city-overview__lead > p:first-child::first-letter,
.deity-overview__lead > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
}

.country-record,
.history-record,
.city-record,
.deity-record,
.wiki-record {
  overflow: hidden;
  border-radius: 12px;
}

.country-record__heading,
.history-record__heading,
.city-record__heading,
.deity-record__heading {
  padding: 0.85rem 1rem;
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.country-record__row,
.history-record__row,
.city-record__row,
.deity-record__row {
  display: grid;
  gap: 0.75rem;
  padding: 0.62rem 0.85rem;
}

.country-record__row span,
.history-record__row span,
.city-record__row span,
.deity-record__row span {
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
}

.country-card-grid,
.deity-card-grid,
.wiki-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.75rem;
}

.country-card-grid--three,
.deity-card-grid--three,
.wiki-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.history-figure,
.deity-figure,
.wiki-figure {
  box-sizing: border-box;
  margin: 1.35rem 0 1.9rem;
  overflow: hidden;
  border-radius: 10px;
}

.history-figure__caption,
.deity-figure__caption,
.wiki-figure__caption {
  padding: 0.65rem 0.9rem 0.72rem;
  font-size: 0.94rem;
  font-style: italic;
  line-height: 1.35;
}

.city-index__grid,
.deity-index__grid,
.wiki-index__grid {
  display: grid;
}

.city-index__grid > div,
.deity-index__grid > div,
.wiki-index__grid > div {
  min-width: 0;
}

.city-index__grid span,
.city-index__grid strong,
.deity-index__grid span,
.deity-index__grid strong,
.wiki-index__grid span,
.wiki-index__grid strong {
  display: block;
}

.city-index__grid span,
.deity-index__grid span,
.wiki-index__grid span {
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.city-index__grid strong,
.deity-index__grid strong,
.wiki-index__grid strong {
  margin-top: 0.12rem;
  font-size: 0.98rem;
  line-height: 1.2;
}

.city-index__heading,
.deity-index__heading,
.wiki-index__heading {
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
  text-align: center;
}

.deity-card,
.wiki-card {
  min-width: 0;
  padding: 1rem;
  border-radius: 9px;
}

.deity-card h3,
.wiki-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.17rem;
}

.deity-card p,
.wiki-card p {
  margin: 0.35rem 0 0;
}

.history-note,
.city-note {
  margin: 1.25rem 0;
  border-radius: 8px;
}

.history-note strong,
.city-note strong {
  font-family: "Alegreya SC", Georgia, serif;
}

.history-page__body,
.city-page__body {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
}

.history-page__body .toc,
.city-page__body .toc,
.history-page__body #toc,
.city-page__body #toc {
  margin: 0 0 1.8rem;
  padding: 0.9rem 1.1rem;
  border-radius: 9px;
}

.history-page__body h2,
.city-page__body h2,
.deity-page__body h2,
.wiki-page__body h2 {
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
}

.city-page__body h2::after,
.deity-page__body h2::after,
.wiki-page__body h2::after {
  content: "";
  flex: 1;
  height: 1px;
}

.city-index__grid a,
.deity-index__grid a,
.wiki-index__grid a {
  display: block;
  text-decoration: none;
}

.history-figure .mw-file-element,
.deity-figure .mw-file-element,
.history-figure__image,
.deity-figure__image {
  height: clamp(220px, 28vw, 340px);
  object-fit: cover;
}

.deity-quote,
.wiki-quote {
  font-size: 1.08rem;
  font-style: italic;
}

/* =========================================================
   COUNTRY PAGES
   Country-specific components and palette usage.
   ========================================================= */

.country-page {
  color: var(--country-ink, var(--ew-ink));
}


.country-hero {
  background: var(--country-deep, var(--ew-dark-2));
}

/* Do not show the blue missing-file link before the hero artwork is uploaded. */

.country-hero__overlay {
  color: #fffaf2;
  background:
    linear-gradient(180deg, rgba(20, 12, 9, 0.06) 18%, rgba(20, 12, 9, 0.88) 100%),
    linear-gradient(90deg, rgba(20, 12, 9, 0.52), transparent 64%);
}

.country-hero__eyebrow {
  color: #efb879;
}

.country-hero__subtitle {
  color: #eadcc9;
}

.country-overview {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.country-overview__lead > p:first-child::first-letter {
  color: var(--country-accent, var(--ew-gold));
  font-size: 3.7em;
  line-height: 0.78;
}

.country-quickfacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.country-quickfact {
  min-height: 74px;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--country-line, var(--ew-border));
  border-left: 4px solid var(--country-accent, var(--ew-gold));
  border-radius: 8px;
  background: linear-gradient(135deg, var(--country-paper, var(--ew-paper-light)), var(--country-paper-alt, var(--ew-paper)));
  box-shadow: 0 4px 12px rgba(63, 43, 31, 0.07);
}

.country-quickfact span {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--country-muted, #6f665d);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.country-record {
  border: 1px solid var(--country-line, var(--ew-border));
  background: var(--country-paper, var(--ew-paper-light));
  box-shadow: 0 10px 22px rgba(55, 37, 27, 0.13);
}

.country-record__heading {
  color: #fff7ec;
  background: linear-gradient(135deg, var(--country-deep, var(--ew-dark-2)), #4a2b20);
}

.country-record__emblem,
.country-record__map {
  padding: 1rem;
  text-align: center;
}

.country-record__emblem img,
.country-record__map img {
  max-width: 100%;
  height: auto;
}

.country-record__row {
  grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.3fr);
  border-top: 1px solid var(--country-line, var(--ew-border));
}

.country-record__row span {
  color: var(--country-muted, #6f665d);
}

.country-page h2 {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 2.35rem;
  border-bottom: 0;
  color: var(--country-deep, var(--ew-dark-2));
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
}

.country-page h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--country-accent, var(--ew-gold)), transparent);
}

.country-page h3 {
  color: var(--country-accent, var(--ew-gold));
  font-family: "Alegreya SC", Georgia, serif;
}

.country-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  gap: 1.5rem;
  align-items: center;
  margin: 1rem 0 1.75rem;
}

.country-feature--image-left {
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
}

.country-feature__media {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(50, 33, 24, 0.16);
}

.country-feature__media img {
  display: block;
  width: 100%;
  min-height: 230px;
  object-fit: cover;
}

.country-card-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.country-mini-card,
.country-place-card,
.country-person-card {
  overflow: hidden;
  border: 1px solid var(--country-line, var(--ew-border));
  border-radius: 10px;
  background: var(--country-paper, var(--ew-paper-light));
  box-shadow: 0 5px 14px rgba(62, 42, 31, 0.08);
}

.country-mini-card,
.country-person-card {
  padding: 1rem;
}

.country-mini-card h3,
.country-place-card h3,
.country-person-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.country-mini-card p,
.country-place-card p,
.country-person-card p {
  margin: 0;
}

.country-place-card__body {
  padding: 0.85rem 1rem;
}

.country-place-card .mw-file-description,
.country-place-card__image,
.country-place-card__image img {
  display: block;
  width: 100%;
  height: 135px;
  object-fit: cover;
}

/* Missing territory/city art should not leave a large empty image panel. */
.country-place-card a.new.country-place-card__image {
  display: none !important;
}

.country-person-card {
  text-align: center;
}

.country-person-card__portrait {
  margin: -1rem -1rem 0.85rem;
  overflow: hidden;
}

.country-person-card__portrait img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  object-position: center 20%;
}

.country-relations {
  display: grid;
  gap: 0.7rem;
}

.country-relations > div {
  position: relative;
  padding: 0.85rem 1rem;
  border: 1px solid var(--country-line, var(--ew-border));
  border-left: 4px solid var(--country-accent, var(--ew-gold));
  border-radius: 8px;
  background: rgba(245, 240, 230, 0.68);
}

.country-relations p {
  margin: 0.3rem 0 0;
}

.relation {
  display: inline-block;
  margin-left: 0.65rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  vertical-align: 0.08em;
}

.relation--friendly { background: #39715a; }
.relation--guarded { background: #6f6678; }
.relation--uneasy { background: #a06b2f; }
.relation--tense { background: #9a4f37; }
.relation--hostile { background: #7f3030; }

.country-mainlink,
.country-related {
  margin: 0.8rem 0 1.2rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--country-accent, var(--ew-gold));
  background: linear-gradient(90deg, rgba(152, 77, 46, 0.11), transparent);
}

@media (max-width: 760px) {
  .country-record {
    order: -1;
  }
}

/* ========================================================================
   v6.0 SERVER-RENDERED SHELL REPAIR

   #ew-server-topbar and #ew-sidebar-toggle are emitted by LocalSettings.php.
   They do not depend on a custom MediaWiki:Sidebar portlet or Common.js.
   ======================================================================== */

/* Hide the two obsolete implementations if an older Sidebar or cached script
   still supplies them. */
#ew-global-topbar,
#mw-panel #p-erindal-topbar {
  display: none !important;
}

#ew-server-topbar {
  position: fixed !important;
  z-index: 150 !important;
  top: 0 !important;
  left: var(--ew-sidebar) !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: calc(100vw - var(--ew-sidebar)) !important;
  max-width: none !important;
  height: var(--ew-topbar) !important;
  margin: 0 !important;
  padding: 0 18px 0 30px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  color: #f3eee5 !important;
  background: linear-gradient(180deg, #08141c 0%, #03090d 100%) !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(112, 88, 58, .46) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 2px 6px rgba(0,0,0,.28) !important;
  font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
}

#ew-server-topbar::before,
#ew-server-topbar::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 18px;
  height: 18px;
  border-color: rgba(207, 163, 80, .55);
  border-style: solid;
  pointer-events: none;
}

#ew-server-topbar::before {
  left: 4px;
  border-width: 1px 0 0 1px;
}

#ew-server-topbar::after {
  right: 4px;
  border-width: 1px 1px 0 0;
}

#ew-server-topbar .ew-global-menu {
  display: flex !important;
  flex: 0 1 auto !important;
  align-items: stretch !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#ew-server-topbar .ew-global-section {
  position: relative !important;
  display: block !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#ew-server-topbar .ew-global-section > summary {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 17px !important;
  box-sizing: border-box !important;
  color: #f3eee5 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  list-style: none !important;
  font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

#ew-server-topbar .ew-global-section > summary::-webkit-details-marker {
  display: none !important;
}

#ew-server-topbar .ew-global-section > summary::marker {
  content: "";
}

#ew-server-topbar .ew-global-section > summary span {
  margin-left: 7px;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  transition: transform .16s ease;
}

#ew-server-topbar .ew-global-section[open] > summary span {
  transform: rotate(180deg);
}

#ew-server-topbar .ew-global-section > summary:hover,
#ew-server-topbar .ew-global-section > summary:focus,
#ew-server-topbar .ew-global-section[open] > summary {
  color: var(--ew-gold-soft) !important;
  background: rgba(255,255,255,.04) !important;
}

#ew-server-topbar .ew-global-dropdown {
  position: absolute !important;
  z-index: 170 !important;
  top: calc(var(--ew-topbar) - 2px) !important;
  left: 0 !important;
  display: none !important;
  min-width: 220px !important;
  margin: 0 !important;
  padding: 7px !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, #0b1a23, #041019) !important;
  border: 1px solid rgba(125, 102, 69, .62) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.36) !important;
}

#ew-server-topbar .ew-global-section[open] > .ew-global-dropdown {
  display: block !important;
}

#ew-server-topbar .ew-global-dropdown a,
#ew-server-topbar .ew-global-dropdown a:visited {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  color: #f1ede6 !important;
  background: transparent !important;
  font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: .015em !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#ew-server-topbar .ew-global-dropdown a:hover,
#ew-server-topbar .ew-global-dropdown a:focus {
  color: var(--ew-gold-soft) !important;
  background: linear-gradient(90deg, rgba(35,67,93,.82), rgba(22,43,57,.24)) !important;
}

#ew-server-topbar .ew-global-search {
  position: static !important;
  flex: 0 1 304px !important;
  width: min(304px, 26vw) !important;
  height: 35px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#ew-server-topbar .ew-global-search input[type="search"] {
  min-width: 0 !important;
  height: 33px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  font-family: "Alegreya", Georgia, serif !important;
  font-size: 15px !important;
}

#ew-server-topbar .ew-global-search button {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 33px !important;
  padding: 0 !important;
  line-height: 33px !important;
}

/* The server-rendered topbar already contains its own search. */
#p-search {
  display: none !important;
}

/* A visible tab on the sidebar edge. When the panel is closed it remains at
   the left edge so the sidebar can always be opened again. */
#ew-sidebar-toggle {
  position: fixed !important;
  z-index: 190 !important;
  top: 70px !important;
  left: calc(var(--ew-sidebar) - 14px) !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 1px 3px 0 !important;
  color: var(--ew-gold-soft) !important;
  background: linear-gradient(180deg, #102431, #06131b) !important;
  border: 1px solid rgba(207,163,80,.72) !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.44) !important;
  font: 28px/1 Georgia, serif !important;
  text-align: center !important;
  cursor: pointer !important;
}

#ew-sidebar-toggle:hover,
#ew-sidebar-toggle:focus {
  color: #fff4d6 !important;
  background: linear-gradient(180deg, #173447, #0a1b25) !important;
  outline: 2px solid rgba(239,201,121,.30) !important;
  outline-offset: 1px !important;
}

html.ew-sidebar-collapsed {
  --ew-sidebar: 0px;
}

html.ew-sidebar-collapsed #mw-panel {
  display: block !important;
  width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.ew-sidebar-collapsed #mw-panel > * {
  display: none !important;
}

html.ew-sidebar-collapsed #mw-panel::before,
html.ew-sidebar-collapsed #mw-panel::after {
  display: none !important;
}

html.ew-sidebar-collapsed #ew-sidebar-toggle {
  left: 0 !important;
  border-left: 0 !important;
  border-radius: 0 6px 6px 0 !important;
}

#mw-panel,
#mw-page-base,
#mw-head-base,
#mw-head,
#content,
#footer,
#ew-server-topbar,
#ew-sidebar-toggle {
  transition: left .18s ease, width .18s ease, margin-left .18s ease !important;
}

@media (max-width: 1180px) {
  #ew-server-topbar .ew-global-section > summary {
    padding-right: 11px !important;
    padding-left: 11px !important;
    font-size: 14px !important;
  }

  #ew-server-topbar .ew-global-search {
    flex-basis: 220px !important;
    width: 220px !important;
  }
}

@media (max-width: 900px) {
  #ew-server-topbar .ew-global-section:nth-child(n+5) {
    display: none !important;
  }
}

@media (max-width: 700px) {
  html:not(.ew-sidebar-collapsed) {
    --ew-sidebar: 218px;
  }

  #mw-panel {
    display: block !important;
  }

  #ew-server-topbar .ew-global-section:nth-child(n+3) {
    display: none !important;
  }

  #ew-server-topbar .ew-global-search {
    flex-basis: min(210px, 48vw) !important;
    width: min(210px, 48vw) !important;
  }

  #ew-sidebar-toggle {
    display: grid !important;
  }
}
/* =========================================================
   NATIONAL HISTORY PAGES
   Shared structure only. History-page palettes belong on the page wrapper.
   ========================================================= */

.history-page {
  color: var(--history-ink, var(--ew-ink));
}

/* The main Erindal article rules normally stop every parser output at 1180px.
   Nation-history pages are designed as full-page layouts, so they must be
   allowed to use all of the space available beside the sidebar. */


.history-hero {
  background: var(--history-deep, var(--ew-dark-2));
}

.history-hero__overlay {
  color: #fffaf2;
  background:
    linear-gradient(180deg, rgba(20, 12, 9, 0.06) 18%, rgba(20, 12, 9, 0.88) 100%),
    linear-gradient(90deg, rgba(20, 12, 9, 0.52), transparent 64%);
}

.history-hero__eyebrow {
  color: #efb476;
}

.history-hero__subtitle {
  color: #eadcc9;
}

.history-overview {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.history-overview__lead > p:first-child::first-letter {
  color: var(--history-accent, var(--ew-gold));
  font-size: 3.8em;
  line-height: 0.76;
}

.history-record {
  border: 1px solid var(--history-line, var(--ew-border));
  background: var(--history-paper, var(--ew-paper-light));
  box-shadow: 0 9px 22px rgba(55, 37, 27, 0.12);
}

.history-record__heading {
  color: #fff7ec;
  background: linear-gradient(135deg, var(--history-deep, var(--ew-dark-2)), #503023);
}

.history-record__row {
  grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.3fr);
  border-top: 1px solid var(--history-line, var(--ew-border));
}

.history-record__row span {
  color: var(--history-muted, #6f665d);
}

.history-era-index {
  box-sizing: border-box;
  margin: 1.8rem 0 2.4rem;
  padding: 1.15rem;
  border: 1px solid var(--history-line, var(--ew-border));
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent),
    var(--history-paper-alt, var(--ew-paper));
}

.history-era-index__heading {
  margin: 0 0 0.85rem;
  color: var(--history-deep, var(--ew-dark-2));
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.history-era-index__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
  align-items: stretch;
}

.history-era-index__grid > div {
  box-sizing: border-box;
  min-width: 0;
}

.history-era-index__grid a {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0.72rem 0.82rem;
  border: 1px solid rgba(91, 59, 41, 0.18);
  border-left: 4px solid var(--history-accent, var(--ew-gold));
  border-radius: 7px;
  color: var(--history-ink, var(--ew-ink));
  background: rgba(255, 252, 246, 0.68);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.history-era-index__grid a:hover {
  transform: translateY(-1px);
  background: #fffaf2;
  box-shadow: 0 5px 12px rgba(54, 36, 25, 0.1);
}

.history-era-index__grid span,
.history-era-index__grid strong {
  display: block;
}

.history-era-index__grid span {
  color: var(--history-accent, var(--ew-gold));
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.history-era-index__grid strong {
  margin-top: 0.12rem;
  font-size: 0.98rem;
  line-height: 1.2;
}

.history-page__body {
  position: relative;
  padding-left: 2.25rem;
  border-left: 2px solid rgba(153, 75, 44, 0.28);
}

.history-page__body p {
  margin: 0.82rem 0;
}

.history-page__body h2 {
  position: relative;
  margin: 2.65rem 0 1rem;
  padding: 0 0 0.55rem;
  border-bottom: 1px solid var(--history-line, var(--ew-border));
  color: var(--history-deep, var(--ew-dark-2));
  font-size: clamp(1.55rem, 3vw, 2rem);
}

.history-page__body h2::before {
  position: absolute;
  top: 0.35em;
  left: calc(-2.25rem - 7px);
  width: 12px;
  height: 12px;
  border: 2px solid var(--history-paper, var(--ew-paper-light));
  border-radius: 50%;
  background: var(--history-accent, var(--ew-gold));
  box-shadow: 0 0 0 2px rgba(153, 75, 44, 0.32);
  content: "";
}

.history-page__body h3 {
  margin-top: 1.75rem;
  color: var(--history-accent, var(--ew-gold));
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
}

.history-page__body a,
.history-record a {
  color: #784029;
}

.history-page__body .toc,
.history-page__body #toc {
  border: 1px solid var(--history-line, var(--ew-border));
  background: var(--history-paper, var(--ew-paper-light));
}

.history-note {
  padding: 0.9rem 1rem;
  border: 1px solid var(--history-line, var(--ew-border));
  border-left: 5px solid var(--history-accent, var(--ew-gold));
  background: linear-gradient(135deg, var(--history-paper, var(--ew-paper-light)), var(--history-paper-alt, var(--ew-paper)));
}

.history-note--disputed {
  --history-accent: #776453;
}

.history-note--aftermath {
  --history-accent: #7c6331;
}

.history-note strong {
  color: var(--history-deep, var(--ew-dark-2));
}

.history-page__body .thumb {
  margin-top: 1.1rem;
  border-color: var(--history-line, var(--ew-border));
}

.history-page__body table.wikitable {
  border-color: var(--history-line, var(--ew-border));
  background: var(--history-paper, var(--ew-paper-light));
}

.history-page__body table.wikitable th {
  color: #fff8ed;
  background: var(--history-deep, var(--ew-dark-2));
}

.history-figure {
  border: 1px solid var(--history-line, var(--ew-border));
  background: var(--history-paper, var(--ew-paper-light));
  box-shadow: 0 8px 20px rgba(50, 33, 24, 0.14);
}

.history-figure .mw-file-description {
  display: block;
  width: 100%;
  max-width: none;
}

.history-figure .mw-file-element,
.history-figure__image {
  display: block;
  width: 100% !important;
  max-width: none !important;
}

.history-figure a.new {
  display: none !important;
}

.history-figure__caption {
  color: var(--history-muted, #6f665d);
  background: linear-gradient(135deg, var(--history-paper, var(--ew-paper-light)), var(--history-paper-alt, var(--ew-paper)));
}

@media (max-width: 760px) {
  .history-page__body {
    padding-left: 1.25rem;
  }

  .history-page__body h2::before {
    left: calc(-1.25rem - 7px);
  }

  .history-record {
    width: min(100%, 560px);
    order: -1;
  }
}

/* =========================================================
   ERINDAL CITY PAGES
   Shared structure only. City-specific palettes belong on the page wrapper.
   ========================================================= */


.city-page {
  color: var(--city-ink, var(--ew-ink));
}


.city-hero {
  background: var(--city-deep, var(--ew-dark-2));
}

/* Match the country pages: a missing upload should not leave blue alt text
   sitting over the dark hero background. */

.city-hero__overlay {
  box-sizing: border-box;
  color: #fffaf2;
  background:
    linear-gradient(180deg, rgba(20, 12, 9, 0.06) 18%, rgba(20, 12, 9, 0.88) 100%),
    linear-gradient(90deg, rgba(20, 12, 9, 0.52), transparent 64%);
}

.city-hero__eyebrow {
  color: var(--city-accent-light, var(--ew-gold-soft));
}

.city-hero__subtitle {
  max-width: 900px;
  color: #eadcc9;
}

.city-overview {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.city-overview__lead > p:first-child::first-letter {
  color: var(--city-accent, var(--ew-gold));
  font-size: 3.8em;
  line-height: 0.76;
}

.city-record {
  border: 1px solid var(--city-line, var(--ew-border));
  background: var(--city-paper, var(--ew-paper-light));
  box-shadow: 0 9px 22px rgba(55, 37, 27, 0.12);
}

.city-record__heading {
  color: #fff8ed;
  background: linear-gradient(135deg, var(--city-deep, var(--ew-dark-2)), color-mix(in srgb, var(--city-deep, var(--ew-dark-2)) 66%, var(--city-accent, var(--ew-gold))));
}

.city-record__row {
  grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.3fr);
  border-top: 1px solid var(--city-line, var(--ew-border));
}

.city-record__row span {
  color: var(--city-muted, #6f665d);
}

.city-index {
  box-sizing: border-box;
  margin: 1.8rem 0 2.4rem;
  padding: 1.15rem;
  border: 1px solid var(--city-line, var(--ew-border));
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent),
    var(--city-paper-alt, var(--ew-paper));
}

.city-index__heading {
  margin: 0 0 0.85rem;
  color: var(--city-deep, var(--ew-dark-2));
  font-size: 1.25rem;
}

.city-index__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72rem;
  align-items: stretch;
}

.city-index__grid > div {
  box-sizing: border-box;
}

.city-index__grid a {
  box-sizing: border-box;
  height: 100%;
  padding: 0.72rem 0.82rem;
  border: 1px solid rgba(91, 59, 41, 0.18);
  border-left: 4px solid var(--city-accent, var(--ew-gold));
  border-radius: 7px;
  color: var(--city-ink, var(--ew-ink));
  background: rgba(255, 252, 246, 0.7);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.city-index__grid a:hover {
  transform: translateY(-1px);
  background: #fffaf2;
  box-shadow: 0 5px 12px rgba(54, 36, 25, 0.1);
}

.city-index__grid span {
  color: var(--city-accent, var(--ew-gold));
}

.city-page__body p {
  margin: 0.82rem 0;
}

.city-page__body h2 {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 2.35rem 0 1rem;
  border-bottom: 0;
  color: var(--city-deep, var(--ew-dark-2));
  font-size: 1.75rem;
}

.city-page__body h2::after {
  background: linear-gradient(90deg, var(--city-accent, var(--ew-gold)), transparent);
}

.city-page__body h3 {
  margin-top: 1.75rem;
  color: var(--city-accent, var(--ew-gold));
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.32rem;
  font-weight: 700;
}

.city-page__body a,
.city-record a {
  color: color-mix(in srgb, var(--city-accent, var(--ew-gold)) 76%, #1c2730);
}

.city-page__body .toc,
.city-page__body #toc {
  border: 1px solid var(--city-line, var(--ew-border));
  background: var(--city-paper, var(--ew-paper-light));
}

.city-district-grid,
.city-location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.1rem 0 1.5rem;
}

.city-location-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.city-district-card,
.city-location-card {
  box-sizing: border-box;
  min-width: 0;
  padding: 1rem 1.05rem;
  border: 1px solid var(--city-line, var(--ew-border));
  border-top: 4px solid var(--city-accent, var(--ew-gold));
  border-radius: 9px;
  background: linear-gradient(145deg, var(--city-paper, var(--ew-paper-light)), rgba(255, 255, 255, 0.5));
  box-shadow: 0 5px 14px rgba(49, 35, 25, 0.08);
}

.city-district-card h3,
.city-location-card h3 {
  margin: 0 0 0.35rem;
  color: var(--city-deep, var(--ew-dark-2));
  font-size: 1.18rem;
}

.city-district-card p,
.city-location-card p {
  margin: 0.35rem 0 0;
}

.city-note {
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--city-line, var(--ew-border));
  border-left: 5px solid var(--city-accent, var(--ew-gold));
  background: linear-gradient(135deg, var(--city-paper, var(--ew-paper-light)), var(--city-paper-alt, var(--ew-paper)));
}

.city-note--danger {
  --city-accent: #7f3f32;
}

.city-note--history {
  --city-accent: #7b653d;
}

.city-note--disputed {
  --city-accent: #596876;
}

.city-note strong {
  color: var(--city-deep, var(--ew-dark-2));
}

/* =========================================================
   ERINDAL DEITY PAGES
   Shared structure only. Individual deity palettes are page-local custom
   properties in each deity .wiki page. Common.css contains no named deity
   themes and uses the global Erindal theme only as a safe fallback.
   ========================================================= */

/* MediaWiki site CSS does not support the parent-selector approach here.
   The wrapper therefore owns its full-width sizing directly, with no
   body.page-<deity-name> rules. */

.deity-page {
  color: var(--deity-ink, var(--ew-ink));
}

.deity-hero {
  background: var(--deity-deep, var(--ew-dark-2));
}

.deity-hero__overlay {
  color: var(--deity-hero-text, #fffaf2);
  background:
    linear-gradient(180deg, rgba(20, 12, 9, 0.04) 20%, rgba(20, 12, 9, 0.88) 100%),
    linear-gradient(90deg, rgba(20, 12, 9, 0.62), transparent 68%);
}

.deity-hero__eyebrow {
  color: var(--deity-hero-kicker, var(--ew-gold-soft));
  text-transform: uppercase;
}

.deity-hero__subtitle {
  color: var(--deity-hero-subtitle, #eadcc9);
}

.deity-hero a.new,
.deity-figure a.new {
  display: none !important;
}

.deity-overview {
  grid-template-columns: minmax(0, 1fr) minmax(310px, 370px);
}

.deity-overview__lead > p:first-child::first-letter {
  color: var(--deity-accent, var(--ew-gold));
  font-size: 3.7em;
  line-height: 0.78;
}

.deity-record {
  border: 1px solid var(--deity-line, var(--ew-border));
  background: var(--deity-paper, var(--ew-paper-light));
  box-shadow: 0 10px 22px rgba(55, 37, 27, 0.13);
}

.deity-record__heading {
  color: var(--deity-record-heading-text, #fff7ec);
  background: linear-gradient(135deg, var(--deity-deep, var(--ew-dark-2)), var(--deity-deep-alt, var(--ew-dark-1)));
}

.deity-visual {
  border-bottom: 1px solid var(--deity-line, var(--ew-border));
  background: linear-gradient(145deg, var(--deity-visual-bg, var(--ew-paper)), var(--deity-paper, var(--ew-paper-light)));
}

.deity-visual__tabs {
  display: none;
}

.deity-visual.is-enhanced .deity-visual__tabs {
  display: grid !important;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border-bottom: 1px solid var(--deity-line, var(--ew-border));
  background: rgba(0, 0, 0, 0.04);
}

.deity-record .deity-visual__tabs > .deity-visual__tab {
  display: flex;
  flex: 0 0 50% !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 50% !important;
  max-width: 50% !important;
  min-width: 0;
  min-height: 46px;
  padding: 0.58rem 0.45rem;
  color: var(--deity-muted, #665f57);
  border-bottom: 3px solid transparent;
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: none !important;
  cursor: pointer;
}

.deity-visual__panel a.new {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  height: 270px !important;
  padding: 1.25rem;
  color: var(--deity-muted, #665f57) !important;
  background: rgba(255, 255, 255, 0.22);
  font-style: italic;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.deity-visual__panel a.new::before {
  content: "Missing image: ";
  font-style: normal;
  font-weight: 700;
}

.deity-visual__tab + .deity-visual__tab {
  border-left: 1px solid var(--deity-line, var(--ew-border));
}

.deity-visual__tab:hover,
.deity-visual__tab:focus,
.deity-visual__tab.is-active {
  color: var(--deity-deep, var(--ew-dark-2));
  border-bottom-color: var(--deity-accent, var(--ew-gold));
  background: rgba(255, 255, 255, 0.42);
  outline: 0;
}

.deity-visual__panel {
  box-sizing: border-box;
  width: 100%;
  height: 270px;
  min-height: 270px;
  max-height: 270px;
  overflow: hidden;
}

.deity-visual__panel + .deity-visual__panel {
  border-top: 1px solid var(--deity-line, var(--ew-border));
}

/* Match the JavaScript default panel state from the first paint. */
.deity-visual:not(.is-enhanced) .deity-visual__panel--appearance {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 0;
}

.deity-visual:not(.is-enhanced) .deity-visual__panel--symbol {
  display: none !important;
  border-top: 0;
}

.deity-visual.is-enhanced .deity-visual__panel {
  display: none;
  border-top: 0;
}

.deity-visual.is-enhanced .deity-visual__panel.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.deity-visual__panel .mw-file-description,
.deity-visual__panel .mw-file-element,
.deity-visual__appearance,
.deity-visual__symbol {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
}

.deity-visual__panel .mw-file-description {
  height: 100%;
}

.deity-visual__appearance,
.deity-visual__panel--appearance .mw-file-element {
  height: 270px !important;
  object-fit: cover;
  object-position: 50% 18%;
}

.deity-visual__panel--symbol {
  padding: 0;
  text-align: center;
}

.deity-visual__symbol,
.deity-visual__panel--symbol .mw-file-element {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  height: 270px !important;
  padding: 1rem;
  object-fit: contain;
  object-position: center;
}

.deity-record__row {
  grid-template-columns: minmax(105px, 0.9fr) minmax(0, 1.35fr);
  border-top: 1px solid var(--deity-line, var(--ew-border));
}

.deity-record__row span {
  color: var(--deity-muted, #665f57);
}

.deity-index {
  margin: 0 0 2rem;
  overflow: hidden;
  border: 1px solid var(--deity-line, var(--ew-border));
  border-radius: 11px;
  background: linear-gradient(145deg, var(--deity-paper, var(--ew-paper-light)), var(--deity-paper-alt, var(--ew-paper)));
}

.deity-index__heading {
  padding: 0.8rem 1rem 0.7rem;
  color: var(--deity-deep, var(--ew-dark-2));
  font-size: 1.15rem;
}

.deity-index__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--deity-line, var(--ew-border));
}

.deity-index__grid > div,
.wiki-index__grid > div {
  background: rgba(250, 247, 240, 0.96);
}

.deity-index__grid a,
.wiki-index__grid a {
  min-height: 56px;
  padding: 0.72rem 0.85rem;
  color: inherit;
}

.deity-index__grid span {
  color: var(--deity-accent, var(--ew-gold));
}

.deity-page__body h2 {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 2.35rem 0 1rem;
  border-bottom: 0;
  color: var(--deity-deep, var(--ew-dark-2));
  font-size: 1.75rem;
}

.deity-page__body h2::after {
  background: linear-gradient(90deg, var(--deity-accent, var(--ew-gold)), transparent);
}

.deity-page__body h3 {
  color: var(--deity-accent, var(--ew-gold));
  font-family: "Alegreya SC", Georgia, serif;
}

.deity-page__body a,
.deity-record a {
  color: var(--deity-link, var(--ew-link));
}

.deity-quote,
.deity-note {
  margin: 1.25rem 0;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--deity-line, var(--ew-border));
  border-left: 5px solid var(--deity-accent, var(--ew-gold));
  border-radius: 8px;
  background: linear-gradient(135deg, var(--deity-paper, var(--ew-paper-light)), var(--deity-paper-alt, var(--ew-paper)));
}

.deity-quote {
  color: var(--deity-deep, var(--ew-dark-2));
}

.deity-quote__source {
  display: block;
  margin-top: 0.35rem;
  color: var(--deity-muted, #665f57);
  font-size: 0.9rem;
  font-style: normal;
  text-align: right;
}

.deity-card {
  border: 1px solid var(--deity-line, var(--ew-border));
  border-top: 4px solid var(--deity-accent, var(--ew-gold));
  background: linear-gradient(145deg, var(--deity-paper, var(--ew-paper-light)), rgba(255, 255, 255, 0.52));
  box-shadow: 0 5px 14px rgba(49, 35, 25, 0.08);
}

.deity-figure {
  border: 1px solid var(--deity-line, var(--ew-border));
  background: var(--deity-paper, var(--ew-paper-light));
  box-shadow: 0 8px 20px rgba(50, 33, 24, 0.14);
}

.deity-figure .mw-file-description,
.deity-figure .mw-file-element,
.deity-figure__image {
  display: block;
  width: 100% !important;
  max-width: none !important;
}

.deity-figure__caption {
  color: var(--deity-muted, #665f57);
  background: linear-gradient(135deg, var(--deity-paper, var(--ew-paper-light)), var(--deity-paper-alt, var(--ew-paper)));
}

/* =========================================================
   FINAL SHARED HERO SCALE
   Nation, history, city and deity pages deliberately use one size.
   Keep this block last so older duplicate rules cannot win.
   ========================================================= */

.country-hero,
.history-hero,
.city-hero,
.deity-hero,
.wiki-hero {
  box-sizing: border-box !important;
  height: clamp(240px, 22vw, 320px) !important;
  min-height: 240px !important;
  max-height: 320px !important;
  margin: 0 0 1.4rem !important;
  border-radius: 14px !important;
}

.country-hero .mw-file-description,
.country-hero .mw-file-element,
.history-hero .mw-file-description,
.history-hero .mw-file-element,
.city-hero .mw-file-description,
.city-hero .mw-file-element,
.deity-hero .mw-file-description,
.deity-hero .mw-file-element,
.wiki-hero .mw-file-description,
.wiki-hero .mw-file-element,
.country-hero__image,
.history-hero__image,
.city-hero__image,
.deity-hero__image,
.wiki-hero__image {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
}

.country-hero__overlay,
.history-hero__overlay,
.city-hero__overlay,
.deity-hero__overlay,
.wiki-hero__overlay {
  padding: clamp(1.25rem, 3vw, 2.5rem) !important;
}

.country-hero__title,
.history-hero__title,
.city-hero__title,
.deity-hero__title,
.wiki-hero__title {
  max-width: 900px !important;
  font-size: clamp(2.1rem, 4vw, 3.6rem) !important;
  line-height: 0.96 !important;
}

.country-hero__subtitle,
.history-hero__subtitle,
.city-hero__subtitle,
.deity-hero__subtitle,
.wiki-hero__subtitle {
  margin-top: 0.55rem !important;
  font-size: clamp(1rem, 2vw, 1.35rem) !important;
}

/* Missing files leave no blue filename inside the hero. */
.country-hero a.new,
.history-hero a.new,
.city-hero a.new,
.deity-hero a.new,
.wiki-hero a.new {
  display: none !important;
}

@media (max-width: 760px) {
  .country-hero,
  .history-hero,
  .city-hero,
  .deity-hero,
  .wiki-hero {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    border-radius: 10px !important;
  }

  .country-hero__overlay,
  .history-hero__overlay,
  .city-hero__overlay,
  .deity-hero__overlay,
  .wiki-hero__overlay {
    padding: 1.25rem !important;
  }
}

/* =========================================================
   FLOWING RECORD LAYOUT
   Desktop record boxes behave like traditional wiki infoboxes: they float
   beside the article instead of forcing everything below their full height.
   ========================================================= */
@media (min-width: 951px) {
  .country-overview,
.history-overview,
.city-overview {
    display: block !important;
    margin-bottom: 1.5rem !important;
  }

  .country-record,
  .history-record,
  .city-record {
    float: right !important;
    box-sizing: border-box !important;
    width: 340px !important;
    max-width: 34% !important;
    margin: 0 0 1.5rem 2rem !important;
  }

  .country-overview__lead,
.history-overview__lead,
.city-overview__lead {
    display: block !important;
    min-width: 0 !important;
  }

  .history-era-index,
  .city-index {
    min-width: 0;
    overflow: hidden;
  }

  .country-page::after,
  .history-page::after,
  .city-page::after,
  .deity-page::after,
  .wiki-page::after {
    content: "";
    display: block;
    clear: both;
  }
}

/* =========================================================
   HISTORY AND CHRONOLOGY PORTALS — FULL CONTENT WIDTH
   The original general article rule caps parser output at 1180px. These are
   designed reference pages and should use the same available width as city,
   nation, national-history and deity layouts.
   ========================================================= */
body.page-Category_History_and_Timeline .mw-parser-output,
body.page-History_and_Timeline .mw-parser-output,
body.page-Chronology_of_Erindal .mw-parser-output,
body.page-Calendar_of_Erindal .mw-parser-output,
body.page-Death_Souls_and_Resurrection .mw-parser-output {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
}


@media (max-width: 950px) {
  .country-overview,
.history-overview,
.city-overview {
    display: block !important;
  }

  .country-record,
.history-record,
.city-record {
    float: none !important;
    box-sizing: border-box !important;
    width: min(100%, 580px) !important;
    max-width: 100% !important;
    margin: 0 auto 1.5rem !important;
  }
}

/* =========================================================
   DEITY ARTICLE / INFOBOX LAYOUT — SINGLE FLOWING SYSTEM
   Desktop uses the same traditional infobox flow for every deity page.
   The Divine Record must occur before the prose it should wrap beside.
   This is source structure, not deity-specific CSS.
   ========================================================= */
@media (min-width: 951px) {
  .deity-overview,
  .deity-article-layout {
    display: block !important;
    margin-bottom: 1.5rem !important;
  }

  /* Legacy/current record and new rail share the same desktop infobox geometry. */
  .deity-overview .deity-record,
  .deity-article-layout__rail {
    float: right !important;
    box-sizing: border-box !important;
    width: 370px !important;
    max-width: 34% !important;
    margin: 0 0 1.5rem 2rem !important;
  }

  .deity-article-layout__rail .deity-record {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .deity-overview__lead,
  .deity-article-layout__main,
  .deity-page__body {
    display: block !important;
    min-width: 0 !important;
  }

  .deity-index {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .deity-article-layout .deity-index {
    margin: 0 0 1.5rem !important;
  }

  .deity-article-layout__main .toc,
  .deity-article-layout__main #toc {
    float: none !important;
    box-sizing: border-box !important;
    width: min(100%, 300px) !important;
    max-width: 100% !important;
    margin: 0 0 1.5rem !important;
  }

  /* Never force article sections below a tall Divine Record on desktop. */
  .deity-page > .deity-page__body {
    display: block !important;
    clear: none !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

}

@media (max-width: 950px) {
  .deity-overview,
  .deity-article-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.5rem !important;
  }

  .deity-overview .deity-record,
  .deity-article-layout__rail,
  .deity-article-layout__rail .deity-record {
    float: none !important;
    box-sizing: border-box !important;
    width: min(100%, 580px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .deity-article-layout__rail {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .deity-article-layout__main {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  .deity-page > .deity-page__body {
    display: block !important;
    clear: both !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* Centred, unmistakable appearance/symbol selector. */
.deity-record .deity-visual__tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 4px !important;
  border-bottom: 1px solid var(--deity-line, var(--ew-border)) !important;
  background: var(--deity-tabs-bg, var(--ew-paper)) !important;
}

.deity-record .deity-visual__tabs .deity-visual__tab {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0.55rem 0.45rem !important;
  overflow: visible !important;
  color: var(--deity-tab-text, var(--ew-ink)) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  font-family: "Alegreya SC", Georgia, serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.deity-record .deity-visual__tabs .deity-visual__tab + .deity-visual__tab {
  border-left-color: var(--deity-line, var(--ew-border)) !important;
}

.deity-record .deity-visual__tabs .deity-visual__tab:hover,
.deity-record .deity-visual__tabs .deity-visual__tab:focus-visible {
  color: var(--deity-deep, var(--ew-dark-2)) !important;
  border-color: var(--deity-accent, var(--ew-gold)) !important;
  background: rgba(255, 250, 241, 0.68) !important;
  outline: 2px solid transparent !important;
}

/* Divine Appearance is the default visible panel, so its button starts
   visually active before Common.js runs. */
.deity-record .deity-visual:not(.is-enhanced) .deity-visual__tabs .deity-visual__tab:first-child,
.deity-record .deity-visual__tabs .deity-visual__tab.is-active,
.deity-record .deity-visual__tabs .deity-visual__tab[aria-selected="true"] {
  color: var(--deity-tab-active-text, #fffaf2) !important;
  border-color: var(--deity-tab-active-border, var(--ew-gold)) !important;
  background: linear-gradient(180deg, var(--deity-tab-active-top, var(--ew-dark-2)) 0%, var(--deity-tab-active-bottom, var(--ew-dark-1)) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 5px rgba(54, 27, 17, 0.28) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42) !important;
}

/* =========================================================
   ERINDAL ARTICLE SYSTEM: ORGANIZATIONS, CHARACTERS AND MAGIC
   Shared structure only. Each article defines its own palette on .wiki-page.
   ========================================================= */

.wiki-page {
  color: var(--wiki-ink, var(--ew-ink));
}


.wiki-hero {
  background: var(--wiki-deep, var(--ew-dark-2));
  box-shadow: 0 12px 30px rgba(25, 20, 17, 0.19);
}

.wiki-hero__overlay {
  color: #fffaf2;
  background:
    linear-gradient(180deg, rgba(12, 16, 20, 0.03) 18%, rgba(10, 13, 16, 0.9) 100%),
    linear-gradient(90deg, rgba(9, 13, 16, 0.66), transparent 70%);
}

.wiki-hero__eyebrow {
  color: #efc078;
  text-transform: uppercase;
}

.wiki-hero__subtitle {
  color: #e9dfd0;
}

.wiki-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 2rem;
  align-items: start;
}

.wiki-article-layout__main,
.wiki-article-layout__rail,
.wiki-page__body {
  min-width: 0;
}

.wiki-lead {
  margin-bottom: 1.35rem;
  font-size: 1.08rem;
}

.wiki-lead > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  color: var(--wiki-accent, var(--ew-gold));
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 3.7em;
  font-weight: 700;
  line-height: 0.78;
}

.wiki-record {
  border: 1px solid var(--wiki-line, var(--ew-border));
  background: var(--wiki-paper, var(--ew-paper-light));
  box-shadow: 0 10px 22px rgba(38, 32, 28, 0.13);
}

.wiki-record__title {
  padding: 0.85rem 1rem;
  color: #fff8ee;
  background: linear-gradient(135deg, var(--wiki-deep, var(--ew-dark-2)), var(--wiki-accent, var(--ew-gold)));
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.wiki-record__image {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 285px;
  padding: 0.8rem;
  overflow: hidden;
  border-bottom: 1px solid var(--wiki-line, var(--ew-border));
  background: linear-gradient(145deg, var(--wiki-paper-alt, var(--ew-paper)), var(--wiki-paper, var(--ew-paper-light)));
}

.wiki-record__image--portrait {
  box-sizing: border-box;
  height: 270px;
  min-height: 270px;
  max-height: 270px;
  padding: 0;
  overflow: hidden;
  background: var(--wiki-paper, var(--ew-paper-light));
}

.wiki-record__image .mw-file-description {
  display: block;
  width: 100%;
  height: 100%;
}

.wiki-record__image .mw-file-element {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
}

/* Character portraits use the normal MediaWiki infobox behaviour:
   show the whole image at the record width, preserve its aspect ratio,
   and leave the file link intact so clicking opens the MediaWiki file page
   where the original/full-resolution image is available. */
.wiki-record__image--portrait .mw-file-description {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  width: 100% !important;
  height: 270px !important;
}

.wiki-record__image--portrait .mw-file-element {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: 270px !important;
  max-height: 270px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
}

/* Organization record emblems
   ---------------------------------------------------------
   IMPORTANT: target .wiki-record--organization itself.
   MediaWiki may insert <span>/<a> wrappers around [[File:...]], so relying
   only on a class attached to the image/wrapper proved unreliable.

   Unlike portraits, an emblem should NOT be forced to fill either dimension.
   It keeps its natural aspect ratio and is constrained only by max-width /
   max-height. Clicking the image still uses MediaWiki's normal file link. */
.wiki-record.wiki-record--organization .wiki-record__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 230px !important;
  min-height: 230px !important;
  max-height: 230px !important;
  padding: 0.7rem !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--wiki-line, var(--ew-border));
  background: var(--wiki-paper, var(--ew-paper-light));
}

/* MediaWiki can place one or more spans around the file link. */
.wiki-record.wiki-record--organization .wiki-record__image > span,
.wiki-record.wiki-record--organization .wiki-record__image .mw-file-description,
.wiki-record.wiki-record--magic .wiki-record__image > span,
.wiki-record.wiki-record--magic .wiki-record__image .mw-file-description {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* This is the actual image. Do not give it width:100% or height:100%.
   Those declarations were what kept making the tall Holy Flame emblem huge.
   Natural ratio + two maximums gives the same compact-thumbnail behaviour
   wanted from a wiki infobox. */
.wiki-record.wiki-record--organization .wiki-record__image .mw-file-element,
.wiki-record.wiki-record--organization .wiki-record__image img,
.wiki-record.wiki-record--organization .wiki-record__emblem-image {
  display: block !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  max-width: 88% !important;
  max-height: 205px !important;
  margin: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Magic record illustrations
   ---------------------------------------------------------
   Arcane illustrations should behave like compact wiki thumbnails, not like
   character portraits or full-bleed hero art. Keep the original aspect ratio,
   centre the complete image in a restrained frame, and leave MediaWiki's
   normal file link intact so clicking opens the file page/full image. */
.wiki-record.wiki-record--magic .wiki-record__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 230px !important;
  min-height: 230px !important;
  max-height: 230px !important;
  padding: 0.7rem !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--wiki-line, var(--ew-border));
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.24), transparent 72%),
    var(--wiki-paper, var(--ew-paper-light));
}

.wiki-record.wiki-record--magic .wiki-record__image .mw-file-element,
.wiki-record.wiki-record--magic .wiki-record__image img {
  display: block !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  max-width: 90% !important;
  max-height: 205px !important;
  margin: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

.wiki-record__image a.new {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--wiki-muted, #6f665d) !important;
  font-style: italic;
  text-align: center;
}

.wiki-record__rows > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.9fr) minmax(0, 1.35fr);
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--wiki-line, var(--ew-border));
}

.wiki-record__rows > div:first-child {
  border-top: 0;
}

.wiki-record__rows span {
  color: var(--wiki-muted, #6f665d);
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
}

.wiki-record__rows strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.wiki-record a,
.wiki-page a {
  color: #174f72;
}

.wiki-index {
  margin: 0 0 1.5rem;
  overflow: hidden;
  border: 1px solid var(--wiki-line, var(--ew-border));
  border-radius: 11px;
  background: linear-gradient(145deg, var(--wiki-paper, var(--ew-paper-light)), var(--wiki-paper-alt, var(--ew-paper)));
}

.wiki-index__heading {
  padding: 0.8rem 1rem 0.7rem;
  color: var(--wiki-deep, var(--ew-dark-2));
  font-size: 1.15rem;
}

.wiki-index__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--wiki-line, var(--ew-border));
}



.wiki-index__grid span {
  color: var(--wiki-accent, var(--ew-gold));
}

.wiki-article-layout__main .toc,
.wiki-article-layout__main #toc {
  float: none !important;
  box-sizing: border-box !important;
  width: min(100%, 300px) !important;
  max-width: 100% !important;
  margin: 0 0 1.5rem !important;
}

.wiki-page > .wiki-page__body {
  display: block;
  clear: both;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.wiki-page__body h2 {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 2.35rem 0 1rem;
  border-bottom: 0;
  color: var(--wiki-deep, var(--ew-dark-2));
  font-size: 1.75rem;
}

.wiki-page__body h2::after {
  background: linear-gradient(90deg, var(--wiki-accent, var(--ew-gold)), transparent);
}

.wiki-page__body h3 {
  color: var(--wiki-accent, var(--ew-gold));
  font-family: "Alegreya SC", Georgia, serif;
}

.wiki-card {
  border: 1px solid var(--wiki-line, var(--ew-border));
  border-top: 4px solid var(--wiki-accent, var(--ew-gold));
  background: linear-gradient(145deg, var(--wiki-paper, var(--ew-paper-light)), rgba(255, 255, 255, 0.55));
  box-shadow: 0 5px 14px rgba(45, 38, 32, 0.08);
}

.wiki-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.75rem;
  counter-reset: none;
}

.wiki-process > div {
  position: relative;
  min-width: 0;
  padding: 1.1rem;
  border: 1px solid var(--wiki-line, var(--ew-border));
  border-radius: 9px;
  background: linear-gradient(145deg, var(--wiki-paper, var(--ew-paper-light)), rgba(255, 255, 255, 0.55));
}

.wiki-process > div > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.55rem;
  color: white;
  border-radius: 50%;
  background: var(--wiki-accent, var(--ew-gold));
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
}

.wiki-process h3 {
  margin: 0 0 0.3rem;
}

.wiki-process p {
  margin: 0;
}

.wiki-figure {
  border: 1px solid var(--wiki-line, var(--ew-border));
  background: var(--wiki-paper, var(--ew-paper-light));
  box-shadow: 0 8px 20px rgba(40, 34, 30, 0.14);
}

.wiki-figure .mw-file-description,
.wiki-figure .mw-file-element {
  display: block;
  width: 100% !important;
  max-width: none !important;
}

.wiki-figure .mw-file-element {
  height: clamp(220px, 31vw, 430px);
  object-fit: cover;
}

.wiki-figure__caption {
  color: var(--wiki-muted, #6f665d);
  background: linear-gradient(135deg, var(--wiki-paper, var(--ew-paper-light)), var(--wiki-paper-alt, var(--ew-paper)));
}

.wiki-quote {
  margin: 1.25rem 0;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--wiki-line, var(--ew-border));
  border-left: 5px solid var(--wiki-accent, var(--ew-gold));
  border-radius: 8px;
  background: linear-gradient(135deg, var(--wiki-paper, var(--ew-paper-light)), var(--wiki-paper-alt, var(--ew-paper)));
  color: var(--wiki-deep, var(--ew-dark-2));
}

.wiki-quote p {
  margin: 0;
}

.wiki-quote cite {
  display: block;
  margin-top: 0.35rem;
  color: var(--wiki-muted, #6f665d);
  font-size: 0.9rem;
  font-style: normal;
  text-align: right;
}

.wiki-table {
  width: 100%;
  margin: 1rem 0 1.6rem;
  border-collapse: collapse;
  background: rgba(248, 245, 238, 0.86);
}

.wiki-table th {
  color: #fff8ee;
  background: var(--wiki-deep, var(--ew-dark-2));
  font-family: "Alegreya SC", Georgia, serif;
  text-align: left;
}

.wiki-table th,
.wiki-table td {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--wiki-line, var(--ew-border));
  vertical-align: top;
}

@media (max-width: 950px) {
  .wiki-article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .wiki-article-layout__rail {
    grid-column: 1;
    grid-row: 1;
  }

  .wiki-article-layout__main {
    grid-column: 1;
    grid-row: 2;
  }

  .wiki-article-layout__rail .wiki-record {
    width: min(100%, 580px);
    margin: 0 auto;
  }

  .wiki-page {
    width: calc(100vw - var(--ew-sidebar) - 48px) !important;
  }
}

@media (max-width: 760px) {
  .wiki-table {
    display: block;
    overflow-x: auto;
  }
}

/* Desktop records use traditional wiki flow. The record is first in the
   source, floats at the top-right and article text continues beside it until
   the record ends. This prevents both a blank wall and a record postponed to
   the bottom of a long page. */
@media (min-width: 951px) {
  .wiki-article-layout {
    display: block;
  }

  .wiki-article-layout__rail {
    float: right;
    box-sizing: border-box;
    width: 370px;
    max-width: 34%;
    margin: 0 0 1.5rem 2rem;
  }

  .wiki-article-layout__main {
    display: block;
    min-width: 0;
  }

  .wiki-page__body {
    clear: none !important;
  }

}


/* ========================================================================
   END ERINDAL WIKI COMMON.CSS v6.0
   ======================================================================== */

/* ========================================================================
   v6.3.12 CATEGORY HUBS
   Reusable visual treatment for MediaWiki category pages.
   Category-specific colours belong in the category page's own .wiki source.
   ======================================================================== */

body.ns-14 {
  --category-accent: var(--ew-gold);
  --category-accent-light: var(--ew-gold-soft);
  --category-deep: #102733;
  --category-paper: #f5f0e7;
  --category-paper-alt: #e8dfd0;
  --category-ink: #2b2925;
  --category-muted: #70675c;
  --category-line: rgba(59, 52, 44, 0.24);
}

/* Category directories are navigation pages, not normal reading-width articles.
   IMPORTANT: do not use width:100% here. The old article system can leave the
   parser output's containing block at the 1180px reading width, so 100% simply
   becomes 1180px again. Give category parser output the same explicit viewport
   width calculation used by the working country/wiki-page systems. */
body.ns-14 #mw-content-text {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
}

body.ns-14 .mw-parser-output {
  box-sizing: border-box !important;
  width: calc(100vw - var(--ew-sidebar) - 84px) !important;
  max-width: none !important;
}

/* Keep category pages feeling like part of the Erindal article system. */
body.ns-14 #firstHeading {
  margin-bottom: 0.9rem;
  color: var(--category-deep);
  font-family: "Alegreya SC", Georgia, serif;
  letter-spacing: 0.025em;
}

.category-hub {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 1.7rem;
  color: var(--category-ink);
  font-family: "Alegreya", Georgia, serif;
}

.category-hub__header {
  position: relative;
  overflow: hidden;
  padding: 1.55rem 1.7rem 1.45rem;
  border: 1px solid var(--category-line);
  border-radius: 13px;
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--category-deep) 96%, black) 0%,
      var(--category-deep) 58%,
      color-mix(in srgb, var(--category-accent) 48%, var(--category-deep)) 100%);
  box-shadow: 0 10px 25px rgba(30, 24, 18, 0.13);
}

.category-hub__header::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -90px;
  width: 300px;
  height: 220px;
  border: 1px solid color-mix(in srgb, var(--category-accent-light) 25%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px color-mix(in srgb, var(--category-accent-light) 7%, transparent),
    0 0 0 72px color-mix(in srgb, var(--category-accent-light) 4%, transparent);
  pointer-events: none;
}

.category-hub__eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: 0.22rem;
  color: var(--category-accent-light);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.category-hub__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff8ed;
  font-family: "Alegreya SC", Georgia, serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.025em;
}

.category-hub__subtitle {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin-top: 0.55rem;
  color: rgba(255, 248, 237, 0.88);
  font-size: 1.02rem;
  line-height: 1.5;
}

.category-hub__intro {
  margin: 1rem 0 0;
  padding: 0.95rem 1.1rem;
  border-left: 3px solid var(--category-accent);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--category-accent) 9%, var(--category-paper)),
    var(--category-paper));
  color: var(--category-ink);
}

.category-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.category-hub__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* A secondary status card can sit beneath a 3-column category grid without
   pretending to be another functional organization type. On desktop it uses
   the middle column; on smaller layouts it remains centred, then becomes
   full-width on mobile. */
.category-hub__card--centered {
  grid-column: 2 / 3;
}

@media (max-width: 950px) {
  .category-hub__card--centered {
    grid-column: 1 / -1;
    width: calc((100% - 0.8rem) / 2);
    justify-self: center;
  }
}

@media (max-width: 620px) {
  .category-hub__card--centered {
    width: 100%;
  }
}

.category-hub__card {
  min-width: 0;
  padding: 1rem 1.05rem 0.95rem;
  border: 1px solid var(--category-line);
  border-radius: 10px;
  background:
    linear-gradient(145deg, var(--category-paper), var(--category-paper-alt));
  box-shadow: 0 5px 14px rgba(45, 36, 28, 0.06);
}

.category-hub__card h3,
.category-hub__card-title {
  display: block;
  margin: 0 0 0.28rem;
  color: var(--category-deep);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.13rem;
  font-weight: 700;
  line-height: 1.15;
}

.category-hub__card p {
  margin: 0 0 0.65rem;
  color: var(--category-muted);
  line-height: 1.45;
}

.category-hub__card a {
  color: #174f72;
  font-weight: 700;
  text-decoration: none;
}

.category-hub__card a:hover,
.category-hub__card a:focus {
  text-decoration: underline;
}

/* Automatic MediaWiki category output ----------------------------------- */

body.ns-14 #mw-subcategories,
body.ns-14 #mw-pages {
  margin-top: 1.8rem;
}

body.ns-14 #mw-subcategories > h2,
body.ns-14 #mw-pages > h2 {
  margin: 0 0 0.45rem;
  padding-bottom: 0.42rem;
  color: var(--category-deep);
  border-bottom: 1px solid var(--category-line);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.45rem;
  letter-spacing: 0.025em;
}

body.ns-14 #mw-subcategories > p,
body.ns-14 #mw-pages > p {
  color: var(--category-muted);
}

/* Turn the stock alphabetical columns into parchment directory cards. */
body.ns-14 .mw-category {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

body.ns-14 .mw-category-generated .mw-category-group,
body.ns-14 .mw-category .mw-category-group {
  box-sizing: border-box;
  min-width: 0;
  margin: 0 !important;
  padding: 0.85rem 0.95rem 0.9rem;
  border: 1px solid var(--category-line);
  border-radius: 10px;
  background:
    linear-gradient(145deg, var(--category-paper), var(--category-paper-alt));
  box-shadow: 0 4px 12px rgba(43, 34, 27, 0.055);
}

body.ns-14 .mw-category-group h3 {
  margin: 0 0 0.45rem;
  padding: 0 0 0.32rem;
  color: var(--category-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--category-line) 75%, transparent);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1;
}

body.ns-14 .mw-category-group ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.ns-14 .mw-category-group li {
  margin: 0 !important;
  padding: 0.28rem 0 !important;
}

body.ns-14 .mw-category-group li + li {
  border-top: 1px dotted color-mix(in srgb, var(--category-line) 70%, transparent);
}

body.ns-14 .mw-category-group a {
  color: #174f72;
  font-weight: 600;
  text-decoration: none;
}

body.ns-14 .mw-category-group a:hover,
body.ns-14 .mw-category-group a:focus {
  color: var(--category-deep);
  text-decoration: underline;
}

/* Subcategories use the same visual language where MediaWiki exposes them. */
body.ns-14 #mw-subcategories .mw-category {
  margin-bottom: 0.4rem;
}

@media (max-width: 950px) {
  .category-hub__grid,
  body.ns-14 .mw-category {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .category-hub__header {
    padding: 1.2rem;
  }

  .category-hub__grid,
  .category-hub__grid--2,
  body.ns-14 .mw-category {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   v6.3.16 MAIN CATEGORY HUBS - HIDE DUPLICATE SUBCATEGORIES
   The nine top-level category hubs already show curated category cards.
   Hide MediaWiki's automatic #mw-subcategories block only on those pages.
   Compact/mini category hubs remain unchanged.
   ======================================================================== */

body.ns-14.page-Category_Nations_and_Realms #mw-subcategories,
body.ns-14.page-Category_Ancestries_and_Cultures #mw-subcategories,
body.ns-14.page-Category_Races_and_Peoples #mw-subcategories,
body.ns-14.page-Category_Characters #mw-subcategories,
body.ns-14.page-Category_Organizations #mw-subcategories,
body.ns-14.page-Category_Religion_and_Deities #mw-subcategories,
body.ns-14.page-Category_Magic_and_Cosmology #mw-subcategories,
body.ns-14.page-Category_Locations #mw-subcategories,
body.ns-14.page-Category_History_and_Timeline #mw-subcategories,
body.ns-14.page-Category_Family_Lines #mw-subcategories {
  display: none !important;
}

/* ========================================================================
   PHASE 3 - CONSOLIDATED RESPONSIVE RULES
   Replaces repeated page-system media rules with MediaWiki 1.43-compatible
   selector lists only; no template or markup changes.
   ======================================================================== */

@media (max-width: 1050px) {
  .country-card-grid--four,
  .country-card-grid--three,
  .city-index__grid,
  .city-location-grid,
  .deity-card-grid--three,
  .wiki-card-grid--three,
  .wiki-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .country-page,
  .deity-page,
  body.ns-14 .mw-parser-output {
    width: calc(100vw - var(--ew-sidebar) - 48px) !important;
  }
}

@media (max-width: 760px) {
  .country-overview,
  .country-feature,
  .country-feature--image-left,
  .country-card-grid,
  .country-card-grid--three,
  .country-card-grid--four,
  .country-quickfacts,
  .history-overview,
  .history-era-index__grid,
  .city-overview,
  .city-index__grid,
  .city-district-grid,
  .city-location-grid,
  .deity-overview,
  .deity-card-grid,
  .deity-card-grid--three,
  .deity-index__grid,
  .wiki-index__grid,
  .wiki-card-grid,
  .wiki-card-grid--three,
  .wiki-process {
    grid-template-columns: 1fr;
  }

  .country-record__row,
  .history-record__row,
  .city-record__row,
  .deity-record__row,
  .wiki-record__rows > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .city-record,
  .deity-record {
    width: min(100%, 580px);
    order: -1;
  }

  .history-figure .mw-file-element,
  .history-figure__image,
  .deity-figure .mw-file-element,
  .deity-figure__image {
    height: 220px;
  }
}

@media (max-width: 700px) {
  .country-page,
  .deity-page,
  .wiki-page,
  body.ns-14 .mw-parser-output {
    width: calc(100vw - 48px) !important;
  }
}