Jump to content

MediaWiki:Common.css

From Crucible Codex

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.
/* =========================================================
   MEDIAWIKI:COMMON.CSS
   Crucible Codex consolidated stylesheet
   Cleaned replacement: grouped by global foundation, shared Codex system,
   subsite skins, and Crucible Comics page-type themes.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Libre+Baskerville:wght@400;700&family=Crimson+Pro:wght@400;600;700&family=Cormorant+Garamond:wght@400;600;700&family=Crimson+Text:wght@400;600;700&family=Bangers&family=Roboto+Condensed:wght@400;700&family=Barlow+Condensed:wght@500;700;800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Roboto:wght@300;400;500&display=swap');

/* =========================================================
   1. GLOBAL WIKI FOUNDATION
   ========================================================= */

html,
body,
.mw-page-container,
.vector-body {
  background: #15110e;
  color: #e7dcc5;
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

body {
  margin: 0;
  padding: 0;
}

.mw-body,
.vector-body {
  background: #211914;
  color: #e7dcc5;
  border: 1px solid #5c4630;
  box-shadow: 0 0 12px rgba(0,0,0,0.25);
}

#firstHeading,
.mw-first-heading,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6,
h1, h2, h3, h4, h5, h6 {
  color: #c9a15a !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  visibility: visible !important;
  opacity: 1 !important;
}

h1,
h2,
.mw-parser-output h1,
.mw-parser-output h2 {
  border-bottom: 1px solid #5c4630;
  padding-bottom: 0.2em;
}

h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }

p, li, dt, dd, td, th { color: #e7dcc5; }
small, .mw-footer, #siteSub, .catlinks { color: #bfae8e; }

a {
  color: #d8b06a;
  text-decoration: none;
}

a:visited { color: #a88552; }
a:hover, a:focus {
  color: #e0bf7a;
  text-decoration: underline;
}

.vector-pinned-container,
.vector-column-start,
#mw-panel,
.vector-menu,
.vector-user-links {
  background: #1a1410;
  color: #e7dcc5;
}

.vector-menu-heading,
#mw-panel h3 { color: #c9a15a; }

.vector-header-container,
.vector-header,
.mw-header,
.vector-page-toolbar,
.vector-sticky-header,
.vector-page-titlebar {
  background: #15110e !important;
  background-color: #15110e !important;
  border-bottom: 1px solid #5c4630 !important;
}

.vector-header a,
.vector-header span,
.mw-header a,
.mw-header span,
.vector-user-links,
.vector-user-links a,
.vector-page-toolbar button,
.vector-page-toolbar a {
  color: #e7dcc5 !important;
}

.vector-search-box,
.vector-search-box-vue,
.vector-typeahead-search-container { background: transparent !important; }

input,
textarea,
select,
.vector-search-box input,
#searchInput {
  background: #2a2018 !important;
  color: #e7dcc5 !important;
  border: 1px solid #5c4630 !important;
  font-family: "Libre Baskerville", Georgia, serif;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #c9a15a !important;
  outline: none;
}

.vector-search-box input::placeholder,
#searchInput::placeholder { color: #bfae8e !important; }

input:-webkit-autofill,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #2a2018 inset !important;
  -webkit-text-fill-color: #e7dcc5 !important;
}

table,
.wikitable {
  background: #211914;
  color: #e7dcc5;
  border: 1px solid #5c4630;
  border-collapse: collapse;
}

.wikitable th {
  background: #2a2018;
  color: #c9a15a;
  border: 1px solid #5c4630;
}

.wikitable td { border: 1px solid #5c4630; }

.infobox,
table.infobox,
.portable-infobox {
  background: #1d1612;
  color: #e7dcc5;
  border: 1px solid #5c4630;
}

.infobox th,
table.infobox th,
.portable-infobox .pi-title {
  background: #2a2018;
  color: #c9a15a;
}

.infobox td,
table.infobox td,
.portable-infobox .pi-data { color: #e7dcc5; }

.catlinks,
#toc,
.toc {
  background: #1d1612;
  border: 1px solid #5c4630;
  color: #e7dcc5;
}

#toc .toctitle,
.toc .toctitle,
#toc .toctitle h2,
.toc .toctitle h2 {
  color: #c9a15a;
  border-bottom: 0;
}

#toc a,
.toc a { color: #d8b06a; }

.thumb,
.image,
.thumbinner,
.thumbimage,
.gallerybox .thumb,
.gallerybox .thumbinner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.thumbinner,
.gallerybox .thumbinner {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

img,
.mw-file-element {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border: 2px solid #d7ad47 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.codex-header img,
.nightcats-header img,
.ffbt-header img,
.codex-banner img {
  max-width: 100% !important;
  height: auto;
  display: block;
  margin: 0 auto;
}

.floatright,
.tright,
.thumb.tright,
.thumb.floatright {
  float: right !important;
  clear: right !important;
  display: block !important;
  margin: 28px 0 12px 16px !important;
}

.floatleft,
.tleft,
.thumb.tleft,
.thumb.floatleft {
  float: left !important;
  clear: left !important;
  display: block !important;
  margin: 12px 16px 12px 0 !important;
}

.floatright img,
.tright img,
.thumb.tright img,
.thumb.floatright img,
.floatleft img,
.tleft img,
.thumb.tleft img,
.thumb.floatleft img,
.floatright .mw-file-element,
.tright .mw-file-element,
.thumb.tright .mw-file-element,
.thumb.floatright .mw-file-element,
.floatleft .mw-file-element,
.tleft .mw-file-element,
.thumb.tleft .mw-file-element,
.thumb.floatleft .mw-file-element {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

pre,
code {
  background: #181311;
  color: #e7dcc5;
  border: 1px solid #4b3928;
}

pre {
  padding: 10px;
  overflow: auto;
}

hr {
  border: 0;
  border-top: 1px solid #5c4630;
  clear: both;
}

.page-Main_Page #firstHeading { display: none; }
.page-Main_Page .mw-body { margin-top: 0; }

.codex-header,
.nightcats-header,
.ffbt-header,
.codex-banner {
  margin-top: 0;
  max-width: 100%;
  overflow: hidden;
}

.mw-editsection,
.mw-editsection-like,
.mw-editsection-bracket,
.mw-editsection-divider,
.mw-parser-output .mw-editsection,
.mw-parser-output .mw-editsection-like,
.vector-body .mw-editsection,
.vector-body .mw-editsection-like,
h1 .mw-editsection,
h2 .mw-editsection,
h3 .mw-editsection,
h4 .mw-editsection,
h5 .mw-editsection,
h6 .mw-editsection,
h1 .mw-editsection-like,
h2 .mw-editsection-like,
h3 .mw-editsection-like,
h4 .mw-editsection-like,
h5 .mw-editsection-like,
h6 .mw-editsection-like {
  display: none !important;
}

.mw-editsection::before,
.mw-editsection::after,
.mw-editsection-like::before,
.mw-editsection-like::after {
  display: none !important;
  content: none !important;
}

/* Hide Talk / Discussion UI */
#ca-talk,
.mw-talk-link,
#p-associated-pages {
  display: none !important;
}

/* =========================================================
   2. SHARED CODEX STRUCTURE
   ========================================================= */

.codex-banner { text-align: center; }
.codex-banner img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.codex-page {
  max-width: 960px;
  margin: 30px auto !important;
  padding: 32px 40px !important;
  line-height: 1.7 !important;
  font-size: 18px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.35),
    0 10px 26px rgba(0,0,0,0.45) !important;
}

.codex-page p,
.codex-page li,
.codex-page td,
.codex-page th,
.codex-page dt,
.codex-page dd { font-size: 1em !important; }

.codex-page h1,
.codex-page h2,
.codex-page h3,
.codex-page h4,
.codex-page h5,
.codex-page h6,
.codex-page .mw-headline {
  line-height: 1.25 !important;
  letter-spacing: 0.04em !important;
}

.codex-page img,
.codex-page .mw-file-element {
  max-width: 100% !important;
  height: auto !important;
}

.codex-page hr,
.codex-page .mw-parser-output hr {
  clear: both !important;
  margin: 16px 0 !important;
}

.codex-page #toc,
.codex-page .toc { padding-top: 16px !important; }

.codex-page #toc .toctitle,
.codex-page .toc .toctitle,
.codex-page #toc .toctitle h2,
.codex-page .toc .toctitle h2 { text-align: center !important; }

.codex-page #toc::before,
.codex-page .toc::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 10px auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.codex-navbox,
.codex-nav {
  max-width: 960px;
  margin: 36px auto 0 auto !important;
  padding: 14px 20px !important;
  text-align: center !important;
  clear: both !important;
  border-radius: 10px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.18),
    0 8px 22px rgba(0,0,0,0.18);
}

.codex-nav-title,
.codex-navbox strong {
  display: block !important;
  margin: 0 0 8px 0 !important;
  font-variant: small-caps;
  letter-spacing: 0.08em !important;
  font-size: 1.05em;
  line-height: 1.2 !important;
}

.codex-nav a,
.codex-nav a:visited,
.codex-navbox a,
.codex-navbox a:visited {
  text-decoration: none !important;
  margin: 0 4px !important;
  display: inline !important;
}

.codex-nav a:hover,
.codex-nav a:focus,
.codex-navbox a:hover,
.codex-navbox a:focus { text-decoration: underline !important; }

/* =========================================================
   3. NIGHTCATS
   ========================================================= */

.codex-page--nightcats {
  background: #1a120c !important;
  border: 2px solid #8b6730 !important;
  color: #e6d7b0 !important;
  font-family: "Crimson Pro", Georgia, serif !important;
}

.codex-page--nightcats p,
.codex-page--nightcats li,
.codex-page--nightcats td,
.codex-page--nightcats th,
.codex-page--nightcats dt,
.codex-page--nightcats dd { color: #e6d7b0 !important; }

.codex-page--nightcats h1,
.codex-page--nightcats h2,
.codex-page--nightcats h3,
.codex-page--nightcats h4,
.codex-page--nightcats h5,
.codex-page--nightcats h6,
.codex-page--nightcats .mw-headline {
  font-family: "Cinzel", Georgia, serif !important;
  color: #d7ad47 !important;
}

.codex-page--nightcats h1 { font-size: 1.5em !important; }
.codex-page--nightcats h2 { font-size: 1.25em !important; }
.codex-page--nightcats h3 { font-size: 1.1em !important; }

.codex-page--nightcats a,
.codex-page--nightcats a:visited { color: #e6c76a !important; }
.codex-page--nightcats a:hover,
.codex-page--nightcats a:focus { color: #ffd97d !important; }

.codex-page--nightcats table.wikitable,
.codex-page--nightcats .wikitable {
  background: #1f160f !important;
  border: 1px solid #5a3b1f !important;
}

.codex-page--nightcats table.wikitable th,
.codex-page--nightcats .wikitable th {
  background: #5a2a12 !important;
  color: #f0d38d !important;
  border: 1px solid #5a3b1f !important;
}

.codex-page--nightcats table.wikitable td,
.codex-page--nightcats .wikitable td {
  background: #1f160f !important;
  color: #e6d7b0 !important;
  border: 1px solid #5a3b1f !important;
}

.codex-page--nightcats blockquote {
  background: #3a2414 !important;
  border-left: 4px solid #b8842f !important;
  color: #e6d7b0 !important;
  padding: 0.8em 1em !important;
  margin: 1em 0 1em 1.2em !important;
  font-style: italic !important;
}

.codex-page--nightcats #toc,
.codex-page--nightcats .toc,
.codex-page--nightcats .catlinks {
  background: #1f160f !important;
  border: 1px solid #5a3b1f !important;
  color: #e6d7b0 !important;
}

.codex-page--nightcats #toc::before,
.codex-page--nightcats .toc::before {
  background-image: url("/images/5/58/NightcatsTOCIcon.png");
  width: 90px;
  height: 90px;
}

.codex-navbox--nightcats,
.codex-nav--nightcats {
  border-top-color: #8b6f3d !important;
  color: #e6d7b0 !important;
  font-family: "Crimson Pro", Georgia, serif !important;
}

.codex-navbox--nightcats strong,
.codex-nav--nightcats .codex-nav-title,
.codex-nav--nightcats .nightcats-nav-title {
  font-family: "Cinzel", Georgia, serif !important;
  color: #d7ad47 !important;
}

.codex-navbox--nightcats a,
.codex-navbox--nightcats a:visited,
.codex-nav--nightcats a,
.codex-nav--nightcats a:visited { color: #e6c76a !important; }

.codex-page--nightcats .nightcats-panel {
  position: relative;
  margin: 1.5em 0;
  padding: 1.1em 1.25em 1.15em;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.10)),
    rgba(24,18,12,0.88);
  border: 1px solid #8a6a2f;
  border-left: 4px solid #c59a3a;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.25);
  overflow: hidden;
}

.codex-page--nightcats .nightcats-panel-image-top {
  display: flex;
  justify-content: center;
  margin: 0 0 0.85rem 0;
}

.codex-page--nightcats .nightcats-panel-image-top img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(197,154,58,0.35) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.codex-page--nightcats .nightcats-panel-title {
  display: block;
  font-size: 1.65rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
  margin: 0.4rem 0;
  color: #e6c36a;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(198,154,58,0.25);
}

.codex-page--nightcats .nightcats-panel-title::after {
  content: "";
  display: block;
  width: 60%;
  margin: 0.4rem auto 0.6rem auto;
  border-bottom: 1px solid rgba(197,154,58,0.35);
}

.codex-page--nightcats .nightcats-panel-subtitle { display: none; }
.codex-page--nightcats .nightcats-panel p:first-of-type { margin-top: 0.5rem; }

.codex-page--nightcats .nightcats-stats {
  width: 100%;
  margin: 0.75rem 0 0 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.codex-page--nightcats .nightcats-stats th,
.codex-page--nightcats .nightcats-stats td {
  padding: 0.35em 0.55em;
  border: 1px solid rgba(197,154,58,0.28);
  text-align: left;
  vertical-align: top;
}

.codex-page--nightcats .nightcats-stats th {
  width: 22%;
  background: rgba(197,154,58,0.12);
  color: #e0b85c;
  font-weight: 700;
}

/* =========================================================
   4. FIVE FISTS / BURNING TEMPLE
   ========================================================= */

.codex-page--ffbt {
  background: #fffaf0 !important;
  border: 2px solid #6e1f16 !important;
  color: #2a1a12 !important;
  font-family: "Libre Baskerville", Georgia, serif !important;
}

.codex-page--ffbt p,
.codex-page--ffbt li,
.codex-page--ffbt td,
.codex-page--ffbt th,
.codex-page--ffbt dt,
.codex-page--ffbt dd { color: #2a1a12 !important; }

.codex-page--ffbt h1,
.codex-page--ffbt h2,
.codex-page--ffbt h3,
.codex-page--ffbt h4,
.codex-page--ffbt h5,
.codex-page--ffbt h6,
.codex-page--ffbt .mw-headline {
  font-family: "Cinzel", Georgia, serif !important;
  color: #1a1a1a !important;
}

.codex-page--ffbt a,
.codex-page--ffbt a:visited { color: #8f2318 !important; }
.codex-page--ffbt a:hover,
.codex-page--ffbt a:focus { color: #c13a2a !important; }

.codex-page--ffbt #toc,
.codex-page--ffbt .toc,
.codex-page--ffbt .catlinks {
  background: #f8efe1 !important;
  border: 1px solid #c9b08c !important;
  color: #2a1a12 !important;
}

.codex-page--ffbt #toc::before,
.codex-page--ffbt .toc::before { background-image: url("/images/FFBTTOCIcon.png"); }

.codex-navbox--ffbt,
.codex-nav--ffbt {
  border-top-color: #8b6f3d !important;
  color: #2a1a12 !important;
  font-family: "Libre Baskerville", Georgia, serif !important;
}

.codex-navbox--ffbt strong,
.codex-nav--ffbt .codex-nav-title,
.codex-nav--ffbt .ffbt-nav-title {
  font-family: "Cinzel", Georgia, serif !important;
  color: #8f2318 !important;
}

.codex-navbox--ffbt a,
.codex-navbox--ffbt a:visited,
.codex-nav--ffbt a,
.codex-nav--ffbt a:visited { color: #8f2318 !important; }

.codex-page--ffbt .ffbt-callout {
  background: linear-gradient(#fdf6e9, #f3e4cc);
  border: 2px solid #6e1f16;
  border-left: 6px solid #8f2318;
  padding: 14px 16px;
  margin: 1.2em 0;
  font-style: italic;
  color: #2a1a12 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border-radius: 6px;
}

.codex-page--ffbt .ffbt-callout strong {
  display: block;
  margin-bottom: 4px;
  font-style: normal;
  font-family: "Cinzel", Georgia, serif !important;
  color: #8f2318 !important;
}

.codex-page--ffbt .ffbt-seal {
  display: inline-block;
  background: #8f2318;
  color: #fff !important;
  padding: 4px 10px;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  margin-bottom: 10px;
  font-family: "Cinzel", Georgia, serif !important;
}

.codex-page--ffbt .ffbt-stylebox,
.codex-page--ffbt .ffbt-statblock,
.codex-page--ffbt .ffbt-card {
  background: #fbf4e8;
  color: #2a1a12 !important;
  border: 1px solid #c9b08c;
  padding: 14px 16px;
  margin: 18px 0;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 8px 18px rgba(0,0,0,0.08);
}

.codex-page--ffbt .ffbt-stylebox { border: 2px solid #5c2a18; }
.codex-page--ffbt .ffbt-statblock { border: 2px solid #1a1a1a; background: #fdf8ef; }

.codex-page--ffbt .ffbt-stylebox h3,
.codex-page--ffbt .ffbt-stylebox h4,
.codex-page--ffbt .ffbt-card h3,
.codex-page--ffbt .ffbt-card h4 {
  margin-top: 0;
  color: #8f2318 !important;
}

.codex-page--ffbt .ffbt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.codex-page--ffbt .ffbt-table {
  margin: 18px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 8px 18px rgba(0,0,0,0.10);
  border-radius: 6px;
  overflow: hidden;
}

.codex-page--ffbt .ffbt-table .wikitable,
.codex-page--ffbt .ffbt-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fffaf0 !important;
  color: #2a1a12 !important;
  border: 1px solid #c9b08c !important;
}

.codex-page--ffbt .ffbt-table th {
  background: #8f2318 !important;
  color: #fff !important;
  padding: 8px;
  text-align: left;
  border: 1px solid #c9b08c !important;
}

.codex-page--ffbt .ffbt-table td {
  background: #fffaf0 !important;
  color: #2a1a12 !important;
  border: 1px solid #c9b08c !important;
  padding: 8px;
}

.codex-page--ffbt .ffbt-tag {
  display: inline-block;
  border: 1px solid #c79b4b;
  background: #f9f1df;
  color: #2a1a12 !important;
  padding: 2px 8px;
  margin-right: 6px;
  margin-bottom: 6px;
  font-size: 0.85em;
  border-radius: 3px;
}

/* =========================================================
   5. SIGIL LANDS
   ========================================================= */

.codex-page--sigil {
  background: linear-gradient(rgba(255,255,255,0.06), rgba(0,0,0,0.03)), #e7d9b7 !important;
  border: 1px solid #4a3626 !important;
  color: #2a1d14 !important;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif !important;
  box-shadow: 0 0 0 3px rgba(74,54,38,0.18), 0 10px 30px rgba(0,0,0,0.35) !important;
}

.codex-page--sigil p,
.codex-page--sigil li,
.codex-page--sigil td,
.codex-page--sigil th,
.codex-page--sigil dt,
.codex-page--sigil dd { color: #2a1d14 !important; }

.codex-page--sigil h1,
.codex-page--sigil h2,
.codex-page--sigil h3,
.codex-page--sigil h4,
.codex-page--sigil .mw-headline {
  font-family: Georgia, "Times New Roman", serif !important;
  color: #23160f !important;
}

.codex-page--sigil a,
.codex-page--sigil a:visited { color: #6c261f !important; }
.codex-page--sigil a:hover,
.codex-page--sigil a:focus { color: #5d7fa3 !important; }

.codex-page--sigil #toc,
.codex-page--sigil .toc,
.codex-page--sigil .catlinks {
  background: rgba(255,250,240,0.72) !important;
  border: 1px solid #4a3626 !important;
  color: #2a1d14 !important;
}

.codex-page--sigil #toc::before,
.codex-page--sigil .toc::before { background-image: url("/images/SigilTOCIcon.png"); }

.codex-navbox--sigil,
.codex-nav--sigil {
  border-top-color: #b38a3d !important;
  color: #2a1d14 !important;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif !important;
}

.codex-navbox--sigil strong,
.codex-nav--sigil .codex-nav-title,
.codex-nav--sigil .sigil-nav-title {
  font-family: Georgia, "Times New Roman", serif !important;
  color: #23160f !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.codex-navbox--sigil a,
.codex-navbox--sigil a:visited,
.codex-nav--sigil a,
.codex-nav--sigil a:visited { color: #6c261f !important; }

/* =========================================================
   6. STORMBRINGER / YOUNG KINGDOMS
   ========================================================= */

.codex-page--stormbringer {
  --storm-bg: #0d0f12;
  --storm-panel: #11151a;
  --storm-panel-2: #171b20;
  --storm-text: #e6d8c3;
  --storm-muted: #b7ab99;
  --storm-red: #b64242;
  --storm-blue: #4aa9c5;
  --storm-gold: #d9a35a;
  --storm-border: rgba(255,255,255,0.08);

  color: var(--storm-text) !important;
  font-family: "Baskerville", "Garamond", "Palatino Linotype", "Book Antiqua", Georgia, serif !important;
  background:
    linear-gradient(90deg, rgba(74,169,197,0.07) 0%, rgba(17,21,26,0.96) 18%, rgba(17,21,26,0.96) 82%, rgba(217,163,90,0.07) 100%),
    linear-gradient(180deg, #171b20 0%, #11151a 140px, #0d0f12 100%) !important;
  border: 1px solid var(--storm-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
  max-width: 1100px;
}

.codex-page--stormbringer p,
.codex-page--stormbringer li,
.codex-page--stormbringer td,
.codex-page--stormbringer th,
.codex-page--stormbringer dd { color: var(--storm-text) !important; }

.codex-page--stormbringer a { color: #8fcfe3 !important; }
.codex-page--stormbringer a:hover { color: var(--storm-gold) !important; }

.codex-page--stormbringer h1,
.codex-page--stormbringer h2,
.codex-page--stormbringer h3,
.codex-page--stormbringer h4,
.codex-page--stormbringer h5,
.codex-page--stormbringer h6,
.codex-page--stormbringer .mw-headline {
  font-family: "Baskerville", "Garamond", "Palatino Linotype", "Book Antiqua", Georgia, serif !important;
  color: var(--storm-red) !important;
  text-transform: none !important;
  font-variant: small-caps;
  letter-spacing: 0.06em !important;
  text-shadow: 0 0 8px rgba(182,66,66,0.22) !important;
}

.codex-page--stormbringer h1 {
  font-size: 2.4rem;
  border-bottom: 1px solid rgba(182,66,66,0.35);
}

.codex-page--stormbringer h2 {
  font-size: 1.75rem;
  border-bottom: 1px solid rgba(182,66,66,0.18);
}

.codex-page--stormbringer h3 { font-size: 1.25rem; }

.codex-page--stormbringer hr {
  border: 0;
  height: 2px;
  background: linear-gradient(to right, var(--storm-blue), var(--storm-red), var(--storm-gold));
  border-radius: 999px;
  opacity: 0.75;
}

.codex-page--stormbringer > p:first-of-type::first-letter {
  float: left;
  font-size: 3.4rem;
  line-height: 0.85;
  padding-right: 8px;
  color: var(--storm-gold);
  font-family: inherit !important;
  text-shadow: 0 0 8px rgba(217,163,90,0.25);
}

.codex-page--stormbringer blockquote,
.codex-page--stormbringer .storm-panel {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--storm-border);
  border-left: 4px solid var(--storm-red);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}

.codex-page--stormbringer table,
.codex-page--stormbringer table.wikitable {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: rgba(24,18,14,0.94) !important;
  border: 1px solid rgba(182,66,66,0.22) !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.codex-page--stormbringer table th,
.codex-page--stormbringer table.wikitable th,
.codex-page--stormbringer th,
.codex-page--stormbringer th * {
  background: linear-gradient(to right, #341417, #4a1c20) !important;
  color: #f0d7a1 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.75rem;
  border: 1px solid rgba(255,255,255,0.08);
}

.codex-page--stormbringer td {
  padding: 0.75rem;
  background: rgba(255,255,255,0.015);
}

.codex-page--stormbringer #toc,
.codex-page--stormbringer .toc {
  background: linear-gradient(180deg, rgba(28,46,56,0.85), rgba(14,17,21,0.95));
  border: 1px solid var(--storm-border);
  border-radius: 14px;
}

.codex-navbox--stormbringer,
.stormbringer-nav,
.codex-nav--stormbringer {
  text-align: center;
  font-family: "Baskerville", "Garamond", "Palatino Linotype", Georgia, serif !important;
  margin: 1.5rem auto 2rem !important;
  padding: 0.85rem 1.2rem !important;
  background: linear-gradient(to right, rgba(22,39,49,0.96), rgba(36,19,21,0.96), rgba(41,28,17,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.35);
}

.codex-navbox--stormbringer .storm-nav-title,
.codex-nav--stormbringer .storm-nav-title,
.codex-nav--stormbringer .codex-nav-title {
  color: #b64242 !important;
  font-variant: small-caps;
  letter-spacing: 0.08em;
}

.codex-navbox--stormbringer a,
.stormbringer-nav a,
.codex-nav--stormbringer a {
  color: #e6d8c3 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.84rem;
}

.codex-navbox--stormbringer a:hover,
.codex-nav--stormbringer a:hover { color: #d9a35a !important; }

/* =========================================================
   7. HAWKMOON
   ========================================================= */

.hawkmoon-banner {
  text-align: center;
  margin: 0 0 1.5rem 0;
}

.hawkmoon-banner img,
.hawkmoon-banner .hawkmoon-banner-image {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border: 1px solid #6e5830 !important;
  box-shadow: 0 0 0 1px #2b2317, 0 8px 22px rgba(0,0,0,0.45) !important;
}

.codex-page--hawkmoon,
.hawkmoon-theme {
  background: linear-gradient(to bottom, rgba(18,22,29,0.98), rgba(24,28,35,0.99)) !important;
  color: #e7decd !important;
  border: 1px solid #6b5530 !important;
  box-shadow: inset 0 0 0 1px #241d12, 0 4px 18px rgba(0,0,0,0.28) !important;
  font-family: "Crimson Text", Georgia, serif !important;
  font-size: 1.08em;
  line-height: 1.65;
}

.codex-page--hawkmoon *,
.hawkmoon-theme * { font-family: "Crimson Text", Georgia, serif; }

.codex-page--hawkmoon p,
.codex-page--hawkmoon li,
.codex-page--hawkmoon dd,
.codex-page--hawkmoon td,
.codex-page--hawkmoon th,
.codex-page--hawkmoon blockquote,
.hawkmoon-theme p,
.hawkmoon-theme li,
.hawkmoon-theme dd,
.hawkmoon-theme td,
.hawkmoon-theme th,
.hawkmoon-theme blockquote { color: #e7decd !important; }

.codex-page--hawkmoon a,
.hawkmoon-theme a { color: #d2ad63 !important; }
.codex-page--hawkmoon a:visited,
.hawkmoon-theme a:visited { color: #b99758 !important; }
.codex-page--hawkmoon a:hover,
.hawkmoon-theme a:hover { color: #f0cb7c !important; }

.codex-page--hawkmoon h1,
.codex-page--hawkmoon h2,
.codex-page--hawkmoon h3,
.codex-page--hawkmoon h4,
.codex-page--hawkmoon h5,
.codex-page--hawkmoon h6,
.codex-page--hawkmoon .mw-headline,
.codex-page--hawkmoon .hawkmoon-panel-title,
.hawkmoon-theme h1,
.hawkmoon-theme h2,
.hawkmoon-theme h3,
.hawkmoon-theme h4,
.hawkmoon-theme h5,
.hawkmoon-theme h6,
.hawkmoon-theme .mw-headline,
.hawkmoon-panel-title {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  letter-spacing: 0.02em;
  color: #d6b06a !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}

.codex-page--hawkmoon h1,
.hawkmoon-theme h1 {
  font-size: 2.35em;
  font-weight: 700;
  color: #e0ba72 !important;
  border-bottom: 2px solid #7b6134;
}

.codex-page--hawkmoon h2,
.hawkmoon-theme h2 {
  font-size: 1.8em;
  font-weight: 700;
  border-bottom: 1px solid #5c4725;
}

.codex-page--hawkmoon h3,
.hawkmoon-theme h3 {
  font-size: 1.45em;
  border-bottom: 1px solid #4f3e20;
}

.codex-page--hawkmoon blockquote,
.hawkmoon-theme blockquote,
.hawkmoon-panel {
  margin: 1.2rem 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid #7b6134;
  background: rgba(76,57,27,0.18);
  box-shadow: inset 0 0 0 1px rgba(36,29,18,0.55);
}

.codex-page--hawkmoon table.wikitable,
.hawkmoon-theme table.wikitable {
  background: #191d24 !important;
  color: #e7decd !important;
  border: 1px solid #6b5530 !important;
  border-collapse: collapse;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.codex-page--hawkmoon table.wikitable th,
.hawkmoon-theme table.wikitable th {
  background: #2b2f38 !important;
  color: #e7c980 !important;
  border: 1px solid #6b5530 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
}

.codex-page--hawkmoon table.wikitable td,
.hawkmoon-theme table.wikitable td {
  background: #1a1f27 !important;
  border: 1px solid #4f3e20 !important;
}

.codex-page--hawkmoon #toc,
.codex-page--hawkmoon .toc,
.hawkmoon-theme #toc,
.hawkmoon-theme .toc {
  background: #171b21 !important;
  border: 1px solid #6b5530 !important;
  color: #e7decd !important;
  box-shadow: inset 0 0 0 1px #241d12;
}

.codex-navbox--hawkmoon,
.hawkmoon-navbox,
.codex-nav--hawkmoon {
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  margin: 1.5rem auto 2rem !important;
  padding: 0.85rem 1.2rem !important;
  background: linear-gradient(to bottom, rgba(18,22,29,0.98), rgba(24,28,35,0.99));
  border: 1px solid #6b5530;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #241d12, 0 4px 18px rgba(0,0,0,0.28);
  color: #e7decd !important;
}

.codex-navbox--hawkmoon strong,
.codex-navbox--hawkmoon .hawkmoon-nav-title,
.codex-nav--hawkmoon .codex-nav-title,
.codex-nav--hawkmoon .hawkmoon-nav-title {
  color: #d6b06a !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
}

.codex-navbox--hawkmoon a,
.hawkmoon-navbox a,
.codex-nav--hawkmoon a { color: #d2ad63 !important; }
.codex-navbox--hawkmoon a:hover,
.hawkmoon-navbox a:hover,
.codex-nav--hawkmoon a:hover { color: #f0cb7c !important; }

/* =========================================================
   8. APES: AGE OF THE COVENANT
   ========================================================= */

.codex-page.codex-page--apes {
  --apes-bg: #e6ddc9;
  --apes-paper: #efe6d3;
  --apes-ink: #1f1c17;
  --apes-muted: #5e564b;
  --apes-bronze: #8a6f43;
  --apes-oxide: #7a3e2e;
  --apes-green: #46513b;

  background: var(--apes-bg) !important;
  color: var(--apes-ink) !important;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
  line-height: 1.7;
  max-width: 1080px;
}

.codex-page--apes p,
.codex-page--apes li,
.codex-page--apes td,
.codex-page--apes th,
.codex-page--apes dd { color: var(--apes-ink) !important; }

.codex-page--apes h1,
.codex-page--apes h2,
.codex-page--apes h3 {
  font-family: "Trajan Pro", "Cinzel", serif !important;
  letter-spacing: 0.06em;
  color: #2b241c !important;
}

.codex-page--apes h1 {
  text-transform: uppercase;
  text-align: center;
  font-size: 2rem;
  border-bottom: 1px solid rgba(90,70,45,0.3);
}

.codex-page--apes h2 {
  text-transform: uppercase;
  font-size: 1.2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(138,111,67,0.3);
  padding-top: 0.75rem;
}

.codex-page--apes h3 { color: var(--apes-oxide) !important; }

.apes-subtitle {
  text-align: center;
  font-style: italic;
  color: var(--apes-muted);
}

.codex-page--apes a {
  color: var(--apes-green) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(70,81,59,0.4);
}

.codex-page--apes a:hover { color: var(--apes-oxide) !important; }

.apes-callout {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--apes-paper);
  border: 1px solid rgba(90,70,45,0.3);
  border-radius: 8px;
}

.codex-navbox--apes,
.codex-nav--apes {
  margin: 1.5rem auto 2rem !important;
  padding-top: 0.85rem !important;
  border-top: 2px solid #8a6f43;
  text-align: center;
  color: #1f1c17 !important;
}

.codex-navbox--apes strong,
.codex-navbox--apes .apes-nav-title,
.codex-nav--apes .codex-nav-title,
.codex-nav--apes .apes-nav-title {
  color: #7a3e2e !important;
  font-family: "Cinzel", Georgia, serif !important;
}

.codex-navbox--apes a,
.codex-navbox--apes a:visited,
.codex-nav--apes a,
.codex-nav--apes a:visited { color: #46513b !important; }

/* =========================================================
   9. CRUCIBLE COMICS / EARTH-11717
   Canonical wrapper:
   <div class="codex-page codex-page--crucible-comics cc-page--hero">
   Page type classes:
   cc-page--hero, cc-page--villain, cc-page--team,
   cc-page--civilian, cc-page--tech, cc-page--peoples,
   cc-page--organization, cc-page--location, cc-page--history
   Legacy landing/category aliases retained: .codex-page--heroes,
   .codex-page--villains, .codex-page--teams, .codex-page--civilians,
   .codex-page--technology, .codex-page--peoples, .codex-page--organizations,
   .codex-page--locations, .codex-page--history
   ========================================================= */

.crucible-comics-header {
  max-width: 1200px;
  margin: 0 auto 0 auto;
  border: 3px solid #10162f;
  box-shadow: 0 0 24px rgba(255,196,38,0.35);
  background: #070b1d;
  position: relative;
}

.crucible-comics-header img {
  display: block;
  width: 100%;
  height: auto;
}

.crucible-comics-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #0b1028);
}

.codex-page--crucible-comics,
.codex-page--heroes,
.codex-page--villains,
.codex-page--teams,
.codex-page--civilians,
.codex-page--technology,
.codex-page--peoples,
.codex-page--organizations,
.codex-page--locations,
.codex-page--history {
  --cc-accent: #d71920;
  --cc-accent-dark: #7f1117;
  --cc-accent-bright: #ff7a2f;
  --cc-accent-soft: rgba(215,25,32,0.16);
  --cc-bg-a: #0b1028;
  --cc-bg-b: #050714;
  --cc-bg-c: #15112a;
  --cc-text: #f3f6ff;
  --cc-link: #7fe3ff;
  --cc-panel-bg: #f1f5f9;
  --cc-panel-text: #111827;
  --cc-panel-border: #0f172a;
  --cc-panel-heading-bg: #0f172a;
  --cc-panel-heading-text: #ffffff;

  max-width: 1100px;
  margin: 0 auto 2rem auto !important;
  padding: 1.5rem 2rem !important;
  background:
    radial-gradient(circle at 50% 0%, var(--cc-accent-soft), transparent 40%),
    radial-gradient(circle at 20% 30%, rgba(80,178,255,0.15), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,60,120,0.12), transparent 50%),
    linear-gradient(180deg, var(--cc-bg-a) 0%, var(--cc-bg-b) 100%) !important;
  color: var(--cc-text) !important;
  font-family: "Roboto Condensed", Arial, sans-serif !important;
  font-size: 1.08rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  border: 2px solid rgba(255,212,59,0.45) !important;
  box-shadow:
    0 0 40px rgba(255,100,0,0.15),
    inset 0 0 60px rgba(80,178,255,0.08) !important;
  position: relative;
}

.codex-page--crucible-comics p,
.codex-page--crucible-comics li,
.codex-page--crucible-comics td,
.codex-page--crucible-comics th,
.codex-page--crucible-comics dd,
.codex-page--crucible-comics dt,
.codex-page--heroes p, .codex-page--heroes li, .codex-page--heroes td, .codex-page--heroes th, .codex-page--heroes dd, .codex-page--heroes dt,
.codex-page--villains p, .codex-page--villains li, .codex-page--villains td, .codex-page--villains th, .codex-page--villains dd, .codex-page--villains dt,
.codex-page--teams p, .codex-page--teams li, .codex-page--teams td, .codex-page--teams th, .codex-page--teams dd, .codex-page--teams dt,
.codex-page--civilians p, .codex-page--civilians li, .codex-page--civilians td, .codex-page--civilians th, .codex-page--civilians dd, .codex-page--civilians dt,
.codex-page--technology p, .codex-page--technology li, .codex-page--technology td, .codex-page--technology th, .codex-page--technology dd, .codex-page--technology dt,
.codex-page--peoples p, .codex-page--peoples li, .codex-page--peoples td, .codex-page--peoples th, .codex-page--peoples dd, .codex-page--peoples dt,
.codex-page--organizations p, .codex-page--organizations li, .codex-page--organizations td, .codex-page--organizations th, .codex-page--organizations dd, .codex-page--organizations dt,
.codex-page--locations p, .codex-page--locations li, .codex-page--locations td, .codex-page--locations th, .codex-page--locations dd, .codex-page--locations dt,
.codex-page--history p, .codex-page--history li, .codex-page--history td, .codex-page--history th, .codex-page--history dd, .codex-page--history dt {
  color: var(--cc-text) !important;
}

.codex-page--crucible-comics h1,
.codex-page--crucible-comics h2,
.codex-page--crucible-comics h3,
.codex-page--crucible-comics h4,
.codex-page--crucible-comics .mw-headline,
.codex-page--locations h1,
.codex-page--locations h2,
.codex-page--locations h3,
.codex-page--locations h4,
.codex-page--locations .mw-headline {
  font-family: "Bangers", Impact, "Arial Black", sans-serif !important;
  font-weight: normal !important;
  letter-spacing: 0.04em !important;
  color: #ffd43b !important;
  text-shadow:
    2px 2px 0 #10162f,
    4px 4px 0 var(--cc-accent-dark),
    0 0 12px rgba(255,210,51,0.45) !important;
}

.codex-page--heroes h1, .codex-page--heroes h2, .codex-page--heroes h3, .codex-page--heroes h4, .codex-page--heroes .mw-headline,
.codex-page--villains h1, .codex-page--villains h2, .codex-page--villains h3, .codex-page--villains h4, .codex-page--villains .mw-headline,
.codex-page--teams h1, .codex-page--teams h2, .codex-page--teams h3, .codex-page--teams h4, .codex-page--teams .mw-headline,
.codex-page--civilians h1, .codex-page--civilians h2, .codex-page--civilians h3, .codex-page--civilians h4, .codex-page--civilians .mw-headline,
.codex-page--technology h1, .codex-page--technology h2, .codex-page--technology h3, .codex-page--technology h4, .codex-page--technology .mw-headline,
.codex-page--peoples h1, .codex-page--peoples h2, .codex-page--peoples h3, .codex-page--peoples h4, .codex-page--peoples .mw-headline,
.codex-page--organizations h1, .codex-page--organizations h2, .codex-page--organizations h3, .codex-page--organizations h4, .codex-page--organizations .mw-headline,
.codex-page--history h1, .codex-page--history h2, .codex-page--history h3, .codex-page--history h4, .codex-page--history .mw-headline {
  font-family: "Bangers", Impact, "Arial Black", sans-serif !important;
  font-weight: normal !important;
  letter-spacing: 0.04em !important;
  color: #ffd43b !important;
  text-shadow:
    2px 2px 0 #10162f,
    4px 4px 0 var(--cc-accent-dark),
    0 0 12px rgba(255,210,51,0.45) !important;
}

.codex-page--crucible-comics h1,
.codex-page--locations h1 {
  font-size: 3rem;
  text-align: center;
  margin-top: 0.4rem;
  border-bottom: 4px solid var(--cc-accent);
  padding-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
}

.codex-page--crucible-comics h2,
.codex-page--locations h2 {
  font-size: 2.1rem;
  margin-top: 2rem;
  border-bottom: 3px solid var(--cc-accent);
}

.codex-page--crucible-comics h2::after,
.codex-page--locations h2::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.4rem;
  background: linear-gradient(90deg, transparent, var(--cc-accent-bright), #50b2ff, transparent);
}

.codex-page--crucible-comics h3,
.codex-page--locations h3 {
  font-size: 1.55rem;
  color: var(--cc-accent-bright) !important;
}

.codex-page--crucible-comics h4,
.codex-page--locations h4 {
  font-size: 1.35rem;
  color: #ffb347 !important;
}

.codex-page--heroes h1, .codex-page--villains h1, .codex-page--teams h1, .codex-page--civilians h1,
.codex-page--technology h1, .codex-page--peoples h1, .codex-page--organizations h1, .codex-page--history h1 {
  font-size: 3rem;
  text-align: center;
  margin-top: 0.4rem;
  border-bottom: 4px solid var(--cc-accent);
  padding-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
}

.codex-page--heroes h2, .codex-page--villains h2, .codex-page--teams h2, .codex-page--civilians h2,
.codex-page--technology h2, .codex-page--peoples h2, .codex-page--organizations h2, .codex-page--history h2 {
  font-size: 2.1rem;
  margin-top: 2rem;
  border-bottom: 3px solid var(--cc-accent);
}

.codex-page--heroes h2::after, .codex-page--villains h2::after, .codex-page--teams h2::after, .codex-page--civilians h2::after,
.codex-page--technology h2::after, .codex-page--peoples h2::after, .codex-page--organizations h2::after, .codex-page--history h2::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.4rem;
  background: linear-gradient(90deg, transparent, var(--cc-accent-bright), #50b2ff, transparent);
}

.codex-page--heroes h3, .codex-page--villains h3, .codex-page--teams h3, .codex-page--civilians h3,
.codex-page--technology h3, .codex-page--peoples h3, .codex-page--organizations h3, .codex-page--history h3 {
  font-size: 1.55rem;
  color: var(--cc-accent-bright) !important;
}

.codex-page--heroes h4, .codex-page--villains h4, .codex-page--teams h4, .codex-page--civilians h4,
.codex-page--technology h4, .codex-page--peoples h4, .codex-page--organizations h4, .codex-page--history h4 {
  font-size: 1.35rem;
  color: #ffb347 !important;
}

.codex-page--crucible-comics a,
.codex-page--crucible-comics a:visited,
.codex-page--locations a,
.codex-page--locations a:visited {
  color: var(--cc-link) !important;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 0 6px rgba(80,178,255,0.4);
}

.codex-page--crucible-comics a:hover,
.codex-page--locations a:hover {
  color: #ffd43b !important;
  text-shadow: 0 0 8px rgba(111,217,255,0.8);
}

.codex-page--heroes a, .codex-page--heroes a:visited,
.codex-page--villains a, .codex-page--villains a:visited,
.codex-page--teams a, .codex-page--teams a:visited,
.codex-page--civilians a, .codex-page--civilians a:visited,
.codex-page--technology a, .codex-page--technology a:visited,
.codex-page--peoples a, .codex-page--peoples a:visited,
.codex-page--organizations a, .codex-page--organizations a:visited,
.codex-page--history a, .codex-page--history a:visited {
  color: var(--cc-link) !important;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 0 6px rgba(80,178,255,0.4);
}

.codex-page--heroes a:hover, .codex-page--villains a:hover, .codex-page--teams a:hover, .codex-page--civilians a:hover,
.codex-page--technology a:hover, .codex-page--peoples a:hover, .codex-page--organizations a:hover, .codex-page--history a:hover {
  color: #ffd43b !important;
  text-shadow: 0 0 8px rgba(111,217,255,0.8);
}

/* Crucible page type palettes */
.codex-page--crucible-comics.cc-page--hero,
.codex-page--heroes,
.crucible-category--heroes {
  --cc-accent: #1d4ed8;
  --cc-accent-dark: #1e3a8a;
  --cc-accent-bright: #60a5fa;
  --cc-accent-soft: rgba(29,78,216,0.18);
  --cc-link: #93c5fd;
}

.codex-page--crucible-comics.cc-page--villain,
.codex-page--villains,
.crucible-category--villains {
  --cc-accent: #7e22ce;
  --cc-accent-dark: #3b0764;
  --cc-accent-bright: #c084fc;
  --cc-accent-soft: rgba(126,34,206,0.18);
  --cc-link: #d8b4fe;
  --cc-bg-a: #14051f;
  --cc-bg-b: #07030d;
}

.codex-page--crucible-comics.cc-page--team,
.codex-page--teams,
.crucible-category--teams {
  --cc-accent: #dc2626;
  --cc-accent-dark: #7f1d1d;
  --cc-accent-bright: #f97316;
  --cc-accent-soft: rgba(220,38,38,0.18);
  --cc-link: #fecaca;
}

.codex-page--crucible-comics.cc-page--civilian,
.codex-page--civilians,
.crucible-category--civilians {
  --cc-accent: #ca8a04;
  --cc-accent-dark: #713f12;
  --cc-accent-bright: #fde047;
  --cc-accent-soft: rgba(202,138,4,0.18);
  --cc-link: #fef08a;
  --cc-bg-a: #17120a;
  --cc-bg-b: #080603;
}

.codex-page--crucible-comics.cc-page--tech,
.codex-page--crucible-comics.cc-page--technology,
.codex-page--technology,
.crucible-category--technology {
  --cc-accent: #38bdf8;
  --cc-accent-dark: #0f3b57;
  --cc-accent-bright: #67e8f9;
  --cc-accent-soft: rgba(56,189,248,0.18);
  --cc-link: #9beafe;
  --cc-bg-a: #061424;
  --cc-bg-b: #030711;
}

.codex-page--crucible-comics.cc-page--peoples,
.codex-page--crucible-comics.cc-page--people,
.codex-page--peoples,
.crucible-category--peoples {
  --cc-accent: #16a34a;
  --cc-accent-dark: #14532d;
  --cc-accent-bright: #86efac;
  --cc-accent-soft: rgba(22,163,74,0.18);
  --cc-link: #bbf7d0;
  --cc-bg-a: #07180f;
  --cc-bg-b: #030906;
}

.codex-page--crucible-comics.cc-page--organization,
.codex-page--organizations,
.crucible-category--organizations {
  --cc-accent: #9f1239;
  --cc-accent-dark: #4c0519;
  --cc-accent-bright: #fb7185;
  --cc-accent-soft: rgba(159,18,57,0.18);
  --cc-link: #fda4af;
}

.codex-page--crucible-comics.cc-page--location,
.codex-page--locations,
.crucible-category--locations {
  --cc-accent: #f97316;
  --cc-accent-dark: #7c2d12;
  --cc-accent-bright: #facc15;
  --cc-accent-soft: rgba(249,115,22,0.20);
  --cc-link: #ffd166;
  --cc-bg-a: #101836;
  --cc-bg-b: #070a18;
}

.codex-page--crucible-comics.cc-page--history,
.codex-page--history,
.crucible-category--history {
  --cc-accent: #64748b;
  --cc-accent-dark: #1e293b;
  --cc-accent-bright: #cbd5e1;
  --cc-accent-soft: rgba(100,116,139,0.20);
  --cc-link: #e2e8f0;
  --cc-bg-a: #111827;
  --cc-bg-b: #05070d;
}

/* Stronger Crucible page-type treatments */
.codex-page--crucible-comics.cc-page--hero,
.codex-page--crucible-comics.cc-page--villain,
.codex-page--crucible-comics.cc-page--team,
.codex-page--crucible-comics.cc-page--civilian,
.codex-page--crucible-comics.cc-page--tech,
.codex-page--crucible-comics.cc-page--technology,
.codex-page--crucible-comics.cc-page--people,
.codex-page--crucible-comics.cc-page--peoples,
.codex-page--crucible-comics.cc-page--organization,
.codex-page--crucible-comics.cc-page--location,
.codex-page--crucible-comics.cc-page--history,
.codex-page--heroes,
.codex-page--villains,
.codex-page--teams,
.codex-page--civilians,
.codex-page--technology,
.codex-page--peoples,
.codex-page--organizations,
.codex-page--locations,
.codex-page--history {
  border-color: color-mix(in srgb, var(--cc-accent) 65%, #ffd43b 35%) !important;
}

.codex-page--crucible-comics.cc-page--hero::before,
.codex-page--crucible-comics.cc-page--villain::before,
.codex-page--crucible-comics.cc-page--team::before,
.codex-page--crucible-comics.cc-page--civilian::before,
.codex-page--crucible-comics.cc-page--tech::before,
.codex-page--crucible-comics.cc-page--technology::before,
.codex-page--crucible-comics.cc-page--people::before,
.codex-page--crucible-comics.cc-page--peoples::before,
.codex-page--crucible-comics.cc-page--organization::before,
.codex-page--crucible-comics.cc-page--location::before,
.codex-page--crucible-comics.cc-page--history::before,
.codex-page--heroes::before,
.codex-page--villains::before,
.codex-page--teams::before,
.codex-page--civilians::before,
.codex-page--technology::before,
.codex-page--peoples::before,
.codex-page--organizations::before,
.codex-page--locations::before,
.codex-page--history::before {
  content: "";
  display: block;
  height: 8px;
  margin: -1.5rem -2rem 1.2rem -2rem;
  background: linear-gradient(90deg, var(--cc-accent-dark), var(--cc-accent-bright), #ffd43b, var(--cc-accent));
  box-shadow: 0 0 18px var(--cc-accent-soft);
}

/* Crucible page identity accents
   Page types are distinguished by palette, border, top stripe, heading
   underline, tables, links, and infobox/panel accents. Watermark and
   ghost-label systems have been removed to avoid layout conflicts. */

/* Faint diagonal production texture across standard Crucible pages. */
.codex-page--crucible-comics {
  background:
    repeating-linear-gradient(
      -28deg,
      rgba(255,255,255,0.014) 0,
      rgba(255,255,255,0.014) 1px,
      transparent 1px,
      transparent 38px
    ),
    radial-gradient(circle at 50% 0%, var(--cc-accent-soft), transparent 40%),
    radial-gradient(circle at 20% 30%, rgba(80,178,255,0.15), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,60,120,0.12), transparent 50%),
    linear-gradient(180deg, var(--cc-bg-a) 0%, var(--cc-bg-b) 100%) !important;
}

/* Accent the main page title by page type without generated labels. */
.codex-page--crucible-comics h1,
.codex-page--heroes h1,
.codex-page--villains h1,
.codex-page--teams h1,
.codex-page--civilians h1,
.codex-page--technology h1,
.codex-page--peoples h1,
.codex-page--organizations h1,
.codex-page--locations h1,
.codex-page--history h1 {
  border-bottom-color: var(--cc-accent) !important;
  box-shadow: 0 4px 0 rgba(255,212,59,0.18);
}

/* Page-type tuned quote/callout accenting. */
.codex-page--crucible-comics .cc-quote {
  border-left-color: var(--cc-accent) !important;
  background:
    linear-gradient(90deg, var(--cc-accent-soft), rgba(20,24,32,0.75)) !important;
}

.codex-page--crucible-comics .codex-infobox,
.codex-page--crucible-comics .codex-infobox--hero,
.codex-page--crucible-comics .codex-infobox--villain,
.codex-page--crucible-comics .codex-infobox--team,
.codex-page--crucible-comics .codex-infobox--civilian,
.codex-page--crucible-comics .codex-infobox--tech,
.codex-page--crucible-comics .codex-infobox--organization,
.codex-page--crucible-comics .codex-infobox--location,
.codex-page--crucible-comics .codex-infobox--history,
.codex-page--crucible-comics .codex-infobox--peoples {
  border-color: var(--cc-accent) !important;
  box-shadow: 6px 6px 0 var(--cc-accent-dark), 0 0 18px var(--cc-accent-soft) !important;
}

.codex-page--crucible-comics .codex-infobox th {
  background: linear-gradient(180deg, var(--cc-accent-bright), var(--cc-accent)) !important;
  color: #11162c !important;
}

.codex-page--crucible-comics.cc-page--tech,
.codex-page--crucible-comics.cc-page--technology,
.codex-page--technology {
  background:
    repeating-linear-gradient(
      -28deg,
      rgba(255,255,255,0.014) 0,
      rgba(255,255,255,0.014) 1px,
      transparent 1px,
      transparent 38px
    ),
    linear-gradient(rgba(103,232,249,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,232,249,0.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, var(--cc-accent-soft), transparent 40%),
    linear-gradient(180deg, var(--cc-bg-a) 0%, var(--cc-bg-b) 100%) !important;
  background-size: auto, 24px 24px, 24px 24px, auto, auto !important;
}

.codex-page--crucible-comics.cc-page--history,
.codex-page--history {
  background:
    repeating-linear-gradient(
      -28deg,
      rgba(255,255,255,0.014) 0,
      rgba(255,255,255,0.014) 1px,
      transparent 1px,
      transparent 38px
    ),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.12)),
    radial-gradient(circle at 50% 0%, var(--cc-accent-soft), transparent 40%),
    linear-gradient(180deg, var(--cc-bg-a) 0%, var(--cc-bg-b) 100%) !important;
}

/* Crucible readable panels */
.codex-page--crucible-comics .crucible-comics-panel,
.codex-page--crucible-comics .crucible-comics-callout,
.codex-page--locations .crucible-comics-panel,
.codex-page--locations .crucible-comics-callout,
.codex-page--heroes .crucible-comics-panel, .codex-page--heroes .crucible-comics-callout,
.codex-page--villains .crucible-comics-panel, .codex-page--villains .crucible-comics-callout,
.codex-page--teams .crucible-comics-panel, .codex-page--teams .crucible-comics-callout,
.codex-page--civilians .crucible-comics-panel, .codex-page--civilians .crucible-comics-callout,
.codex-page--technology .crucible-comics-panel, .codex-page--technology .crucible-comics-callout,
.codex-page--peoples .crucible-comics-panel, .codex-page--peoples .crucible-comics-callout,
.codex-page--organizations .crucible-comics-panel, .codex-page--organizations .crucible-comics-callout,
.codex-page--history .crucible-comics-panel, .codex-page--history .crucible-comics-callout,
.crucible-category-intro,
.crucible-card,
.location-panel,
.location-callout {
  max-width: 760px;
  margin: 2rem auto;
  padding: 1rem 1.25rem;
  border: 3px solid var(--cc-panel-border);
  border-left: 10px solid var(--cc-accent);
  border-radius: 10px;
  background: var(--cc-panel-bg) !important;
  color: var(--cc-panel-text) !important;
  box-shadow: 6px 6px 0 var(--cc-accent-dark), 0 0 18px rgba(80,178,255,0.25);
}

.codex-page--crucible-comics .crucible-comics-panel p,
.codex-page--crucible-comics .crucible-comics-panel li,
.codex-page--crucible-comics .crucible-comics-panel div,
.codex-page--locations .location-panel p,
.codex-page--locations .location-panel li,
.codex-page--locations .location-callout p,
.codex-page--locations .location-callout li,
.crucible-category-intro,
.crucible-category-intro p,
.crucible-card,
.crucible-card p,
.crucible-card li {
  color: var(--cc-panel-text) !important;
}

.codex-page--crucible-comics .crucible-comics-panel > b:first-child,
.codex-page--crucible-comics .crucible-comics-panel > strong:first-child,
.location-panel > b:first-child,
.location-panel > strong:first-child,
.location-callout > b:first-child,
.location-callout > strong:first-child {
  display: block;
  margin: -1rem -1.25rem 1rem -1.25rem;
  padding: 0.65rem 1rem;
  background: var(--cc-panel-heading-bg);
  color: var(--cc-panel-heading-text) !important;
  font-family: "Bangers", "Arial Black", sans-serif !important;
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.codex-page--crucible-comics .crucible-comics-panel a,
.codex-page--crucible-comics .crucible-comics-panel a:visited,
.codex-page--locations .location-panel a,
.codex-page--locations .location-callout a,
.crucible-card a,
.crucible-category-intro a {
  color: #0f3b57 !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-shadow: none;
}

.codex-page--crucible-comics table.wikitable,
.codex-page--heroes table.wikitable,
.codex-page--villains table.wikitable,
.codex-page--teams table.wikitable,
.codex-page--civilians table.wikitable,
.codex-page--technology table.wikitable,
.codex-page--peoples table.wikitable,
.codex-page--organizations table.wikitable,
.codex-page--locations table.wikitable,
.codex-page--history table.wikitable {
  width: 100%;
  border-collapse: collapse;
  background: rgba(9,13,36,0.92) !important;
  color: #f3f6ff !important;
  border: 2px solid rgba(255,212,59,0.65) !important;
  box-shadow: 0 0 14px rgba(80,178,255,0.25);
}

.codex-page--crucible-comics table.wikitable th,
.codex-page--heroes table.wikitable th,
.codex-page--villains table.wikitable th,
.codex-page--teams table.wikitable th,
.codex-page--civilians table.wikitable th,
.codex-page--technology table.wikitable th,
.codex-page--peoples table.wikitable th,
.codex-page--organizations table.wikitable th,
.codex-page--locations table.wikitable th,
.codex-page--history table.wikitable th {
  background: linear-gradient(180deg, var(--cc-accent-bright), var(--cc-accent)) !important;
  color: #11162c !important;
  font-family: "Barlow Condensed", Arial, sans-serif !important;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.codex-page--crucible-comics table.wikitable td,
.codex-page--heroes table.wikitable td,
.codex-page--villains table.wikitable td,
.codex-page--teams table.wikitable td,
.codex-page--civilians table.wikitable td,
.codex-page--technology table.wikitable td,
.codex-page--peoples table.wikitable td,
.codex-page--organizations table.wikitable td,
.codex-page--locations table.wikitable td,
.codex-page--history table.wikitable td {
  color: #f3f6ff !important;
  border-color: rgba(111,217,255,0.25) !important;
}

.codex-nav--crucible-comics,
.codex-nav--heroes,
.codex-nav--villains,
.codex-nav--teams,
.codex-nav--civilians,
.codex-nav--technology,
.codex-nav--peoples,
.codex-nav--organizations,
.codex-nav--locations,
.codex-nav--history {
  max-width: 1100px;
  margin: 2rem auto 0 auto !important;
  padding: 0.85rem 1rem !important;
  text-align: center;
  background: linear-gradient(180deg, rgba(17,24,58,0.98), rgba(6,8,23,0.98));
  border: 2px solid rgba(255,212,59,0.75);
  box-shadow: 0 0 20px rgba(255,79,43,0.25);
  font-family: "Barlow Condensed", Arial, sans-serif !important;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

.crucible-comics-nav-title,
.heroes-nav-title,
.villains-nav-title,
.teams-nav-title,
.civilians-nav-title,
.technology-nav-title,
.peoples-nav-title,
.organizations-nav-title,
.locations-nav-title,
.history-nav-title,
.codex-nav--crucible-comics .codex-nav-title,
.codex-nav--heroes .codex-nav-title,
.codex-nav--villains .codex-nav-title,
.codex-nav--teams .codex-nav-title,
.codex-nav--civilians .codex-nav-title,
.codex-nav--technology .codex-nav-title,
.codex-nav--peoples .codex-nav-title,
.codex-nav--organizations .codex-nav-title,
.codex-nav--locations .codex-nav-title,
.codex-nav--history .codex-nav-title {
  display: block;
  margin-bottom: 0.35rem;
  font-family: "Bangers", "Arial Black", Impact, sans-serif !important;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  color: #ffd43b !important;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #10162f, 0 0 10px rgba(255,212,59,0.55);
}

.codex-nav--crucible-comics a,
.codex-nav--crucible-comics a:visited,
.codex-nav--locations a,
.codex-nav--locations a:visited,
.codex-nav--organizations a,
.codex-nav--organizations a:visited,
.codex-nav--technology a,
.codex-nav--technology a:visited,
.codex-nav--heroes a,
.codex-nav--heroes a:visited,
.codex-nav--villains a,
.codex-nav--villains a:visited,
.codex-nav--teams a,
.codex-nav--teams a:visited {
  color: #6fd9ff !important;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.codex-nav--crucible-comics a:hover,
.codex-nav--locations a:hover,
.codex-nav--organizations a:hover,
.codex-nav--technology a:hover,
.codex-nav--heroes a:hover,
.codex-nav--villains a:hover,
.codex-nav--teams a:hover { color: #ffd43b !important; }

.codex-nav--civilians a, .codex-nav--civilians a:visited,
.codex-nav--peoples a, .codex-nav--peoples a:visited,
.codex-nav--history a, .codex-nav--history a:visited {
  color: #6fd9ff !important;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.codex-nav--civilians a:hover,
.codex-nav--peoples a:hover,
.codex-nav--history a:hover { color: #ffd43b !important; }

/* Crucible Comics category chips
   MediaWiki places #catlinks outside the .codex-page wrapper,
   so these selectors target the page body instead.
   Replace ns-3000 if your Crucible namespace uses a different number. */
body.ns-3000 #catlinks,
body[class*="page-Crucible_"] #catlinks {
  max-width: 1100px;
  margin: 0.75rem auto 0.75rem auto;
  padding: 0.55rem 1rem 0.35rem 1rem;
  border: 0;
  border-top: 2px solid #111;
  background: transparent;
  box-shadow: none;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  line-height: 1.8;
}

body.ns-3000 #catlinks .mw-normal-catlinks,
body[class*="page-Crucible_"] #catlinks .mw-normal-catlinks {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #f3f6ff;
}

body.ns-3000 #catlinks .mw-normal-catlinks a,
body[class*="page-Crucible_"] #catlinks .mw-normal-catlinks a {
  display: inline-block;
  margin: 0.2rem 0.25rem;
  padding: 0.18rem 0.6rem;
  border: 2px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111 !important;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-shadow: none;
}

body.ns-3000 #catlinks .mw-normal-catlinks a:hover,
body[class*="page-Crucible_"] #catlinks .mw-normal-catlinks a:hover {
  background: #111;
  color: #fff !important;
  text-decoration: none;
  text-shadow: none;
}

/* Crucible landing/index page components */
.crucible-landing-grid,
.cc-landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.crucible-landing-card,
.cc-landing-card {
  padding: 1rem 1.1rem;
  border: 3px solid #111827;
  border-left: 10px solid var(--cc-accent);
  border-radius: 12px;
  background: #f8fafc !important;
  color: #111827 !important;
  box-shadow: 6px 6px 0 var(--cc-accent-dark), 0 0 18px rgba(80,178,255,0.18);
}

.crucible-landing-card *,
.cc-landing-card * { color: #111827 !important; text-shadow: none !important; }

.crucible-landing-card a,
.cc-landing-card a {
  color: #0f3b57 !important;
  font-weight: 800;
  text-decoration: underline;
  text-transform: uppercase;
}

/* Crucible category pages */
.codex-page--crucible-comics.crucible-category,
.codex-page--crucible.crucible-category {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.crucible-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.crucible-card { margin: 0; }

.crucible-card a {
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
}

body.ns-14 .mw-category,
body.ns-14 .mw-category-generated,
body.ns-14 #mw-pages {
  background: rgba(255,255,255,0.92);
  color: #111;
  border: 3px solid #111;
  box-shadow: 6px 6px 0 #d72638;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}

body.ns-14 #mw-pages h2,
body.ns-14 .mw-category-generated h2 {
  font-family: "Bangers", "Impact", "Arial Black", sans-serif !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111 !important;
  border-bottom: 3px solid #111;
}

body.ns-14 .mw-category a,
body.ns-14 #mw-pages a {
  font-weight: 700;
  color: #005bbb !important;
  text-decoration: none;
}

body.ns-14 .mw-category a:hover,
body.ns-14 #mw-pages a:hover {
  color: #d72638 !important;
  text-decoration: underline;
}

/* =========================================================
   10. BREADCRUMBS
   ========================================================= */

.codex-breadcrumbs {
  max-width: 1100px;
  margin: 0.75rem auto 1rem auto;
  padding: 0.45rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.4;
  border-radius: 8px;
  opacity: 0.92;
}

.codex-breadcrumbs a {
  text-decoration: none;
  font-weight: 600;
}

.codex-breadcrumbs a:hover { text-decoration: underline; }

.codex-breadcrumbs--hawkmoon { background: rgba(35,28,22,0.16); border: 1px solid rgba(80,60,42,0.35); }
.codex-breadcrumbs--stormbringer { background: rgba(35,8,8,0.18); border: 1px solid rgba(120,20,20,0.35); }
.codex-breadcrumbs--nightcats { background: rgba(48,35,12,0.18); border: 1px solid rgba(150,110,35,0.35); }
.codex-breadcrumbs--ffbt { background: rgba(90,30,18,0.16); border: 1px solid rgba(160,60,35,0.35); }
.codex-breadcrumbs--apes { background: rgba(35,45,35,0.16); border: 1px solid rgba(70,90,70,0.35); }

.codex-breadcrumbs--crucible {
  background: rgba(12,22,48,0.20);
  border: 1px solid rgba(92,154,255,0.45);
  box-shadow: 0 0 14px rgba(92,154,255,0.18);
  color: #f4f7ff;
  font-family: "Bangers", "Trebuchet MS", Arial, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.codex-breadcrumbs--crucible a { color: #ffd34d; }
.codex-breadcrumbs--crucible a:hover {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255,211,77,0.65);
}

/* =========================================================
   11. RESPONSIVE CLEANUP
   ========================================================= */

@media screen and (max-width: 768px) {
  .codex-page { padding: 16px 18px !important; }
  .codex-page #toc::before,
  .codex-page .toc::before { width: 64px; height: 64px; }

  .floatright,
  .tright,
  .thumb.tright,
  .thumb.floatright,
  .floatleft,
  .tleft,
  .thumb.tleft,
  .thumb.floatleft,
  .career-portrait,
  .nightcats-frame.right {
    float: none !important;
    clear: both !important;
    display: block !important;
    margin: 12px auto !important;
    text-align: center;
  }

  .codex-page--stormbringer h1,
  .codex-page--crucible-comics h1,
  .codex-page--locations h1 { font-size: 2rem; }

  .codex-page--stormbringer h2,
  .codex-page--crucible-comics h2,
  .codex-page--locations h2 { font-size: 1.5rem; }

  .codex-page--hawkmoon h1,
  .hawkmoon-theme h1 { font-size: 2em; }

  .codex-page--hawkmoon h2,
  .hawkmoon-theme h2 { font-size: 1.55em; }

  .codex-page--hawkmoon h3,
  .hawkmoon-theme h3 { font-size: 1.28em; }
}
/* ============================================================
   12. BEYOND CODEX — CLEAN VERSION
   Matches Other Subsites
   ============================================================ */


.codex-page--beyond {
  --beyond-bg: #07111f;
  --beyond-border: #3f6f9f;
  --beyond-accent: #6fd3ff;
  --beyond-accent-warm: #ffd36f;
  --beyond-text: #dceaf7;
  --beyond-muted: #9db4c8;

  display: block;

  background:
    radial-gradient(circle at top left, rgba(111, 211, 255, 0.12), transparent 35rem),
    linear-gradient(180deg, #07111f 0%, #0a1524 100%);

  color: var(--beyond-text);
  border: 1px solid rgba(111, 211, 255, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);

  font-family: "Roboto", sans-serif;
  line-height: 1.65;
}

/* ============================================================
   HEADINGS — FORCE OVERRIDE (kills Cinzel bleed)
   ============================================================ */

.codex-page--beyond h1,
.codex-page--beyond h2,
.codex-page--beyond h3,
.codex-page--beyond h4 {
  font-family: "Exo 2", sans-serif !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.codex-page--beyond h1 {
  color: #ffffff;
  border-bottom: 2px solid var(--beyond-border);
  padding-bottom: 0.4rem;
  text-shadow: 0 0 10px rgba(111, 211, 255, 0.6);
}

.codex-page--beyond h2 {
  color: var(--beyond-accent);
  border-left: 4px solid var(--beyond-accent);
  padding-left: 0.6rem;
}

.codex-page--beyond h3 {
  color: var(--beyond-accent-warm);
}

/* ============================================================
   LINKS
   ============================================================ */

.codex-page--beyond a {
  color: var(--beyond-accent);
  text-decoration: none;
  border-bottom: 1px dotted rgba(111, 211, 255, 0.5);
}

.codex-page--beyond a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(111, 211, 255, 0.8);
}

/* ============================================================
   HEADER IMAGE (YOUR MJ BANNER)
   ============================================================ */

.beyond-header-image {
  margin-bottom: 1.5rem;
  text-align: center;
}

.beyond-header-image img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(111, 211, 255, 0.35);
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   NAV (MATCHES YOUR STANDARD STYLE)
   ============================================================ */

.codex-nav--beyond {
  margin-top: 1.75rem;
  padding: 1rem;
  text-align: center;

  background: rgba(16, 29, 46, 0.9);
  border: 1px solid rgba(111, 211, 255, 0.3);
  border-radius: 14px;

  font-family: "Exo 2", sans-serif;
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

.codex-nav--beyond .beyond-nav-title {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--beyond-accent-warm);
  text-transform: uppercase;
}

/* Beyond category chips
   MediaWiki places #catlinks outside the .codex-page wrapper,
   so these selectors target the page body instead.
   Replace ns-#### with your Beyond namespace number when you know it. */
body[class*="page-Beyond_"] #catlinks {
  max-width: 960px;
  margin: 0.75rem auto 0.75rem auto;
  padding: 0.55rem 1rem 0.35rem 1rem;
  border: 0;
  border-top: 1px solid rgba(120, 220, 255, 0.35);
  background: transparent;
  box-shadow: none;
  font-family: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  line-height: 1.8;
}

body[class*="page-Beyond_"] #catlinks .mw-normal-catlinks {
  font-family: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #dceaf7;
}

body[class*="page-Beyond_"] #catlinks .mw-normal-catlinks a {
  display: inline-block;
  margin: 0.2rem 0.25rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(120, 220, 255, 0.6);
  border-radius: 0.35rem;
  background: rgba(120, 220, 255, 0.08);
  color: #dff8ff !important;
  font-family: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-shadow: none;
}

body[class*="page-Beyond_"] #catlinks .mw-normal-catlinks a:hover {
  background: rgba(120, 220, 255, 0.2);
  color: #ffffff !important;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(111, 211, 255, 0.8);
}
/* Beyond Career Cards */

.codex-page--beyond .beyond-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin: 1.5rem 0;
}

.codex-page--beyond .beyond-career-card {
  background: linear-gradient(145deg, rgba(12, 24, 36, 0.96), rgba(5, 10, 18, 0.98));
  border: 1px solid rgba(95, 210, 255, 0.45);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow:
    0 0 18px rgba(60, 190, 255, 0.18),
    inset 0 0 18px rgba(120, 220, 255, 0.06);
}

.codex-page--beyond .beyond-career-card h2 {
  margin-top: 0;
  margin-bottom: 0.35rem;
  color: #9fe8ff;
  font-family: "Orbitron", "Rajdhani", sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(95, 210, 255, 0.35);
  padding-bottom: 0.25rem;
}

.codex-page--beyond .beyond-career-tagline {
  color: #d7f7ff;
  font-style: italic;
  margin: 0.35rem 0 0.75rem;
}

.codex-page--beyond .beyond-career-card ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.codex-page--beyond .beyond-career-card li {
  margin-bottom: 0.35rem;
}
/* === BEYOND / CODEX TABLES === */

.codex-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem; /* slightly smaller, cleaner */
  line-height: 1.4;
}

/* Header row */
.codex-table th {
  text-align: left;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 2px solid #444;
}

/* Table cells */
.codex-table td {
  padding: 8px 10px;
  vertical-align: top; /* fixes misalignment */
  border-bottom: 1px solid #333; /* gridlines */
}

/* First column (Edge / Drawback name) */
.codex-table td:first-child {
  font-weight: 600;
  width: 28%; /* prevents crowding */
  white-space: nowrap; /* keeps names clean */
  padding-right: 16px; /* spacing between columns */
}

/* Second column (Effect text) */
.codex-table td:last-child {
  width: 72%;
}

/* Optional: subtle row hover (feels nice in Codex) */
.codex-table tr:hover td {
  background: rgba(255,255,255,0.03);
}
/* ============================================================
   13. CRUCIBLE SHARED INLINE COMPONENTS
   ============================================================ */

.cc-quote {
  margin: 1.25em auto 1.75em auto;
  padding: 1em 1.25em;
  max-width: 760px;
  border-left: 6px solid #d7b15f;
  background: linear-gradient(90deg, rgba(215,177,95,0.15), rgba(20,24,32,0.75));
  color: #f0f3f8;
  font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.15em;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: 0 0 14px rgba(0,0,0,0.35);
}

.cc-quote strong {
  color: #ffd978;
  font-style: normal;
  letter-spacing: 0.04em;
}

}
.codex-infobox {
  border-collapse: separate;
  border-spacing: 0 0.35em;
}

.codex-infobox th {
  padding-right: 1.25em;
  white-space: nowrap;
}

.codex-infobox td {
  padding-left: 0.85em;
}
.codex-infobox th.codex-infobox-label,
.codex-infobox .codex-infobox-label {
  margin-right: 0.85em;
}
.thumbcaption {
  background: #111;         /* dark background */
  color: #ddd;              /* light text */
  padding: 0.4em 0.6em;
  font-size: 0.9em;
  line-height: 1.3;
}
.codex-page--crucible-comics .thumbcaption {
  background: #1a1a1a;
  color: #e6e6e6;
  border-top: 1px solid #c00;   /* subtle red accent */
  font-family: "Bangers", sans-serif;
  letter-spacing: 0.03em;
}
.codex-page--crucible-comics .thumbinner {
  background: #000;
  border: 1px solid #444;
}
.codex-page--crucible-comics .thumbinner {
  background: #000;              /* or very dark gray */
  border: 2px solid #c00;        /* Crucible red accent */
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
}
.codex-page--crucible-comics .thumbimage {
  border: none;                 /* removes inner image border */
  display: block;
}
.codex-page--crucible-comics .thumbinner {
  background: #111;
  border: 2px solid #c00;
  padding: 4px;
}
.codex-page--crucible-comics .cc-quote {
  margin: 1.25em auto 1.5em auto;
  padding: 0.9em 1.2em;
  max-width: 850px;
  background: #111;
  border-left: 5px solid #b30000;
  color: #f2f2f2;
  font-size: 1.15em;
  line-height: 1.45;
  font-style: italic;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.codex-page--crucible-comics .cc-quote cite {
  display: block;
  margin-top: 0.6em;
  color: #cfcfcf;
  font-size: 0.85em;
  font-style: normal;
  text-align: right;
}
.codex-page--crucible-comics .cc-quote {
  margin: 1.25em auto 1.5em auto;
  padding: 0.9em 1.2em;
  max-width: 850px;
  background: #111;
  border-left: 5px solid #b30000;
  color: #f2f2f2;
  font-size: 1.15em;
  line-height: 1.45;
  font-style: italic;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.codex-page--crucible-comics .cc-quote cite {
  display: block;
  margin-top: 0.6em;
  color: #cfcfcf;
  font-size: 0.85em;
  font-style: normal;
  text-align: right;
}

/* Crucible Comics Image Cleanup */

.codex-page--crucible-comics img,
.codex-page--crucible-comics .thumbimage {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Remove default thumbnail frame/background */
.codex-page--crucible-comics .thumb {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Remove inner frame around PNG renders */
.codex-page--crucible-comics .thumbinner {
    border: none !important;
    background: transparent !important;
}
/* Crucible Comics: Peoples pages */
.codex-page--crucible-comics.cc-page--people > .center,
.codex-page--crucible-comics.cc-page--people .center {
  text-align: center;
}

.codex-page--crucible-comics.cc-page--people img {
  border: 4px solid #c9a646;
  background: #111827;
  padding: 6px;
  box-shadow: 0 0 18px rgba(0,0,0,.55);
  border-radius: 6px;
}

.codex-page--crucible-comics.cc-page--people .cc-infobox {
  max-width: 520px;
  margin: 1.25rem auto 1.75rem auto;
  float: none;
  clear: both;
}

.codex-page--crucible-comics.cc-page--people .cc-character-box {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Crucible Comics: Peoples main image frame */
.codex-page--crucible-comics.cc-page--people .floatnone,
.codex-page--crucible-comics.cc-page--people .center,
.codex-page--crucible-comics.cc-page--people .thumb,
.codex-page--crucible-comics.cc-page--people figure {
  text-align: center;
}

.codex-page--crucible-comics.cc-page--people .mw-file-element,
.codex-page--crucible-comics.cc-page--people .thumbimage {
  border: 4px solid #c9a646 !important;
  background: #101820 !important;
  padding: 6px !important;
  box-shadow: 0 0 18px rgba(0,0,0,.65) !important;
  border-radius: 6px;
  box-sizing: border-box;
}
.cc-quote {
    margin: 2rem auto;
    padding: 1rem 1.5rem;

    max-width: 850px;

    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.7;

    text-align: left;

    color: #d8d8d8;
    background: rgba(255,255,255,0.02);

    border-left: 3px solid #7a0f0f;

    box-sizing: border-box;
}
/* =====================================================
   CRUCIBLE COMICS TEAM ROSTERS
===================================================== */

.cc-roster-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin: 2rem 0;
}

.cc-roster-card {
    width: 240px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cc-roster-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}

.cc-roster-card img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #555;
    margin-bottom: 0.75rem;
}

.cc-roster-card b,
.cc-roster-card strong {
    display: block;
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
    letter-spacing: 0.03em;
}

.cc-roster-card a {
    color: #e0e0e0;
    text-decoration: none;
}

.cc-roster-card a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.cc-roster-card br + * {
    color: #c8c8c8;
    font-size: 0.95rem;
    line-height: 1.45;
}



/* =====================================================
   MOBILE SUPPORT
===================================================== */

@media (max-width: 700px) {

    .cc-roster-grid {
        flex-direction: column;
        align-items: center;
    }

    .cc-roster-card {
        width: 90%;
        max-width: 320px;
    }

    .cc-roster-card img {
        width: 100%;
        height: auto;
    }
}
Retrieved from "https://codex.crucible.cc/index.php?title=MediaWiki:Common.css&oldid=6034"