Jump to content

MediaWiki:Common.css

From Erindal Wiki
Revision as of 10:32, 18 August 2026 by Miyokari (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ========================================================================
   ERINDAL WIKI - LIVE VECTOR THEME v6.0 CONSOLIDATED LAYOUT
   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 {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  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);
  color: var(--history-deep);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 700;
}

.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);
  border-radius: 50%;
  background: var(--history-accent);
  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);
  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);
}

.history-figure {
  box-sizing: border-box;
  margin: 1.35rem 0 1.9rem;
  overflow: hidden;
  border: 1px solid var(--history-line);
  border-radius: 10px;
  background: var(--history-paper);
  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;
  height: clamp(220px, 28vw, 340px);
  object-fit: cover;
}

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

.history-figure__caption {
  padding: 0.65rem 0.9rem 0.72rem;
  color: var(--history-muted);
  background: linear-gradient(135deg, var(--history-paper), var(--history-paper-alt));
  font-size: 0.94rem;
  font-style: italic;
  line-height: 1.35;
}

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

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

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

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

/* =========================================================
   ERINDAL DEITY PAGES
   Shared structural system for every deity article.
   Individual deity colours belong on the deity page itself; Common.css only
   supplies safe fallback values and reusable layout/visual rules.
   ========================================================= */

/* MediaWiki's site-CSS sanitizer does not accept the CSS :has() selector.
   The .deity-page wrapper below therefore owns its full-width sizing directly,
   avoiding per-deity body.page-<name> selectors and keeping this rule generic. */

.deity-page {
  /* Generic fallback palette. A deity page may override any of these on its
     root .deity-page element without adding new rules to Common.css. */
  --deity-accent: #984b2c;
  --deity-accent-light: #d39358;
  --deity-deep: #251713;
  --deity-deep-alt: #542b1d;
  --deity-paper: #f5efe4;
  --deity-paper-alt: #e9ddcb;
  --deity-ink: #30251f;
  --deity-muted: #76665b;
  --deity-line: rgba(78, 54, 40, 0.24);
  --deity-link: #784029;
  --deity-hero-text: #fffaf2;
  --deity-hero-kicker: #efb879;
  --deity-hero-subtitle: #eadcc9;
  --deity-record-heading-text: #fff7ec;
  --deity-visual-bg: #efe4d4;
  --deity-tabs-bg: #d9cab7;
  --deity-tab-text: #553d31;
  --deity-tab-active-text: #fff8ed;
  --deity-tab-active-border: #70351f;
  --deity-tab-active-top: #a5522f;
  --deity-tab-active-bottom: #78381f;
  box-sizing: border-box;
  width: calc(100vw - var(--ew-sidebar) - 84px) !important;
  max-width: none !important;
  color: var(--deity-ink);
  font-family: "Alegreya", Georgia, serif;
  line-height: 1.62;
}

.deity-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(--deity-deep);
  box-shadow: 0 12px 30px rgba(28, 18, 13, 0.19);
}

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

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

.deity-hero__eyebrow {
  margin-bottom: 0.25rem;
  color: var(--deity-hero-kicker);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.deity-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);
}

.deity-hero__subtitle {
  margin-top: 0.55rem;
  color: var(--deity-hero-subtitle);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-style: italic;
}

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

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

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

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

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

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

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

.deity-visual__tabs {
  display: none;
}

.deity-visual.is-enhanced .deity-visual__tabs {
  display: flex !important;
  flex-flow: row nowrap !important;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border-bottom: 1px solid var(--deity-line);
  background: rgba(62, 38, 28, 0.06);
}

.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);
  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) !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);
}

.deity-visual__tab:hover,
.deity-visual__tab:focus,
.deity-visual__tab.is-active {
  color: var(--deity-deep);
  border-bottom-color: var(--deity-accent);
  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);
}

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

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

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

.deity-index__heading {
  padding: 0.8rem 1rem 0.7rem;
  color: var(--deity-deep);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

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

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

.deity-index__grid a {
  display: block;
  min-height: 56px;
  padding: 0.72rem 0.85rem;
  color: inherit;
  text-decoration: none;
}

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

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

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

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

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

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

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

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

.deity-quote {
  color: var(--deity-deep);
  font-size: 1.08rem;
  font-style: italic;
}

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

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

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

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

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

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

.deity-figure {
  box-sizing: border-box;
  margin: 1.35rem 0 1.9rem;
  overflow: hidden;
  border: 1px solid var(--deity-line);
  border-radius: 10px;
  background: var(--deity-paper);
  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 .mw-file-element,
.deity-figure__image {
  height: clamp(220px, 28vw, 340px);
  object-fit: cover;
}

.deity-figure__caption {
  padding: 0.65rem 0.9rem 0.72rem;
  color: var(--deity-muted);
  background: linear-gradient(135deg, var(--deity-paper), var(--deity-paper-alt));
  font-size: 0.94rem;
  font-style: italic;
  line-height: 1.35;
}

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

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

@media (max-width: 760px) {
  .deity-overview,
  .deity-card-grid,
  .deity-card-grid--three,
  .deity-index__grid {
    grid-template-columns: 1fr;
  }

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

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

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

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

/* =========================================================
   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 {
  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,
.deity-hero .mw-file-description,
.deity-hero .mw-file-element,
.deity-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 {
  padding: clamp(1.25rem, 3vw, 2.5rem) !important;
}

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

@media (max-width: 760px) {
  .country-hero,
  .history-hero,
  .city-hero,
  .deity-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 {
    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,
  .deity-overview {
    display: block !important;
    margin-bottom: 1.5rem !important;
  }

  .country-record,
  .history-record,
  .city-record,
  .deity-record {
    float: right !important;
    box-sizing: border-box !important;
    margin: 0 0 1.5rem 2rem !important;
  }

  .country-record,
  .history-record,
  .city-record {
    width: 340px !important;
    max-width: 34% !important;
  }

  .deity-record {
    width: 370px !important;
    max-width: 34% !important;
  }

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

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

  .country-page::after,
  .history-page::after,
  .city-page::after,
  .deity-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,
  .deity-overview {
    display: block !important;
  }

  .country-record,
  .history-record,
  .city-record,
  .deity-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 — FLOWING RECORD
   The Divine Record behaves like a traditional wiki infobox on desktop.
   IMPORTANT: .deity-article-layout__rail should appear before
   .deity-article-layout__main in the page source so the float starts at the
   top of the article. Text then flows beside it and automatically expands to
   full width after the record ends.
   ========================================================= */
@media (min-width: 951px) {
  .deity-article-layout {
    display: block !important;
  }

  .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-article-layout__main,
  .deity-page__body {
    display: block !important;
    min-width: 0 !important;
  }

  .deity-article-layout .deity-overview {
    display: block !important;
    margin: 0 0 1.35rem !important;
  }

  .deity-article-layout .deity-index {
    min-width: 0 !important;
    overflow: hidden !important;
    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;
  }

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

  .deity-page::after {
    content: "";
    display: block;
    clear: both;
  }
}

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

  .deity-article-layout__rail {
    grid-column: 1 !important;
    grid-row: 1 !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

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

  .deity-article-layout__rail .deity-record {
    float: none !important;
    width: min(100%, 580px) !important;
    max-width: 100% !important;
    margin: 0 auto !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;
  width: 100% !important;
  min-height: 52px !important;
  padding: 4px !important;
  border-bottom: 1px solid var(--deity-line) !important;
  background: var(--deity-tabs-bg) !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) !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) !important;
}

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

.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) !important;
  border-color: var(--deity-tab-active-border) !important;
  background: linear-gradient(180deg, var(--deity-tab-active-top) 0%, var(--deity-tab-active-bottom) 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
   Uses the same hero scale and top-record flow as the stable deity layout.
   ========================================================= */
body.page-Order_of_the_Holy_Flame .mw-parser-output,
body.page-Drogan_Ironheart_III .mw-parser-output,
body.page-Magic_and_the_Living_Codex .mw-parser-output,
body.page-Magic_in_Erindal .mw-parser-output {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
}

/* =========================================================
   TEMPORARY DEITY THEME MIGRATION SHIMS
   These two blocks exist only so replacing Common.css does not recolour the
   current Aelithia and Galenar pages before their root .wiki markup is updated.
   Do NOT add future deities here. Once those two pages carry these variables
   inline, delete this entire compatibility section.
   ========================================================= */
.deity-page--aelithia {
  --deity-accent: #9a7130;
  --deity-accent-light: #d9bd73;
  --deity-deep: #1d3041;
  --deity-deep-alt: #263f50;
  --deity-paper: #f4f1e8;
  --deity-paper-alt: #e4dfd2;
  --deity-ink: #252a2c;
  --deity-muted: #66675f;
  --deity-line: rgba(49, 65, 72, 0.25);
  --deity-tab-active-border: #536d7b;
  --deity-tab-active-top: #496979;
  --deity-tab-active-bottom: #263f50;
}

.deity-page--galenar {
  --deity-accent: #86643c;
  --deity-accent-light: #b79a70;
  --deity-deep: #211c1a;
  --deity-deep-alt: #3b2e25;
  --deity-paper: #f1ece2;
  --deity-paper-alt: #ddd4c5;
  --deity-ink: #28231f;
  --deity-muted: #6e6258;
  --deity-line: rgba(56, 46, 39, 0.27);
  --deity-tab-active-border: #58422c;
  --deity-tab-active-top: #76583a;
  --deity-tab-active-bottom: #3b2e25;
}

.wiki-page {
  --wiki-accent: #2f6d86;
  --wiki-accent-light: #81a9b9;
  --wiki-deep: #102a36;
  --wiki-paper: #f5f0e7;
  --wiki-paper-alt: #e8dfd0;
  --wiki-ink: #2b2925;
  --wiki-muted: #70675c;
  --wiki-line: rgba(59, 52, 44, 0.24);
  box-sizing: border-box;
  width: calc(100vw - var(--ew-sidebar) - 84px) !important;
  max-width: none !important;
  color: var(--wiki-ink);
  font-family: "Alegreya", Georgia, serif;
  line-height: 1.62;
}

.wiki-page--holy-flame {
  --wiki-accent: #356f8a;
  --wiki-accent-light: #94b7c6;
  --wiki-deep: #102733;
  --wiki-paper: #f4f1e9;
  --wiki-paper-alt: #e5ddd0;
}

.wiki-page--drogan {
  --wiki-accent: #34637c;
  --wiki-accent-light: #83a7b9;
  --wiki-deep: #142934;
  --wiki-paper: #f3efe6;
  --wiki-paper-alt: #e2d9cb;
}

.wiki-page--aetherlith {
  --wiki-accent: #4c6fa3;
  --wiki-accent-light: #8eadd5;
  --wiki-deep: #101a33;
  --wiki-paper: #f1eff0;
  --wiki-paper-alt: #dedce3;
  --wiki-line: rgba(54, 60, 85, 0.25);
}

.wiki-hero {
  position: relative;
  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;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px !important;
  background: var(--wiki-deep);
  box-shadow: 0 12px 30px rgba(25, 20, 17, 0.19);
}

.wiki-hero .mw-file-description,
.wiki-hero .mw-file-element,
.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;
}

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

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

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

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

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

.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);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 3.7em;
  font-weight: 700;
  line-height: 0.78;
}

.wiki-record {
  overflow: hidden;
  border: 1px solid var(--wiki-line);
  border-radius: 12px;
  background: var(--wiki-paper);
  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(--wiki-accent));
  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);
  background: linear-gradient(145deg, var(--wiki-paper-alt), var(--wiki-paper));
}

.wiki-record__image--portrait {
  padding: 0;
}

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

.wiki-record__image--portrait .mw-file-element {
  object-fit: cover;
  object-position: 50% 18%;
}

.wiki-record__image a.new {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--wiki-muted) !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);
}

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

.wiki-record__rows span {
  color: var(--wiki-muted);
  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);
  border-radius: 11px;
  background: linear-gradient(145deg, var(--wiki-paper), var(--wiki-paper-alt));
}

.wiki-index__heading {
  padding: 0.8rem 1rem 0.7rem;
  color: var(--wiki-deep);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

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

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

.wiki-index__grid a {
  display: block;
  min-height: 56px;
  padding: 0.72rem 0.85rem;
  color: inherit;
  text-decoration: none;
}

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

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

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

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

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

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

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

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

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

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

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

.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);
  border-radius: 9px;
  background: linear-gradient(145deg, var(--wiki-paper), 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);
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
}

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

.wiki-process p {
  margin: 0;
}

.wiki-figure {
  box-sizing: border-box;
  margin: 1.35rem 0 1.9rem;
  overflow: hidden;
  border: 1px solid var(--wiki-line);
  border-radius: 10px;
  background: var(--wiki-paper);
  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 {
  padding: 0.65rem 0.9rem 0.72rem;
  color: var(--wiki-muted);
  background: linear-gradient(135deg, var(--wiki-paper), var(--wiki-paper-alt));
  font-size: 0.94rem;
  font-style: italic;
  line-height: 1.35;
}

.wiki-quote {
  margin: 1.25rem 0;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--wiki-line);
  border-left: 5px solid var(--wiki-accent);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--wiki-paper), var(--wiki-paper-alt));
  color: var(--wiki-deep);
  font-size: 1.08rem;
  font-style: italic;
}

.wiki-quote p {
  margin: 0;
}

.wiki-quote cite {
  display: block;
  margin-top: 0.35rem;
  color: var(--wiki-muted);
  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);
  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);
  vertical-align: top;
}

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

@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-hero {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    border-radius: 10px !important;
  }

  .wiki-hero__overlay {
    padding: 1.25rem !important;
  }

  .wiki-index__grid,
  .wiki-card-grid,
  .wiki-card-grid--three,
  .wiki-process {
    grid-template-columns: 1fr;
  }

  .wiki-record__rows > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .wiki-table {
    display: block;
    overflow-x: auto;
  }
}

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

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

  .wiki-page::after {
    content: "";
    display: block;
    clear: both;
  }
}


/* ========================================================================
   END ERINDAL WIKI COMMON.CSS v6.0
   ======================================================================== */
Retrieved from "https://erindal.com/mediawiki/index.php?title=MediaWiki:Common.css&oldid=149"