/* ==========================================================================
   Chronicles of Omniluxia - wiki site
   Obsidian & gold. Minimal progressive enhancement.

   The palette is sampled directly from the mod's own main menu background:
   glowing gold sigil rings on near-black. Everything else follows from that.
   ========================================================================== */

:root {
  /* Surfaces, darkest to lightest */
  --ink:        #08070b;
  --ink-2:      #0c0a11;
  --panel:      #14111c;
  --panel-2:    #1b1725;
  --line:       #2a2335;

  /* The gold, sampled from main_menu_background.dds */
  --gold:       #e8b96a;
  --gold-hi:    #ffd89b;
  --gold-deep:  #a8834a;
  --ember:      #d97a3c;
  --arcane:     #8a76e0;

  /* Text */
  --text:       #ded6c9;
  --text-soft:  #b3aa9c;
  --text-dim:   #8b8377;

  --measure:    68ch;
  --radius:     3px;

  --f-display:  'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-body:     'Spectral', Georgia, 'Times New Roman', serif;
  --f-accent:   'Cormorant Garamond', Georgia, serif;

  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- reset --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.75;
  overflow-x: hidden;
  /* A permanent, very faint arcane wash so pure black never feels flat. */
  background-image:
    radial-gradient(1200px 700px at 82% -8%,  rgba(232,185,106,.055), transparent 62%),
    radial-gradient(1000px 800px at 8% 42%,   rgba(138,118,224,.045), transparent 60%),
    radial-gradient(900px 600px at 55% 108%,  rgba(217,122,60,.045),  transparent 60%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: rgba(232,185,106,.28); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--ink); padding: .7rem 1.2rem;
  font-family: var(--f-display); letter-spacing: .06em;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- type --- */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .012em;
  color: #f2ebdd;
  margin: 0 0 .6em;
}

.prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
  margin-top: 2.6em;
  padding-bottom: .42em;
  position: relative;
  color: var(--gold-hi);
}
/* Each H2 carries a small gold rule that fades out to the right. */
.prose h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg,
    var(--gold-deep) 0%, rgba(168,131,74,.35) 32%, transparent 78%);
}
.prose h3 {
  font-size: clamp(1.16rem, 1.05rem + .45vw, 1.4rem);
  margin-top: 2.1em;
  color: #e9dcc2;
}
.prose h4 { font-size: 1.05rem; margin-top: 1.8em; color: var(--text-soft); }

.prose h2 .headerlink,
.prose h3 .headerlink {
  opacity: 0; margin-left: .4em; color: var(--gold-deep);
  text-decoration: none; font-size: .7em;
  transition: opacity .2s;
}
.prose h2:hover .headerlink,
.prose h3:hover .headerlink { opacity: .75; }

.prose p { margin: 0 0 1.35em; }

.prose > p:first-of-type::first-letter {
  float: left;
  font-family: var(--f-display);
  font-size: 3.9em;
  line-height: .82;
  padding: .06em .12em 0 0;
  margin-top: .04em;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(232,185,106,.42);
}

.prose strong { color: #f0e7d6; font-weight: 600; }
.prose em { color: #e4d9c4; }

.prose ul, .prose ol { margin: 0 0 1.5em; padding-left: 1.35em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--gold-deep); }

.prose blockquote {
  margin: 2em 0;
  padding: .3em 0 .3em 1.6em;
  border-left: 2px solid var(--gold-deep);
  font-family: var(--f-accent);
  font-size: 1.22em;
  font-style: italic;
  color: #e0d4bb;
  background: linear-gradient(90deg, rgba(232,185,106,.06), transparent 70%);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* The wiki's dominant structure is a list item holding a nested blockquote:
   a date and what happened, a rank and what it means. Those are annotations,
   not pull quotes, so they get a tight, quiet treatment instead. Styled as a
   definition list: the item is the term, the blockquote its description. */
.prose li > blockquote {
  margin: .3em 0 0;
  padding: 0 0 0 .95rem;
  border-left: 1px solid rgba(168,131,74,.45);
  background: none;
  font-family: var(--f-body);
  font-size: .95em;
  font-style: normal;
  color: var(--text-soft);
  line-height: 1.6;
}
.prose li:has(> blockquote) {
  margin-bottom: 1.15em;
  color: var(--gold-hi);
  font-family: var(--f-display);
  font-size: .95em;
  letter-spacing: .02em;
}
.prose li > blockquote,
.prose li > blockquote p {
  font-family: var(--f-body);
  color: var(--text-soft);
  letter-spacing: normal;   /* do not inherit the display tracking from the li */
}

/* Era markers promoted from the Timeline's plain-text delimiters. */
.prose h2.era {
  margin-top: 3.4em;
  text-align: center;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 1rem;
}
.prose h2.era::after {
  left: 50%; transform: translateX(-50%);
  width: 8rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.prose h2.era::before {
  content: "◆";
  display: block;
  font-size: .5em;
  color: var(--gold-deep);
  margin-bottom: .5em;
  letter-spacing: 0;
}
.prose h3.era-sub {
  margin-top: 2.4em;
  font-size: .8rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ember);
  text-align: center;
}

.prose code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .86em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .12em .42em;
  color: var(--gold-hi);
}
.prose pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-deep);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  overflow-x: auto;
  font-size: .9rem;
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--text-soft); }

.prose hr {
  border: 0; height: 1px; margin: 2.6em 0;
  background: linear-gradient(90deg, transparent, var(--line) 20%,
              var(--gold-deep) 50%, var(--line) 80%, transparent);
}

.prose .callout {
  background: linear-gradient(180deg, rgba(232,185,106,.07), rgba(232,185,106,.02));
  border: 1px solid rgba(232,185,106,.2);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 2em 0;
  font-size: .97em;
}

/* Tables get the panel treatment; several lore pages use them heavily. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: .94em;
  background: rgba(20,17,28,.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.prose thead th {
  background: linear-gradient(180deg, rgba(232,185,106,.14), rgba(232,185,106,.05));
  font-family: var(--f-display);
  font-size: .84em;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold-hi);
  text-align: left;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(232,185,106,.28);
}
.prose td { padding: .78rem 1rem; border-top: 1px solid var(--line); vertical-align: top; }
.prose tbody tr { transition: background .2s; }
.prose tbody tr:hover { background: rgba(232,185,106,.045); }

/* ------------------------------------------------------------ hyperlinks -- */

a { color: var(--gold); text-decoration: none; }

/* Links in body copy get a gold underline that sweeps in from the left. */
.prose a:not(.ext),
.prose a.ext {
  color: var(--gold-hi);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 92%;
  background-repeat: no-repeat;
  transition: background-size .32s var(--ease), color .2s;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(168,131,74,.4);
}
.prose a:hover { background-size: 100% 1px; color: #fff; border-bottom-color: transparent; }

.prose a.ext::after {
  content: "↗";
  font-size: .72em;
  margin-left: .18em;
  color: var(--gold-deep);
  vertical-align: super;
}

/* ------------------------------------------------------------------ nav -- */

.topbar {
  position: sticky; top: 0; z-index: 90;
  background: rgba(8,7,11,.72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(232,185,106,.16);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,185,106,.55), transparent);
}
.topbar-in {
  max-width: 1480px; margin: 0 auto;
  padding: .6rem 1.5rem;
  display: flex; align-items: center; gap: 1.5rem;
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img {
  width: 132px; height: auto;
  filter: drop-shadow(0 0 14px rgba(232,185,106,.34)) brightness(1.35) sepia(.35)
          saturate(1.4) hue-rotate(-8deg);
  transition: filter .3s;
}
.brand:hover img { filter: drop-shadow(0 0 20px rgba(255,216,155,.6)) brightness(1.6)
                          sepia(.4) saturate(1.6) hue-rotate(-8deg); }

.nav-menu { margin-left: auto; }
.nav-menu > summary { list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > .nav { display: flex; gap: .15rem; flex-wrap: wrap; }
.nav a {
  position: relative;
  font-family: var(--f-display);
  font-size: .73rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-dim);
  padding: .55rem .72rem;
  transition: color .22s;
}
.nav a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: .28rem;
  height: 1px; background: var(--gold);
  transition: left .28s var(--ease), right .28s var(--ease);
}
.nav a:hover { color: var(--gold-hi); }
.nav a:hover::after, .nav a.on::after { left: .72rem; right: .72rem; }
.nav a.on { color: var(--gold); }

.navburger { display: none; }

/* ---------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  min-height: min(62vh, 30rem);
  display: flex; align-items: flex-end;
  padding: 7rem 1.5rem 4.5rem;
  overflow: hidden;
  isolation: isolate;
}
.hero-slim { min-height: min(44vh, 22rem); }

/* The graded loading-screen plate, held still while the page scrolls over it. */
.hero-art {
  position: absolute; inset: -2px;
  z-index: -2;
  background-image: var(--plate);
  background-size: cover;
  background-position: center 42%;
  background-attachment: fixed;
  opacity: .82;
  transform: scale(1.04);
  animation: driftIn 1.6s var(--ease) both;
}
@keyframes driftIn {
  from { opacity: 0; transform: scale(1.11); }
  to   { opacity: .82; transform: scale(1.04); }
}

/* Two stacked scrims: one vertical for text contrast, one warm for mood. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,7,11,.86) 0%, rgba(8,7,11,.34) 34%,
                    rgba(8,7,11,.72) 74%, var(--ink) 100%),
    radial-gradient(1000px 480px at 22% 92%, rgba(232,185,106,.16), transparent 68%);
}
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 8rem;
  background: linear-gradient(180deg, transparent, var(--ink));
  z-index: -1;
}

.hero-in {
  max-width: 1280px; width: 100%; margin: 0 auto;
  animation: riseIn .9s .12s var(--ease) both;
}
/* On an article the title should sit on the same vertical as the body text,
   so the hero and the prose read as one column rather than two compositions. */
.article .hero-in { max-width: var(--measure); }
@media (min-width: 1080px) {
  .article .hero.has-toc-hero .hero-in { max-width: 1180px; padding-left: 18rem; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.eyebrow {
  display: inline-block;
  font-family: var(--f-display);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold);
  padding: .38rem .9rem;
  border: 1px solid rgba(232,185,106,.36);
  border-radius: 100px;
  background: rgba(8,7,11,.5);
  backdrop-filter: blur(6px);
  margin-bottom: 1.2rem;
  transition: background .25s, border-color .25s, color .25s;
}
a.eyebrow:hover { background: rgba(232,185,106,.16); border-color: var(--gold); color: var(--gold-hi); }
.eyebrow.static { pointer-events: none; }

.hero h1 {
  font-size: clamp(2.3rem, 1.4rem + 4vw, 4.6rem);
  font-weight: 900;
  letter-spacing: .005em;
  margin: 0 0 .35em;
  max-width: 18ch;
  background: linear-gradient(174deg, #fff8ea 8%, var(--gold-hi) 46%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 30px rgba(232,185,106,.28));
}

.hero .lede {
  font-family: var(--f-accent);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  line-height: 1.55;
  color: #d6cbb6;
  max-width: 52ch;
  margin: 0 0 1.2rem;
}

.epigraph {
  border: 0;
  margin: 0 0 1.4rem;
  padding: 0 0 0 1.4rem;
  border-left: 2px solid var(--gold-deep);
  max-width: 54ch;
}
.epigraph p {
  font-family: var(--f-accent);
  font-style: italic;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.42rem);
  line-height: 1.5;
  color: #ded2ba;
  margin: 0 0 .4rem;
}
.epigraph cite {
  font-family: var(--f-display);
  font-style: normal; font-size: .74rem;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold-deep);
}
.epigraph cite::before { content: "— "; }

.meta {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--f-display);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}
.meta i { color: var(--gold-deep); font-style: normal; }

/* --------------------------------------------------------------- splash -- */

.splash {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 7rem;
  overflow: hidden;
  isolation: isolate;
}
/* The mod's own sigil rings, breathing slowly. */
.splash-art {
  position: absolute; inset: 0; z-index: -2;
  background: url('img/sigils-1280.jpg') center/cover no-repeat;
  animation: sigilBreathe 22s ease-in-out infinite alternate;
}
@keyframes sigilBreathe {
  from { transform: scale(1.02); filter: brightness(.92) saturate(1); }
  to   { transform: scale(1.09); filter: brightness(1.1) saturate(1.15); }
}
.splash::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(720px 520px at 50% 58%, transparent 0%, rgba(8,7,11,.62) 72%),
    linear-gradient(180deg, rgba(8,7,11,.9) 0%, rgba(8,7,11,.42) 30%,
                    rgba(8,7,11,.78) 76%, var(--ink) 100%);
}

.splash-in { max-width: 62rem; animation: riseIn 1.1s .2s var(--ease) both; }

.splash-kicker {
  display: inline-block;
  font-family: var(--f-display);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.8rem;
  padding-bottom: .9rem;
  position: relative;
}
.splash-kicker::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 3rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.splash h1 {
  font-size: clamp(2.1rem, 1.1rem + 4.4vw, 4.4rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .5em;
  background: linear-gradient(172deg, #fffaf0 4%, var(--gold-hi) 42%, #b98f4f 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 44px rgba(232,185,106,.4));
}
.splash h1 em {
  font-style: normal;
  display: block;
  letter-spacing: .1em;
}

.splash-sub {
  font-family: var(--f-accent);
  font-size: clamp(1.15rem, 1rem + .75vw, 1.65rem);
  line-height: 1.5;
  color: #d3c8b3;
  max-width: 44ch;
  margin: 0 auto 2.4rem;
}

.splash-cta {
  display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center;
  margin-bottom: 3.4rem;
}

.btn {
  display: inline-block;
  position: relative;
  font-family: var(--f-display);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .95rem 2rem;
  color: var(--gold-hi);
  border: 1px solid rgba(232,185,106,.42);
  border-radius: 2px;
  background: rgba(8,7,11,.55);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: color .25s, border-color .25s, transform .25s var(--ease),
              box-shadow .3s;
}
/* Gold wipes across from the left on hover. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--gold), var(--gold-hi));
  transform: translateX(-101%);
  transition: transform .42s var(--ease);
}
.btn:hover {
  color: var(--ink);
  border-color: var(--gold-hi);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px -10px rgba(232,185,106,.55);
}
.btn:hover::before { transform: none; }
.btn.primary {
  background: linear-gradient(100deg, var(--gold-deep), var(--gold));
  color: #17120a;
  border-color: var(--gold-hi);
}
.btn.primary::before { background: linear-gradient(100deg, var(--gold-hi), #fff2d8); }

.splash-stats {
  display: flex; gap: clamp(1.5rem, 5vw, 4rem); justify-content: center;
  flex-wrap: wrap;
}
.splash-stats div { display: flex; flex-direction: column; gap: .2rem; }
.splash-stats strong {
  font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 900; color: var(--gold);
  text-shadow: 0 0 30px rgba(232,185,106,.4);
}
.splash-stats span {
  font-family: var(--f-display); font-size: .66rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim);
}

.splash-scroll {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  width: 1px; height: 3.5rem;
  background: linear-gradient(180deg, transparent, rgba(232,185,106,.5));
  overflow: hidden;
}
.splash-scroll span {
  position: absolute; top: 0; left: 0; width: 1px; height: 40%;
  background: var(--gold-hi);
  animation: scrollCue 2.4s ease-in-out infinite;
}
@keyframes scrollCue {
  0%   { transform: translateY(-100%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(340%); opacity: 0; }
}

/* -------------------------------------------------------------- layout --- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
  position: relative;
}
.wrap.wide { max-width: 1280px; }

/* Only pages that actually have a contents sidebar get two columns. Without
   this guard a sidebar-less page drops its prose into the narrow first track. */
.article .wrap { display: grid; gap: 3rem; }
@media (min-width: 1080px) {
  .article .wrap.has-toc {
    max-width: 1180px;
    grid-template-columns: 15rem minmax(0, var(--measure));
    justify-content: center;
    align-items: start;
  }
}

/* Long unbreakable tokens -- file paths in inline code, some of the wiki's
   transliterated names -- must not be able to widen the page on narrow screens. */
.prose { min-width: 0; overflow-wrap: break-word; }
.prose code { overflow-wrap: anywhere; }
.prose table { display: block; overflow-x: auto; }

.nation-panel {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(22,18,28,.82), rgba(8,7,11,.94));
  padding: 1.1rem;
  margin: 1.6rem 0 2rem;
}
.nation-panel img {
  width: 100%;
  max-width: 11rem;
  justify-self: center;
  border-radius: .35rem;
  box-shadow: 0 18px 42px -24px rgba(0,0,0,.95);
}
.nation-panel dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .45rem 1rem;
  margin: 0;
}
.nation-panel dt {
  font-family: var(--f-display);
  color: var(--gold-deep);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.nation-panel dd { margin: 0; color: var(--text); }
.country-map {
  margin: 1.6rem 0 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8,7,11,.72);
  padding: .75rem;
}
.country-map img {
  width: 100%;
  border-radius: .35rem;
}
.country-map figcaption,
.nation-panel figcaption {
  margin-top: .45rem;
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
}
/* Country atlases need more room for map labels on desktop than the prose
   measure provides. Keep the comfortable reading width, but let the figure
   breathe into the surrounding space on wider screens. */
@media (min-width: 1080px) {
  .country-map {
    width: calc(100% + 8rem);
    margin-left: -4rem;
  }
}
.data-list {
  display: grid;
  gap: 1rem;
  margin: 1.6rem 0 2rem;
}
.data-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(22,18,28,.72), rgba(8,7,11,.94));
  padding: 1rem;
}
.data-entry h2 {
  margin: 0 0 .25rem;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
}
.data-entry[hidden],
.idx-list li[hidden] { display: none; }
.data-entry h2[id] { scroll-margin-top: 6.5rem; }
.data-key {
  margin: 0 0 .65rem;
  color: var(--gold-deep);
  font-size: .78rem;
}
.data-tools,
.index-tools {
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.1rem; margin: 0 0 1.5rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(20,17,28,.78);
}
.data-tools label,
.index-tools label { display: grid; gap: .35rem; flex: 1; }
.data-tools label span,
.index-tools label span {
  color: var(--gold-deep); font-family: var(--f-display);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.data-tools input,
.index-tools input {
  width: 100%; border: 1px solid var(--line); border-radius: 2px;
  padding: .65rem .8rem; background: var(--ink); color: var(--text);
  font: inherit; font-size: .92rem;
}
.data-tools input:focus,
.index-tools input:focus { border-color: var(--gold-deep); outline: 2px solid rgba(232,185,106,.2); }
.data-count { color: var(--text-dim); font-size: .78rem; white-space: nowrap; }
.mechanics {
  border-top: 1px solid var(--line);
  margin-top: .8rem;
  padding-top: .75rem;
}
.bloodline-icon {
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgba(232,185,106,.28);
  border-radius: .35rem;
  background: rgba(0,0,0,.28);
}
@media (max-width: 680px) {
  .nation-panel { grid-template-columns: 1fr; }
  .nation-panel img { max-width: 9rem; }
  .data-entry { grid-template-columns: 1fr; }
}

/* Sidebar contents, sticky on wide screens. */
.toc {
  position: sticky; top: 6.5rem;
  border-left: 1px solid var(--line);
  padding-left: 1.7rem;
  font-size: .86rem;
  order: -1;
}
.toc h4 {
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .9rem;
  text-align: center;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.toc li { counter-increment: t; margin-bottom: .5rem; line-height: 1.4; }
.toc a {
  color: var(--text-dim);
  display: block;
  transition: color .2s, transform .2s var(--ease);
}
.toc a::before {
  content: counter(t, decimal-leading-zero);
  color: var(--gold-deep); font-size: .78em; margin-right: .55em;
  opacity: .7;
}
.toc a:hover { color: var(--gold-hi); transform: translateX(3px); }
@media (max-width: 1079px) {
  .toc {
    position: static; border-left: 0; border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 1.4rem 0; order: 0;
  }
  .toc ol { columns: 2; column-gap: 2rem; }
}

/* -------------------------------------------------------------- ornament -- */

.rule { display: flex; justify-content: center; margin: 0 0 2.6rem; }
.rule svg { width: min(340px, 60%); height: 16px; overflow: visible; }
.rule path, .rule circle {
  fill: none; stroke: var(--gold-deep); stroke-width: 1;
}
.rule .fill { fill: var(--gold); stroke: var(--gold); }

.sec-head { text-align: center; margin-bottom: 3rem; }
.sec-head h2 {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.7rem);
  font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  background: linear-gradient(172deg, #fff6e6, var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin-bottom: .35em;
}
.sec-head p {
  font-family: var(--f-accent); font-size: 1.2rem;
  color: var(--text-dim); margin: 0;
}

/* ---------------------------------------------------------------- cards -- */

.ccards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.1rem;
}

.ccard, .card, .feat {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--panel), var(--ink-2));
  overflow: hidden;
  isolation: isolate;
  transition: transform .38s var(--ease), border-color .3s, box-shadow .38s;
}
/* Texture sits furthest back (-2); the scrim over it at -1. Both are behind the
   card's own content but inside its isolation context. */
.ccard-tex, .card-tex, .feat-tex {
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--tex);
  background-size: cover; background-position: center;
  opacity: .5;
  transform: scale(1.06);
  transition: opacity .5s var(--ease), transform .8s var(--ease);
}
.ccard::after, .card::after, .feat::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(158deg, rgba(8,7,11,.62), rgba(8,7,11,.93) 72%);
}
/* A gold hairline along the top edge, brightening on hover. */
.ccard::before, .card::before, .feat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,185,106,.45), transparent);
  opacity: .55; transition: opacity .35s;
}
.ccard:hover::before, .card:hover::before, .feat:hover::before { opacity: 1; }
.ccard:hover, .card:hover, .feat:hover {
  transform: translateY(-5px);
  border-color: rgba(232,185,106,.45);
  box-shadow: 0 22px 48px -20px rgba(0,0,0,.9),
              0 0 0 1px rgba(232,185,106,.1),
              0 0 46px -14px rgba(232,185,106,.28);
}
.ccard:hover .ccard-tex,
.card:hover .card-tex,
.feat:hover .feat-tex { opacity: .85; transform: scale(1.13); }

/* Flex column so the "Read →" affordance pins to the bottom and the row of
   cards keeps a consistent baseline regardless of summary length. */
.ccard-in, .card-in, .feat-in {
  padding: 1.7rem 1.6rem;
  display: flex; flex-direction: column; height: 100%;
}
.card-more, .ccard-n { margin-top: auto; }
.cards, .ccards, .feats { align-items: stretch; }

.ccard h3, .card h3, .feat h3 {
  font-size: 1.16rem; letter-spacing: .04em;
  color: var(--gold-hi);
  margin-bottom: .55em;
  transition: color .25s;
}
.ccard p, .card p, .feat p {
  font-size: .93rem; line-height: 1.62;
  color: var(--text-dim);
  margin: 0 0 1rem;
}
.ccard-n, .card-more, .feat-cat {
  font-family: var(--f-display); font-size: .66rem;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--gold-deep);
  transition: color .25s, letter-spacing .3s var(--ease);
}
.card:hover .card-more { color: var(--gold-hi); letter-spacing: .26em; }

.badge {
  display: inline-block;
  font-family: var(--f-display); font-size: .55rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); background: var(--gold-deep);
  padding: .18em .6em; border-radius: 100px;
  margin-left: .6em; vertical-align: middle;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1.1rem;
}

.feats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1.1rem;
}
.feat-in { display: flex; flex-direction: column; gap: .5rem; }
.feat-cat { order: -1; }

.feats-sec { padding-top: 5rem; }

/* -------------------------------------------------------------- related -- */

.related {
  max-width: 1180px; margin: 0 auto;
  padding: 4rem 1.5rem 1rem;
  text-align: center;
}
.related h3 {
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 1.6rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.chip {
  display: inline-flex; align-items: baseline; gap: .55rem;
  font-size: .88rem;
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(20,17,28,.7);
  color: var(--text-soft);
  transition: border-color .25s, color .25s, background .25s, transform .25s var(--ease);
}
.chip-c {
  font-family: var(--f-display); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep);
}
.chip:hover {
  border-color: rgba(232,185,106,.5);
  background: rgba(232,185,106,.1);
  color: var(--gold-hi);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------- pagenav --- */

.pagenav {
  max-width: 1180px; margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.pn {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  background: linear-gradient(165deg, var(--panel), var(--ink-2));
  transition: border-color .3s, transform .3s var(--ease), background .3s;
}
.pn span {
  display: block;
  font-family: var(--f-display); font-size: .62rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .35rem;
}
.pn strong {
  font-family: var(--f-display); font-size: 1.02rem; font-weight: 500;
  color: var(--text); transition: color .25s;
}
.pn.next { text-align: right; grid-column: -2; }
.pn:hover { border-color: rgba(232,185,106,.42); transform: translateY(-3px); }
.pn:hover strong { color: var(--gold-hi); }

/* --------------------------------------------------------------- index --- */

.idx-group { margin-bottom: 3.5rem; }
.idx-group h2 {
  font-size: 1.4rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: .8rem;
}
.idx-n {
  font-size: .68rem; letter-spacing: .16em;
  color: var(--text-dim); font-weight: 400;
}
.idx-list {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  columns: 3; column-gap: 2.5rem;
}
@media (max-width: 900px) { .idx-list { columns: 2; } }
@media (max-width: 860px) { .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) {
  .idx-list { columns: 1; }
  .quick-links { grid-template-columns: 1fr !important; }
}
.idx-list li {
  break-inside: avoid;
  display: flex; align-items: baseline; gap: .6rem;
  padding: .34rem 0;
  border-bottom: 1px solid rgba(42,35,53,.5);
}
.idx-list a { color: var(--text-soft); transition: color .2s, padding-left .25s var(--ease); flex: 1; }
.idx-list li:hover a { color: var(--gold-hi); padding-left: .35rem; }
.idx-list span { font-size: .7rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.quick-links {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
.quick-link {
  display: grid; gap: .45rem; padding: 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(22,18,28,.78), rgba(8,7,11,.92));
  transition: border-color .2s, transform .2s var(--ease), background .2s;
}
.quick-link:hover { border-color: var(--gold-deep); transform: translateY(-2px); background: var(--panel); }
.quick-link strong { color: var(--gold-hi); font-family: var(--f-display); font-size: .92rem; }
.quick-link span { color: var(--text-dim); font-size: .88rem; line-height: 1.5; }
.closing { text-align: center; padding-bottom: 6rem; }
.closing-txt {
  font-family: var(--f-accent); font-size: 1.25rem;
  color: var(--text-soft); max-width: 46ch; margin: 0 auto 2rem;
}

/* -------------------------------------------------------------- footer --- */

.footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-2), #060509);
  margin-top: 2rem;
}
.footer-in { max-width: 1280px; margin: 0 auto; padding: 4rem 1.5rem 3rem; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-cols h4 {
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.footer-cols a {
  display: block; font-size: .9rem; color: var(--text-dim);
  padding: .26rem 0; transition: color .2s, padding-left .25s var(--ease);
}
.footer-cols a:hover { color: var(--gold-hi); padding-left: .3rem; }
.footer-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 15%,
              var(--gold-deep) 50%, var(--line) 85%, transparent);
  margin-bottom: 2rem;
}
.footer-note {
  font-size: .84rem; line-height: 1.75; color: var(--text-dim);
  text-align: center; max-width: 60ch; margin: 0 auto;
}
.footer-note strong { color: var(--text-soft); }
.footer-note a { color: var(--gold-deep); }
.footer-note a:hover { color: var(--gold-hi); }

/* ------------------------------------------------- scroll-driven reveal -- */
/* Progressive enhancement. Browsers without scroll-driven animations simply
   show the content, which is the correct fallback. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ccard, .card, .feat, .idx-group, .prose h2, .sec-head, .pn {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }
    @keyframes reveal {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: none; }
    }
    /* The hero plate drifts up slightly faster than the page scrolls. */
    .hero-art {
      animation: heroPan linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes heroPan {
      from { transform: scale(1.04) translateY(0); }
      to   { transform: scale(1.12) translateY(-3%); }
    }
  }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1300px) {
  .topbar-in { flex-wrap: wrap; padding: .5rem 1rem; gap: .8rem; }
  .brand img { width: 84px; }
  .brand-txt { font-size: .66rem; }

  .navburger {
    display: block; cursor: pointer;
    width: 2.6rem; height: 2.6rem; position: relative;
    border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
  }
  .navburger > span:first-child,
  .navburger > span:first-child::before,
  .navburger > span:first-child::after {
    content: ""; position: absolute; left: 50%; width: 1.1rem; height: 1px;
    background: var(--gold); transform: translateX(-50%);
    transition: transform .3s var(--ease), opacity .2s;
  }
  .navburger > span:first-child { top: 50%; }
  .navburger > span:first-child::before { top: -6px; left: 0; transform: none; }
  .navburger > span:first-child::after  { top: 6px;  left: 0; transform: none; }

  .nav-menu { width: 100%; }
  .nav-menu:not([open]) .nav { display: none; }
  .nav-menu[open] .nav {
    display: flex; width: 100%; flex-direction: column; gap: 0;
    border-top: 1px solid var(--line); padding-top: .5rem;
  }
  .nav-menu[open] .nav { animation: riseIn .3s var(--ease) both; }
  .nav-menu[open] .navburger > span:first-child { background: transparent; }
  .nav-menu[open] .navburger > span:first-child::before { transform: rotate(45deg); top: 0; }
  .nav-menu[open] .navburger > span:first-child::after  { transform: rotate(-45deg); top: 0; }
  .nav a { padding: .8rem .4rem; font-size: .78rem; border-bottom: 1px solid rgba(42,35,53,.5); }
  .nav a::after { display: none; }

  /* background-attachment: fixed is unreliable and expensive on mobile, and
     the smaller plate saves roughly two thirds of the bytes at this width. */
  .hero-art {
    background-attachment: scroll;
    background-image: var(--plate-sm, var(--plate));
  }
  .hero { padding: 4.5rem 1.25rem 3.5rem; min-height: 46vh; }
  .wrap { padding: 2.5rem 1.25rem 3rem; }
  .prose > p:first-of-type::first-letter { font-size: 3.2em; }
  .pn.next { text-align: left; grid-column: auto; }
  .data-tools, .index-tools { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-art, .splash-art { animation: none; }
}

/* ----------------------------------------------------------------- print */

@media print {
  .topbar, .footer, .pagenav, .related, .toc, .hero-art, .splash-art { display: none; }
  body { background: #fff; color: #000; }
  .prose a { color: #000; border: 0; }
  .hero h1 { -webkit-text-fill-color: #000; color: #000; }
}

/* Keep orientation cards to two columns on compact screens; this follows the
   base quick-links rule so it cannot be overridden by source-order changes. */
@media (max-width: 860px) {
  .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .quick-links { grid-template-columns: 1fr; }
}