MediaWiki:Common.css: Difference between revisions

Revision as of 16:10, 17 August 2026

/* ========================================================================
   ERINDAL WIKI - LIVE VECTOR THEME v4.5 FONT LOADER + SINGLE EDIT ACTION
   Target: MediaWiki 1.43.x, legacy Vector skin
   ======================================================================== */

: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;
}

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 { 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 {
  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 {
  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 { 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: min(calc(100vw - var(--ew-sidebar)), var(--ew-content-max)) !important;
  background: #061119 !important;
  height: var(--ew-topbar) !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-portal + .vector-menu-portal,
#mw-panel .mw-portlet + .mw-portlet { margin-top: 18px !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 {
  margin: 2px 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.2 !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;
}
#mw-panel .vector-menu-content-list li a::before {
  content: "◆";
  position:absolute; left:14px; top:7px; width:16px;
  color:#98a09e; text-align:center; font-size:11px;
}
#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;
}
#p-navigation .vector-menu-content-list li:first-child a::before { content:"⌂"; color:var(--ew-gold-soft); font-size:18px; top:4px; }


/* 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;
}
#mw-panel .mw-list-item > a::before {
  content: "◆";
  position: absolute;
  left: 14px;
  top: 7px;
  width: 16px;
  color: #98a09e;
  text-align: center;
  font-size: 11px;
}
#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;
}
#p-navigation .mw-list-item:first-child > a::before { content: "⌂"; color: var(--ew-gold-soft); font-size: 18px; top: 4px; }

/* 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 (inserted by MediaWiki:Common.js) ---------- */
#ew-global-topbar {
  position: fixed;
  z-index: 100;
  top: 0;
  left: var(--ew-sidebar);
  right: auto;
  width: min(calc(100vw - var(--ew-sidebar)), var(--ew-content-max));
  height: var(--ew-topbar);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 14px 0 30px;
  background: linear-gradient(180deg, #08141c 0%, #03090d 100%);
  border-bottom: 2px solid rgba(112,88,58,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 2px 6px rgba(0,0,0,.28);
  color: #f5eee4;
  font-family: "Cinzel", Georgia, serif;
}
#ew-global-topbar::before,
#ew-global-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-global-topbar::before { left: 4px; border-width: 1px 0 0 1px; }
#ew-global-topbar::after { right: 4px; border-width: 1px 1px 0 0; }
.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: min(calc(100vw - var(--ew-sidebar)), var(--ew-content-max)) !important;
  margin-top: var(--ew-topbar) !important;
  height: 34px !important;
  background: #0a151c !important;
}
#mw-head {
  left: var(--ew-sidebar) !important;
  right: auto !important;
  width: min(calc(100vw - var(--ew-sidebar)), var(--ew-content-max)) !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;
}
#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; }
#p-search { display: none !important; }

#content {
  margin-left: var(--ew-sidebar) !important;
  width: min(calc(100vw - var(--ew-sidebar)), var(--ew-content-max)) !important;
  max-width: var(--ew-content-max) !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 {
  margin-left: var(--ew-sidebar) !important;
  width: min(calc(100vw - var(--ew-sidebar)), var(--ew-content-max)) !important;
  max-width: var(--ew-content-max) !important;
  box-sizing: border-box;
  padding: 18px 28px 22px !important;
  background: #061119 !important;
  color: #aaa296 !important;
  border-top: 1px solid rgba(125,102,69,.42);
}
#footer a { color: #c9b888 !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; }


/* ---------- v4.3 FLUID WIDTH OVERRIDES ---------- */
/* Use every pixel to the right of the fixed sidebar. Internal components, not
   the whole site, decide how wide they should become. */
#mw-page-base,
#mw-head-base,
#mw-head,
#content,
#footer,
#ew-global-topbar {
  width: calc(100vw - var(--ew-sidebar)) !important;
  max-width: none !important;
}

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. */
.ew-home-grid {
  grid-template-columns: minmax(0, 1fr) clamp(420px, 38%, 560px);
}

/* 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); }
}


/* ---------- v4.4 TYPOGRAPHY ---------- */
#p-logo::after,
.ew-global-menu a,
.ew-hero-kicker,
.ew-hero-title,
.ew-panel-title,
.ew-section-title,
.ew-category-title,
#firstHeading,
#content h1,
#content h2,
#content h3,
#content h4 {
  font-family: "Cinzel", Georgia, serif !important;
}

body,
#content,
.ew-home,
#mw-panel .vector-menu-content-list li a,
#mw-panel .portal .body li a,
.ew-global-search input[type="search"] {
  font-family: "Crimson Text", Georgia, serif !important;
}

.ew-global-menu a { font-weight: 600; letter-spacing: .045em; }
.ew-hero-title { font-weight: 600; }
.ew-hero-kicker { font-family: "Cinzel", Georgia, serif !important; font-weight: 600; }
#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-heading-label,
#mw-panel .mw-portlet h3,
#mw-panel .portal h3 { font-family: "Cinzel", Georgia, serif !important; font-weight: 600 !important; }

/* Admin/source edit shortcut inserted by Common.js */
.ew-edit-link {
  width: auto !important;
  min-width: 78px;
  padding: 0 12px;
  gap: 7px;
  font: 600 11px/1 "Cinzel", Georgia, serif !important;
  letter-spacing: .035em;
  white-space: nowrap;
}
.ew-edit-link .ew-edit-pencil { font-size: 17px; line-height: 1; }
@media (max-width: 1250px) {
  .ew-edit-link { min-width: 44px; width: 44px !important; padding: 0 !important; }
  .ew-edit-link .ew-edit-label { display:none; }
}

/* ========================================================================
   v4.5 FONT + EDIT ACTION FIX
   Google Fonts are loaded by MediaWiki:Common.js because ResourceLoader can
   discard/ignore remote @import rules in site CSS.
   ======================================================================== */
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-panel .mw-list-item > a,
#mw-panel .mw-list-item > a > span,
.ew-home,
.ew-panel p,
.ew-card small,
.ew-recent-row,
.ew-global-search input[type="search"] {
  font-family: "Crimson Text", Georgia, "Times New Roman", serif !important;
}

#firstHeading,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#p-logo::after,
#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-heading-label,
#mw-panel .portal h3,
#ew-global-topbar,
.ew-global-menu,
.ew-hero-kicker,
.ew-hero-title,
.ew-panel h2,
.ew-card-label {
  font-family: "Cinzel", Georgia, serif !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 styles from v4.4 custom edit button are intentionally disabled. */
.ew-edit-link { display: none !important; }


/* ========================================================================
   v4.6 DISTINCT FANTASY TYPOGRAPHY
   Cormorant Garamond = readable lore/body text
   Marcellus SC       = navigation and article/section headings
   Cinzel Decorative  = Erindal branding and large hero title only
   ======================================================================== */

/* Body/lore prose: visibly more literary than Georgia/Times. */
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-panel .mw-list-item > a,
#mw-panel .mw-list-item > a > span,
.ew-home,
.ew-panel p,
.ew-card small,
.ew-recent-row,
.ew-global-search input[type="search"] {
  font-family: "Cormorant Garamond", Garamond, Georgia, serif !important;
  font-weight: 500;
}

/* Sidebar text needs a little more weight at small sizes. */
#mw-panel .mw-list-item > a,
#mw-panel .mw-list-item > a > span {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .005em;
}

/* Elegant Roman small-caps look for UI/section headings. */
#firstHeading,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-heading-label,
#mw-panel .portal h3,
#ew-global-topbar,
.ew-global-menu,
.ew-hero-kicker,
.ew-panel h2,
.ew-card-label,
.ew-section-title,
.ew-panel-title,
.ew-category-title {
  font-family: "Marcellus SC", "Times New Roman", serif !important;
  font-weight: 400 !important;
}

/* Branding gets the truly decorative face, but only where it won't hurt readability. */
#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;
}

/* Keep navigation crisp and clearly different from body copy. */
.ew-global-menu a {
  font-family: "Marcellus SC", serif !important;
  font-weight: 400 !important;
  letter-spacing: .035em !important;
}

/* Slightly larger body text makes the Cormorant forms visible and improves lore readability. */
.ew-home,
.ew-panel p,
.mw-parser-output p,
.mw-parser-output li {
  font-size: 17px;
  line-height: 1.38;
}

/* ========================================================================
   v4.7 FANTASY NAV + READABLE ARTICLE TYPOGRAPHY
   Almendra SC = sidebar, top navigation, headings
   Alegreya    = normal wiki/article prose
   Cinzel Decorative remains for ERINDAL WIKI branding / hero title
   ======================================================================== */

/* Main readable wiki typeface. This applies to normal articles as well as
   the front page, so long lore entries remain comfortable to read. */
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;
}

/* The intentionally fantasy-facing UI. Almendra SC has clearly medieval /
   calligraphic shapes, but stays legible at navigation sizes. */
#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,
#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-heading-label,
#mw-panel .portal h3,
#ew-global-topbar,
.ew-global-menu,
.ew-global-menu a,
.ew-hero-kicker,
.ew-panel h2,
.ew-card-label,
.ew-section-title,
.ew-panel-title,
.ew-category-title,
#firstHeading,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
  font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
}

/* Sidebar: stronger decorative character without sacrificing readability. */
#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-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-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .07em !important;
}

/* Top navigation should visibly match the sidebar rather than looking like
   a conservative Roman inscription font. */
.ew-global-menu a {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .045em !important;
}

/* Article headings get fantasy character, prose remains Alegreya. */
#firstHeading,
#content h1,
#content h2,
#content h3,
.ew-panel h2 {
  font-weight: 400 !important;
  letter-spacing: .018em !important;
}

/* Keep the strongest display face only for the identity / hero. */
#p-logo::after,
.ew-hero-title {
  font-family: "Cinzel Decorative", "Almendra SC", Georgia, serif !important;
  font-weight: 700 !important;
}

/* Normal wiki prose tuning. */
.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;
}

/* ========================================================================
   v4.8 READABLE CONTENT TYPOGRAPHY
   Almendra SC = navigation chrome only
   Alegreya SC = readable fantasy headings / labels / article names
   Alegreya    = body prose
   Cinzel Decorative = Erindal identity / hero only
   ======================================================================== */

/* Navigation keeps the decorative Almendra face the user liked. */
#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,
#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-heading-label,
#mw-panel .portal h3,
#ew-global-topbar,
.ew-global-menu,
.ew-global-menu a {
  font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
}

/* Main wiki headings: fantasy-flavoured, but much easier to scan than Almendra. */
#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;
}

/* Category labels were particularly hard to read in Almendra SC. */
.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;
}

/* Featured article title such as Kurn Daruhm: larger, less ornamental. */
.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;
}

/* Homepage section titles need clear hierarchy on parchment. */
.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;
}

/* Regular article titles/headings: readable enough for long wiki use. */
#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; }

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

/* Hero kicker is content-facing, so make it cleaner than Almendra. */
.ew-hero-kicker {
  font-family: "Alegreya SC", "Alegreya", Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

/* Body remains deliberately readable. */
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-panel p,
.ew-card small,
.ew-recent-row,
.ew-global-search input[type="search"] {
  font-family: "Alegreya", Georgia, serif !important;
}

/* =========================================================
   COUNTRY PAGES
   Prototype: Empire of Kurn Daruhm
   ========================================================= */

.country-page {
  --country-accent: #8f5032;
  --country-accent-soft: #c98a55;
  --country-deep: #211916;
  --country-paper: #f5f0e6;
  --country-paper-alt: #ebe1d1;
  --country-ink: #30251f;
  --country-muted: #74645a;
  --country-line: rgba(73, 51, 39, 0.22);
  color: var(--country-ink);
  font-family: "Alegreya", Georgia, serif;
  line-height: 1.62;
}

.country-page--kurn {
  --country-accent: #984d2e;
  --country-accent-soft: #d18b50;
  --country-deep: #221713;
}

.country-hero {
  position: relative;
  min-height: 240px;
  margin: 0 0 1.4rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: var(--country-deep);
  box-shadow: 0 12px 30px rgba(28, 18, 13, 0.19);
}

.country-hero .mw-file-description,
.country-hero .mw-file-element,
.country-hero__image {
  display: block;
  width: 100%;
  height: clamp(240px, 22vw, 320px);
  object-fit: cover;
}

/* Do not show the blue missing-file link before the hero artwork is uploaded. */
.country-hero a.new.country-hero__image {
  display: none !important;
}

.country-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  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%);
  pointer-events: none;
}

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

.country-hero__title {
  font-family: "Alegreya SC", Georgia, serif;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 0.96;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.72);
}

.country-hero__subtitle {
  margin-top: 0.55rem;
  color: #eadcc9;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-style: italic;
}

.country-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 2rem;
  align-items: start;
  margin-bottom: 2.25rem;
}

.country-overview__lead {
  font-size: 1.08rem;
}

.country-overview__lead > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  color: var(--country-accent);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 3.7em;
  font-weight: 700;
  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);
  border-left: 4px solid var(--country-accent);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--country-paper), var(--country-paper-alt));
  box-shadow: 0 4px 12px rgba(63, 43, 31, 0.07);
}

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

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

.country-record__heading {
  padding: 0.85rem 1rem;
  color: #fff7ec;
  background: linear-gradient(135deg, var(--country-deep), #4a2b20);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.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 {
  display: grid;
  grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.3fr);
  gap: 0.75rem;
  padding: 0.62rem 0.85rem;
  border-top: 1px solid var(--country-line);
}

.country-record__row span {
  color: var(--country-muted);
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
}

.country-page h2 {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 2.35rem;
  border-bottom: 0;
  color: var(--country-deep);
  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), transparent);
}

.country-page h3 {
  color: var(--country-accent);
  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 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.75rem;
}

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

.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);
  border-radius: 10px;
  background: var(--country-paper);
  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);
  border-left: 4px solid var(--country-accent);
  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);
  background: linear-gradient(90deg, rgba(152, 77, 46, 0.11), transparent);
}

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

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

@media (max-width: 760px) {
  .country-overview,
  .country-feature,
  .country-feature--image-left {
    grid-template-columns: 1fr;
  }

  .country-record {
    order: -1;
  }

  .country-card-grid,
  .country-card-grid--three,
  .country-card-grid--four {
    grid-template-columns: 1fr;
  }

  .country-hero {
    min-height: 220px;
    border-radius: 10px;
  }

  .country-hero .mw-file-description,
  .country-hero .mw-file-element,
  .country-hero__image {
    height: 250px;
  }

  .country-quickfacts {
    grid-template-columns: 1fr;
  }

  .country-record__row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* =========================================================
   COUNTRY PAGE WIDTH
   Country layouts fill the complete article area for every visitor.
   Ordinary text-heavy articles retain the 1180px reading-width limit.
   ========================================================= */
.country-page {
  width: calc(100vw - var(--ew-sidebar) - 84px) !important;
  max-width: none !important;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .country-page {
    width: calc(100vw - var(--ew-sidebar) - 48px) !important;
  }
}

@media (max-width: 700px) {
  .country-page {
    width: calc(100vw - 48px) !important;
  }
}

/* ========================================================================
   v5.0 SERVER-RENDERED TOPBAR + COLLAPSIBLE SIDEBAR

   The visible navigation now comes from the "erindal-topbar" section of
   MediaWiki:Sidebar. It is therefore present in the HTML immediately and no
   longer waits for MediaWiki:Common.js to construct it.
   ======================================================================== */

/* Disable the obsolete JavaScript-built bar if an old cached script creates it. */
#ew-global-topbar {
  display: none !important;
}

/* MediaWiki renders this portlet inside #mw-panel; fixed positioning turns it
   into the global horizontal navigation without delaying its first paint. */
#mw-panel #p-erindal-topbar {
  position: fixed !important;
  z-index: 105 !important;
  top: 0 !important;
  left: var(--ew-sidebar) !important;
  right: 0 !important;
  width: auto !important;
  height: var(--ew-topbar) !important;
  margin: 0 !important;
  padding: 0 350px 0 30px !important;
  box-sizing: border-box !important;
  overflow: visible !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;
}

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

#mw-panel #p-erindal-topbar::before {
  left: 4px;
  border-width: 1px 0 0 1px;
}

#mw-panel #p-erindal-topbar::after {
  right: 4px;
  border-width: 1px 1px 0 0;
}

#mw-panel #p-erindal-topbar .vector-menu-heading,
#mw-panel #p-erindal-topbar > h3 {
  display: none !important;
}

#mw-panel #p-erindal-topbar .vector-menu-content,
#mw-panel #p-erindal-topbar .vector-menu-content-list {
  display: block !important;
  position: static !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
}

#mw-panel #p-erindal-topbar .vector-menu-content-list {
  display: flex !important;
  align-items: stretch !important;
  list-style: none !important;
}

#mw-panel #p-erindal-topbar .mw-list-item {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  height: var(--ew-topbar) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

#mw-panel #p-erindal-topbar .mw-list-item > a,
#mw-panel #p-erindal-topbar .mw-list-item > a:visited {
  display: flex !important;
  align-items: center !important;
  height: var(--ew-topbar) !important;
  margin: 0 !important;
  padding: 0 17px !important;
  box-sizing: border-box !important;
  color: #f3eee5 !important;
  background: transparent !important;
  border-radius: 0 !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;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#mw-panel #p-erindal-topbar .mw-list-item > a::before {
  content: none !important;
  display: none !important;
}

#mw-panel #p-erindal-topbar .mw-list-item > a:hover,
#mw-panel #p-erindal-topbar .mw-list-item > a:focus {
  color: var(--ew-gold-soft) !important;
  background: rgba(255,255,255,.035) !important;
}

/* Dropdowns are an enhancement. The six main links remain visible and usable
   even before JavaScript has loaded. */
.ew-topbar-caret {
  width: 19px;
  height: var(--ew-topbar);
  margin: 0 5px 0 -10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f3eee5;
  font: 14px/1 Arial, sans-serif;
  cursor: pointer;
}

.ew-topbar-caret:hover,
.ew-topbar-caret:focus {
  color: var(--ew-gold-soft);
}

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

.ew-topbar-dropdown a,
.ew-topbar-dropdown a:visited {
  display: block !important;
  padding: 9px 12px !important;
  color: #f1ede6 !important;
  background: transparent !important;
  font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

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

#mw-panel #p-erindal-topbar .ew-has-dropdown:hover .ew-topbar-dropdown,
#mw-panel #p-erindal-topbar .ew-has-dropdown.ew-menu-open .ew-topbar-dropdown {
  display: block;
}

/* Use Vector's server-rendered search form instead of constructing another one
   after page load. */
#p-search {
  position: fixed !important;
  z-index: 116 !important;
  top: 10px !important;
  right: 17px !important;
  left: auto !important;
  display: block !important;
  width: 300px !important;
  height: 35px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#p-search h3,
#p-search label {
  display: none !important;
}

#p-search #searchform,
#p-search #simpleSearch {
  width: 100% !important;
  height: 35px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#p-search #simpleSearch {
  display: flex !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(151,128,91,.42) !important;
  border-radius: 4px !important;
}

#p-search #searchInput {
  position: static !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 33px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  color: #eee8de !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-family: "Alegreya", Georgia, serif !important;
  font-size: 15px !important;
}

#p-search #searchInput::placeholder {
  color: #d4cbc0 !important;
  opacity: .88;
}

#p-search #mw-searchButton {
  display: none !important;
}

#p-search #searchButton {
  position: static !important;
  flex: 0 0 39px !important;
  width: 39px !important;
  height: 33px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-left: 1px solid rgba(151,128,91,.34) !important;
  text-indent: -9999px !important;
  cursor: pointer !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1eade' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") !important;
}

/* Sidebar button. Its state is saved for this browser by Common.js. */
#ew-sidebar-toggle {
  position: fixed;
  z-index: 140;
  top: 10px;
  left: calc(var(--ew-sidebar) - 18px);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--ew-gold-soft);
  background: #07141c;
  border: 1px solid rgba(207,163,80,.62);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,.36);
  font: 23px/1 Georgia, serif;
  cursor: pointer;
}

#ew-sidebar-toggle:hover,
#ew-sidebar-toggle:focus {
  color: #fff4d6;
  background: #102431;
  outline: none;
}

/* Collapsed layout. Keep the server-rendered topbar visible even though it is
   technically a child of the sidebar panel. */
html.ew-sidebar-collapsed {
  --ew-sidebar: 0px;
}

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

html.ew-sidebar-collapsed #mw-panel > :not(#p-erindal-topbar) {
  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: 10px;
}

@media (max-width: 1180px) {
  #mw-panel #p-erindal-topbar {
    padding-right: 270px !important;
  }

  #mw-panel #p-erindal-topbar .mw-list-item > a {
    padding: 0 11px !important;
    font-size: 14px !important;
  }

  #p-search {
    width: 220px !important;
  }
}

@media (max-width: 900px) {
  #mw-panel #p-erindal-topbar .mw-list-item:nth-child(n+5) {
    display: none !important;
  }
}

@media (max-width: 700px) {
  #mw-panel {
    display: block !important;
    width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #mw-panel > :not(#p-erindal-topbar) {
    display: none !important;
  }

  #mw-panel #p-erindal-topbar {
    left: 0 !important;
    padding: 0 230px 0 10px !important;
  }

  #mw-panel #p-erindal-topbar .mw-list-item:nth-child(n+3) {
    display: none !important;
  }

  #p-search {
    right: 9px !important;
    width: 210px !important;
  }

  #ew-sidebar-toggle {
    display: none !important;
  }
}

/* ========================================================================
   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
   Kurn Daruhm prototype
   Integrated into this complete MediaWiki:Common.css file
   ========================================================= */

.history-page {
  --history-accent: #8f4d31;
  --history-accent-light: #c78658;
  --history-deep: #211713;
  --history-paper: #f5efe4;
  --history-paper-alt: #e9ddcb;
  --history-ink: #30251f;
  --history-muted: #76665b;
  --history-line: rgba(78, 54, 40, 0.24);
  color: var(--history-ink);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  font-family: "Alegreya", Georgia, serif;
  line-height: 1.62;
}

/* 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. */
body[class*="page-History_of_"] .mw-parser-output {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

.history-page--kurn {
  --history-accent: #994b2c;
  --history-accent-light: #d18b50;
  --history-deep: #231713;
}

.history-hero {
  position: relative;
  min-height: 240px;
  margin: 0 0 1.4rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: var(--history-deep);
  box-shadow: 0 12px 30px rgba(28, 18, 13, 0.19);
}

.history-hero .mw-file-description,
.history-hero .mw-file-element,
.history-hero__image {
  display: block;
  width: 100%;
  height: clamp(240px, 22vw, 320px);
  object-fit: cover;
}

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

.history-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  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%);
  pointer-events: none;
}

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

.history-hero__title {
  max-width: 900px;
  font-family: "Alegreya SC", Georgia, serif;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 0.96;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.72);
}

.history-hero__subtitle {
  margin-top: 0.55rem;
  color: #eadcc9;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-style: italic;
}

.history-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 2rem;
  align-items: start;
  margin-bottom: 2.25rem;
}

.history-overview__lead {
  font-size: 1.08rem;
}

.history-overview__lead > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  color: var(--history-accent);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 3.8em;
  font-weight: 700;
  line-height: 0.76;
}

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

.history-record__heading {
  padding: 0.85rem 1rem;
  color: #fff7ec;
  background: linear-gradient(135deg, var(--history-deep), #503023);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.history-record__row {
  display: grid;
  grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.3fr);
  gap: 0.75rem;
  padding: 0.62rem 0.85rem;
  border-top: 1px solid var(--history-line);
}

.history-record__row span {
  color: var(--history-muted);
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
}

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

.history-era-index__heading {
  margin: 0 0 0.85rem;
  color: var(--history-deep);
  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);
  border-radius: 7px;
  color: var(--history-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);
  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 {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
}

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

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

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

.history-page__body h3 {
  margin-top: 1.75rem;
  color: var(--history-accent);
  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 {
  margin: 0 0 1.8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--history-line);
  border-radius: 9px;
  background: var(--history-paper);
}

.history-note {
  margin: 1.25rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--history-line);
  border-left: 5px solid var(--history-accent);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--history-paper), var(--history-paper-alt));
}

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

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

.history-note strong {
  color: var(--history-deep);
  font-family: "Alegreya SC", Georgia, serif;
}

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

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

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

@media (max-width: 760px) {
  .history-overview {
    grid-template-columns: 1fr;
  }

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

  .history-era-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .history-hero {
    min-height: 220px;
    border-radius: 10px;
  }

  .history-hero .mw-file-description,
  .history-hero .mw-file-element,
  .history-hero__image {
    height: 250px;
  }

  .history-hero__overlay {
    padding: 1.25rem;
  }

  .history-era-index__grid {
    grid-template-columns: 1fr;
  }

  .history-record__row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* =========================================================
   ERINDAL NATIONAL CITY PAGES
   Shared layout for Kurn Daruhm and future city articles
   ========================================================= */

body.page-Mal_Darum .mw-parser-output,
body.page-Bhornholdir .mw-parser-output,
body.page-Mirn_Torum .mw-parser-output,
body.page-Khimtaruhr .mw-parser-output,
body.page-Hil_Doral .mw-parser-output,
body.page-Dhemuhm .mw-parser-output {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

.city-page {
  --city-accent: #8f4d31;
  --city-accent-light: #c78658;
  --city-deep: #211713;
  --city-paper: #f5efe4;
  --city-paper-alt: #e9ddcb;
  --city-ink: #30251f;
  --city-muted: #76665b;
  --city-line: rgba(78, 54, 40, 0.24);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  color: var(--city-ink);
  font-family: "Alegreya", Georgia, serif;
  line-height: 1.62;
}

.city-page--mal-darum {
  --city-accent: #984b2c;
  --city-accent-light: #d39358;
  --city-deep: #251713;
}

.city-page--bhornholdir {
  --city-accent: #315f76;
  --city-accent-light: #78a4b6;
  --city-deep: #12242e;
}

.city-page--mirn-torum {
  --city-accent: #59636b;
  --city-accent-light: #a1abb0;
  --city-deep: #1c2327;
}

.city-page--khimtaruhr {
  --city-accent: #6f5d38;
  --city-accent-light: #aa9160;
  --city-deep: #262219;
}

.city-page--hil-doral {
  --city-accent: #55725f;
  --city-accent-light: #91ad92;
  --city-deep: #18251e;
}

.city-page--dhemuhm {
  --city-accent: #3f6e86;
  --city-accent-light: #7cabc1;
  --city-deep: #151f25;
  --city-paper: #edf0ed;
  --city-paper-alt: #dce3df;
}

.city-hero {
  position: relative;
  min-height: 240px;
  margin: 0 0 1.4rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: var(--city-deep);
  box-shadow: 0 12px 30px rgba(28, 18, 13, 0.19);
}

.city-hero .mw-file-description,
.city-hero .mw-file-element,
.city-hero__image {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: clamp(240px, 22vw, 320px);
  object-fit: cover;
}

/* Match the country pages: a missing upload should not leave blue alt text
   sitting over the dark hero background. */
.city-hero a.new.city-hero__image {
  display: none !important;
}

.city-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  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%);
  pointer-events: none;
}

.city-hero__eyebrow {
  margin-bottom: 0.25rem;
  color: var(--city-accent-light);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.city-hero__title {
  max-width: 900px;
  font-family: "Alegreya SC", Georgia, serif;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 0.96;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.72);
}

.city-hero__subtitle {
  max-width: 900px;
  margin-top: 0.55rem;
  color: #eadcc9;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-style: italic;
}

.city-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 2rem;
  align-items: start;
  margin-bottom: 2.25rem;
}

.city-overview__lead {
  font-size: 1.08rem;
}

.city-overview__lead > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  color: var(--city-accent);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 3.8em;
  font-weight: 700;
  line-height: 0.76;
}

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

.city-record__heading {
  padding: 0.85rem 1rem;
  color: #fff8ed;
  background: linear-gradient(135deg, var(--city-deep), color-mix(in srgb, var(--city-deep) 66%, var(--city-accent)));
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.city-record__row {
  display: grid;
  grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.3fr);
  gap: 0.75rem;
  padding: 0.62rem 0.85rem;
  border-top: 1px solid var(--city-line);
}

.city-record__row span {
  color: var(--city-muted);
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
}

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

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

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

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

.city-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(--city-accent);
  border-radius: 7px;
  color: var(--city-ink);
  background: rgba(255, 252, 246, 0.7);
  text-decoration: none;
  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,
.city-index__grid strong {
  display: block;
}

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

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

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

.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);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
}

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

.city-page__body h3 {
  margin-top: 1.75rem;
  color: var(--city-accent);
  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) 76%, #1c2730);
}

.city-page__body .toc,
.city-page__body #toc {
  margin: 0 0 1.8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--city-line);
  border-radius: 9px;
  background: var(--city-paper);
}

.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);
  border-top: 4px solid var(--city-accent);
  border-radius: 9px;
  background: linear-gradient(145deg, var(--city-paper), 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);
  font-size: 1.18rem;
}

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

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

.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);
  font-family: "Alegreya SC", Georgia, serif;
}

@media (max-width: 1050px) {
  .city-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 760px) {
  .city-overview {
    grid-template-columns: 1fr;
  }

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

  .city-hero {
    min-height: 220px;
    border-radius: 10px;
  }

  .city-hero .mw-file-description,
  .city-hero .mw-file-element,
  .city-hero__image {
    height: 250px;
  }

  .city-hero__overlay {
    padding: 1.25rem;
  }

  .city-index__grid,
  .city-district-grid,
  .city-location-grid {
    grid-template-columns: 1fr;
  }

  .city-record__row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* =========================================================
   FINAL SHARED HERO SCALE
   Nation, history and city pages deliberately use one size.
   Keep this block last so older duplicate rules cannot win.
   ========================================================= */
.country-hero,
.history-hero,
.city-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,
.country-hero__image,
.history-hero .mw-file-description,
.history-hero .mw-file-element,
.history-hero__image,
.city-hero .mw-file-description,
.city-hero .mw-file-element,
.city-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 {
  padding: clamp(1.25rem, 3vw, 2.5rem) !important;
}

.country-hero__title,
.history-hero__title,
.city-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 {
  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 {
  display: none !important;
}

@media (max-width: 760px) {
  .country-hero,
  .history-hero,
  .city-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 {
    padding: 1.25rem !important;
  }
}