/* ───────────────────────────────────────────────────────────────
   style-b.css: "Grounded" base styles
   Used by every page under /setting/talan/: continent overview, domain
   pages, faction pages, history, magic.

   Page-specific tweaks (e.g. --domain-accent for a single page)
   live in the page's small inline <style> block.
   ─────────────────────────────────────────────────────────────── */

:root {
  --bg: #0f0c08;
  --bg2: #171209;
  --parch: #c8b890;
  --parch-dim: #8a7a58;
  --parch-bright: #e8d8a8;
  --gold: #c8900a;
  --gold-bright: #f0b020;
  --gold-dim: #a07520;
  --text: #d0c8a8;
  --text-dim: #9a9078;

  /* Default per-page accent: pages override in their inline style. */
  --domain-accent: var(--gold);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 30% 10%, #1a1408 0%, transparent 50%),
    radial-gradient(ellipse at 70% 90%, #0a0c08 0%, transparent 50%);
  min-height: 100vh;
  font-family: 'Crimson Pro', Georgia, serif;
  color: var(--text);
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ── LAYOUT ──────────────────────────────────────────────────── */

.container {
  position: relative; z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 72px 20px 80px;
}
.container.narrow { max-width: 920px; }

.breadcrumb {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem; letter-spacing: 0.25em;
  color: var(--gold-dim);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 12px;
}
.breadcrumb a { color: var(--gold-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { margin: 0 8px; }

.header { text-align: center; margin-bottom: 48px; }
.header-ornament {
  font-size: 1.1rem; color: var(--gold-dim);
  letter-spacing: 0.5em; margin-bottom: 12px;
}
.page-title {
  font-family: 'Uncial Antiqua', serif;
  font-size: clamp(2.8rem, 8vw, 4.8rem);
  color: var(--gold-bright);
  letter-spacing: 0.06em;
  text-shadow:
    0 0 40px rgba(200,144,10,0.5),
    0 0 80px rgba(200,144,10,0.2),
    2px 3px 0 rgba(0,0,0,0.8);
  line-height: 1;
  margin-bottom: 10px;
}
.page-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem; letter-spacing: 0.4em;
  color: var(--parch-dim);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.page-god-line {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.page-flavor {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text);
  max-width: 640px;
  margin: 0 auto;
}

.divider {
  display: flex; align-items: center; gap: 16px;
  margin: 48px 0 36px;
}
.div-line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,144,10,0.3), transparent);
}
.div-glyph { color: var(--gold-dim); font-size: 0.85rem; }

h2.section-heading {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem; letter-spacing: 0.32em;
  color: var(--gold);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.prose { max-width: 720px; margin: 0 auto; }
.prose p {
  font-size: 1.02rem; line-height: 1.85;
  margin-bottom: 1em;
}
.prose a { color: var(--gold); }

/* ── GLOBAL LINK COLOURS · low-specificity defaults so context-specific
   rules (card-links, breadcrumbs, etc.) still override ─────────────── */
:where(a:link)    { color: var(--gold); }
:where(a:visited) { color: var(--gold-dim); }
:where(a:hover)   { color: var(--gold-bright); }

/* ── FACTS PANEL ─────────────────────────────────────────────── */

.facts {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 18px;
  max-width: 720px;
  margin: 0 auto 24px;
  padding: 18px 22px;
  background: rgba(20,16,8,0.4);
  border: 1px solid rgba(200,144,10,0.18);
  border-left: 3px solid var(--domain-accent);
  border-radius: 3px;
}
.facts dt {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem; letter-spacing: 0.28em;
  color: var(--gold-dim);
  text-transform: uppercase;
  align-self: start;
  padding-top: 4px;
}
.facts dd {
  font-size: 0.95rem; line-height: 1.6;
  color: var(--text);
}
.facts dd .etym {
  font-style: italic;
  color: var(--parch-dim);
  font-size: 0.85rem;
  display: block;
  margin-top: 2px;
}

/* ── GOD'S CITY CALLOUT ──────────────────────────────────────── */

.gods-city {
  text-align: center;
  margin: 32px auto;
  max-width: 720px;
  padding: 22px 22px;
  border: 1px solid var(--domain-accent);
  border-radius: 3px;
  background: rgba(0,0,0,0.25);
  position: relative;
}
.gods-city::before,
.gods-city::after {
  content: '✦';
  position: absolute; top: -10px;
  background: var(--bg);
  padding: 0 10px;
  color: var(--domain-accent);
  font-size: 0.9rem;
}
.gods-city::before { left: 20px; }
.gods-city::after  { right: 20px; }
.gods-city-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem; letter-spacing: 0.32em;
  color: var(--gold-dim);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.gods-city-name {
  font-family: 'Uncial Antiqua', serif;
  font-size: 1.6rem;
  color: var(--gold-bright);
  margin-bottom: 4px;
}
.gods-city-byname {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--parch);
}
/* Anchor-reset when the god's-city callout is rendered as <a>. */
a.gods-city {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ── SUB-REGION CARDS (used on domain pages & faction overview) ── */

.subregion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.subregion-card {
  background: rgba(20,16,8,0.42);
  border: 1px solid rgba(200,144,10,0.18);
  border-radius: 3px;
  padding: 16px 18px 14px;
  position: relative;
  overflow: hidden;
}
a.subregion-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
a.subregion-card:hover {
  border-color: rgba(200,144,10,0.5);
  background: rgba(30,22,10,0.5);
  transform: translateY(-2px);
}
.subregion-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--domain-accent);
  opacity: 0.7;
}
.subregion-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: var(--gold-bright);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.subregion-etym {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--parch-dim);
  margin-bottom: 8px;
}
.subregion-desc {
  font-size: 0.92rem; line-height: 1.6;
  color: var(--text);
}
.subregion-tags {
  margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.subregion-tag {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem; letter-spacing: 0.18em;
  color: var(--gold-dim);
  text-transform: uppercase;
  border: 1px solid rgba(200,144,10,0.25);
  padding: 2px 7px;
  border-radius: 8px;
}
.subregion-tag.tbd {
  color: var(--text-dim);
  border-color: rgba(150,140,100,0.18);
  font-style: italic;
  letter-spacing: 0.12em;
}

/* ── DOMAIN GRID (used on talan.html) ───────────────────────── */

.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.domain-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(20,16,8,0.4);
  border: 1px solid rgba(200,144,10,0.18);
  border-radius: 3px;
  padding: 16px 18px 14px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
}
.domain-card:hover {
  border-color: rgba(200,144,10,0.5);
  background: rgba(30,22,10,0.5);
  transform: translateY(-2px);
}
.domain-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--accent, var(--gold));
  opacity: 0.7;
}
.domain-tag {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem; letter-spacing: 0.3em;
  color: var(--gold-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.domain-name {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem; letter-spacing: 0.1em;
  color: var(--gold-bright);
  margin-bottom: 4px;
}
.domain-god {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--parch-dim);
  margin-bottom: 8px;
}
.domain-desc {
  font-size: 0.85rem; line-height: 1.55;
  color: var(--text-dim);
}

/* Accent palette per god domain (used on the talan.html grid). */
.d-vindul   { --accent: #88aacf; }
.d-lautara  { --accent: #d4a04a; }
.d-myrkono  { --accent: #6a5a8a; }
.d-floteyn  { --accent: #4a8ab0; }
.d-sumendar { --accent: #c84020; }
.d-lioaru   { --accent: #b07a3a; }
.d-brauogi  { --accent: #7a9a3a; }
.d-ezkudon  { --accent: #5a7a8a; }
.d-egulon   { --accent: #f0c040; }
.d-zuzental { --accent: #8aa090; }
.d-nashavel { --accent: #2a6a4a; }
.d-ehizahar { --accent: #a85a36; }
.d-askamira { --accent: #e8d8a8; }

/* ── SEA CARDS (talan.html only) ────────────────────────────── */

.sea-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.sea-card {
  background: rgba(20,16,8,0.4);
  border: 1px solid rgba(200,144,10,0.18);
  padding: 18px 18px 16px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.sea-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--gold-dim);
}
.sea-name {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: var(--gold-bright);
  letter-spacing: 0.18em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.sea-etym {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--parch-dim);
  margin-bottom: 8px;
}
.sea-desc {
  font-size: 0.93rem; line-height: 1.65;
  color: var(--text);
}

/* ── MISC ────────────────────────────────────────────────────── */

.stub-note {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 14px 18px;
  border: 1px dashed rgba(200,144,10,0.3);
  border-radius: 3px;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--parch-dim);
  text-align: center;
  background: rgba(0,0,0,0.15);
}

.footer {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem; letter-spacing: 0.3em;
  color: rgba(220,165,40,0.7);
  margin-top: 64px;
  text-transform: uppercase;
}

/* ── CALLOUT BOX ───────────────────────────────────────────── */

.callout {
  border-left: 3px solid var(--gold-dim);
  background: rgba(200, 144, 10, 0.06);
  padding: 12px 16px;
  border-radius: 0 4px 4px 0;
  margin: 16px auto;
  max-width: 720px;
  font-size: 0.95rem;
  line-height: 1.7;
  font-style: italic;
  color: var(--parch);
}
.callout-label {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  font-style: normal;
}

/* ── TIMELINE + ERA CARDS ──────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.timeline {
  position: relative;
  margin: 24px auto 0;
  max-width: 760px;
  padding-left: 24px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(200, 144, 10, 0.3) 10%, rgba(200, 144, 10, 0.3) 90%, transparent);
}

.era {
  position: relative;
  margin-bottom: 6px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.2s;
}
.era:hover { border-color: rgba(200, 144, 10, 0.15); }

.era-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.era-dot {
  position: absolute;
  left: -24px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  flex-shrink: 0;
  top: 50%;
  transform: translateY(-50%);
}
.era-date {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  min-width: 130px;
  flex-shrink: 0;
}
.era-name {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  flex: 1;
}
.era-chevron {
  font-size: 0.65rem;
  color: var(--text-dim);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.era.open .era-chevron { transform: rotate(180deg); }

.era-body {
  display: none;
  padding: 0 16px 14px 16px;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text);
  animation: fadeUp 0.2s ease;
}
.era.open .era-body { display: block; }

.era-tag {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* Era colour schemes */
.era-creation   .era-header { background: linear-gradient(to right, rgba(106, 74, 138, 0.18), transparent); }
.era-creation   .era-name   { color: #c084fc; }
.era-creation   .era-dot    { background: #c084fc; }

.era-elden      .era-header { background: linear-gradient(to right, rgba(42, 106, 138, 0.18), transparent); }
.era-elden      .era-name   { color: #60c8f0; }
.era-elden      .era-dot    { background: #60c8f0; }

.era-gods       .era-header { background: linear-gradient(to right, rgba(138, 106, 42, 0.18), transparent); }
.era-gods       .era-name   { color: #f0c040; }
.era-gods       .era-dot    { background: #f0c040; }

.era-crimson    .era-header { background: linear-gradient(to right, rgba(138, 26, 26, 0.25), transparent); }
.era-crimson    .era-name   { color: #f87171; }
.era-crimson    .era-dot    { background: #f87171; }

.era-lost       .era-header { background: linear-gradient(to right, rgba(74, 74, 106, 0.18), transparent); }
.era-lost       .era-name   { color: #a0a0c8; }
.era-lost       .era-dot    { background: #a0a0c8; }

.era-golden     .era-header { background: linear-gradient(to right, rgba(138, 122, 26, 0.2), transparent); }
.era-golden     .era-name   { color: #f0d060; }
.era-golden     .era-dot    { background: #f0d060; }

.era-dark       .era-header { background: linear-gradient(to right, rgba(74, 26, 26, 0.25), transparent); }
.era-dark       .era-name   { color: #e07060; }
.era-dark       .era-dot    { background: #e07060; }

.era-adventurer .era-header { background: linear-gradient(to right, rgba(26, 90, 58, 0.2), transparent); }
.era-adventurer .era-name   { color: #34d399; }
.era-adventurer .era-dot    { background: #34d399; }

/* ── THREE-TIER KNOWLEDGE: POPULAR BELIEF (amber) ─────────── */

.legend-era {
  margin-top: 14px;
  border-top: 1px solid rgba(170, 120, 20, 0.2);
  padding-top: 10px;
}
.legend-era-toggle {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(220, 170, 60, 0.95);
  background: rgba(110, 80, 10, 0.07);
  border: 1px solid rgba(160, 110, 20, 0.22);
  border-radius: 2px;
  padding: 6px 12px;
  cursor: pointer;
  width: 100%;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.legend-era-toggle:hover {
  color: rgba(200, 150, 30, 0.95);
  border-color: rgba(180, 130, 20, 0.45);
  background: rgba(110, 80, 10, 0.14);
}
.legend-era-content {
  display: none;
  margin-top: 10px;
  background: rgba(90, 65, 8, 0.1);
  border: 1px solid rgba(160, 110, 20, 0.22);
  border-left: 3px solid rgba(180, 130, 20, 0.5);
  border-radius: 0 3px 3px 0;
  padding: 10px 14px;
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--text);
  animation: fadeUp 0.2s ease;
}
.legend-era-content.revealed { display: block; }
.legend-era-label {
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(225, 175, 70, 0.95);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(160, 110, 20, 0.18);
}

/* ── THREE-TIER KNOWLEDGE: GM SECRET (red) ────────────────── */

.secret-era {
  margin-top: 14px;
  border-top: 1px solid rgba(160, 40, 40, 0.2);
  padding-top: 10px;
}
.secret-era-toggle {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(225, 115, 115, 0.95);
  background: rgba(120, 20, 20, 0.06);
  border: 1px solid rgba(160, 40, 40, 0.2);
  border-radius: 2px;
  padding: 6px 12px;
  cursor: pointer;
  width: 100%;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.secret-era-toggle:hover {
  color: rgba(210, 80, 80, 0.95);
  border-color: rgba(180, 50, 50, 0.4);
  background: rgba(120, 20, 20, 0.12);
}
.secret-era-content {
  display: none;
  margin-top: 10px;
  background: rgba(100, 15, 15, 0.1);
  border: 1px solid rgba(160, 40, 40, 0.2);
  border-left: 3px solid rgba(180, 50, 50, 0.5);
  border-radius: 0 3px 3px 0;
  padding: 10px 14px;
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--text);
  animation: fadeUp 0.2s ease;
}
.secret-era-content.revealed { display: block; }
.secret-era-label {
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(230, 125, 125, 0.95);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(160, 40, 40, 0.15);
}

/* ── Reveal scaffolding for cards inside GM-Secret boxes ────────────
   Multi-secret pattern (Storveldi + Thousand Kingdom + future pages):
   themed cards, reveal pills, and codas inside .secret-era-content.
   See CLAUDE.md: "Theme secret boxes with the page's full visual
   vocabulary." Used by any page that places multiple thematic ⚿ GM
   Secret boxes after open-prose sections.
   ──────────────────────────────────────────────────────────────── */

.secret-era-content .accent-card { --card-bg: rgba(46,14,18,0.55); border-color: rgba(180,80,80,0.30); }
.secret-reveal {
  font-style: italic;
  font-size: 0.98rem;
  color: #f0c8a8;
  margin: 0 0 14px 0;
  padding: 6px 0 6px 14px;
  border-left: 2px solid rgba(180,80,80,0.55);
}
.secret-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px 0; }
.secret-pill {
  font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 10px;
  background: rgba(140,50,50,0.20); border: 1px solid rgba(200,100,100,0.42);
  color: #f0c8b0;
}
.secret-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 14px 0; }
.secret-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0; }
.secret-card { padding: 12px 14px; }
.secret-card-label {
  font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #d48a8a; margin-bottom: 4px;
}
.secret-card-title {
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 1rem;
  color: var(--gold-bright); margin-bottom: 8px; letter-spacing: 0.04em;
}
.secret-card-body { font-size: 0.88rem; line-height: 1.55; color: var(--text); }
.secret-coda { font-size: 0.88rem; color: var(--parch-dim); font-style: italic; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(180,80,80,0.30); }

/* ── SCALE ROW (magic schools, city sizes) ─────────────────── */

.scale-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px auto;
  max-width: 760px;
}
.scale-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(200, 144, 10, 0.1);
  border-radius: 3px;
  padding: 14px 16px;
}
.scale-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.scale-content { flex: 1; }
.scale-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.scale-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
}

/* ── INFO CARD GRID (Faith section) ────────────────────────── */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
}
.info-card {
  background: rgba(20, 16, 8, 0.4);
  border: 1px solid rgba(200, 144, 10, 0.15);
  border-radius: 3px;
  padding: 16px 18px;
}
.info-card-title {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--gold-bright);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.info-card-body {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--text);
}

/* ── EXPANDABLE FACTION CARDS ──────────────────────────────── */

.faction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
}
.faction-card-x {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(200, 144, 10, 0.12);
  border-radius: 4px;
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
}
.faction-card-x::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent, var(--gold));
  opacity: 0.7;
}
.faction-card-x:hover {
  border-color: rgba(200, 144, 10, 0.35);
  background: rgba(255, 255, 255, 0.035);
}
.faction-card-x.open { border-color: rgba(200, 144, 10, 0.4); }
.faction-card-x-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--accent, var(--gold-bright));
  margin: 4px 0 4px;
}
.faction-card-x-type {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.faction-card-x-summary {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text);
  font-style: italic;
}
.faction-card-x-detail {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(200, 144, 10, 0.15);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text);
  animation: fadeUp 0.2s ease;
}
.faction-card-x.open .faction-card-x-detail { display: block; }

/* ── ACCENT CARD ─────────────────────────────────────────────
   Shared shell for the many "panel with an accent edge" cards
   used across the site (domain cards, hazard cards, tier cards,
   isle cards, branch cards, position blocks, etc.).

   The base gives the SHAPE: background, border edge, radius.
   Pages provide the SIZE: padding, margin, max-width: those
   are inherent to the card's role (grid item vs centred
   callout vs sub-card) and stay inline per page.

   Customise per card by setting two CSS variables: usually
   inline or via a tiny per-class rule:
     --card-bg      background colour (defaults to warm dark)
     --card-accent  stripe / border colour (falls through to --domain-accent)

   Modifier classes:
     .framed     full 1px border instead of left stripe
     .is-link    clickable card with hover lift
     .thin       3px stripe instead of 4px (compact sub-cards) */

.accent-card {
  background: var(--card-bg, rgba(28,20,10,0.55));
  border-left: 4px solid var(--card-accent, var(--domain-accent, var(--gold)));
  border-radius: 4px;
}
.accent-card.thin {
  border-left-width: 3px;
}
.accent-card.framed {
  border: 1px solid var(--card-accent, var(--domain-accent, var(--gold)));
  border-left-width: 1px;
}
/* Anchor-reset for any accent-card rendered as <a>. Saves repeating
   style="display:block; text-decoration:none; color:inherit" inline. */
a.accent-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.accent-card.is-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.accent-card.is-link:hover {
  transform: translateY(-2px);
}
/* outlined: adds a subtle 1px frame on top/right/bottom while keeping
   the base's thick left stripe. Set --card-outline for the frame colour. */
.accent-card.outlined {
  border-top: 1px solid var(--card-outline, rgba(200,168,75,0.2));
  border-right: 1px solid var(--card-outline, rgba(200,168,75,0.2));
  border-bottom: 1px solid var(--card-outline, rgba(200,168,75,0.2));
}
/* cut-left: sharp left corners, rounded right. Pairs naturally with the
   left-stripe look: the stripe runs cleanly off the card's edges. */
.accent-card.cut-left {
  border-radius: 0 4px 4px 0;
}

/* ── CARD GRID + LABEL (shared) ──────────────────────────────
   The site's single most-repeated structure: a responsive auto-fit
   grid of .accent-card items, each headed by an uppercase Cinzel
   label over body prose. Dozens of pages previously re-declared this
   as .gov-grid / .tier-grid / .peoples-grid / .craft-grid (etc.) plus
   matching -name and -card-p clones; this is the one shared source.

     <div class="card-grid">
       <div class="accent-card">
         <div class="card-name">Label</div>
         <p>Body prose.</p>
       </div>
     </div>

   The grid wrapper, the label, and the body <p> are all handled here.
   Tune per page by setting CSS vars on .card-grid (inline, or via a
   tiny per-page rule):
     --col-min   min column width before wrap   (default 230px)
     --grid-gap  gap between cards               (default 14px)
     --grid-max  max grid width                  (default 1000px)
     --card-pad  padding on each grid card       (default 14px 16px)
   On a card, set --card-accent to recolour its .card-name (falls
   through to --gold-bright). Cards that need extra sub-labels
   (a number row, a sub-heading) keep those as their own page class;
   only the grid / name / body trio collapses to the shared utility. */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 230px), 1fr));
  gap: var(--grid-gap, 14px);
  max-width: var(--grid-max, 1000px);
  margin: 18px auto;
}
.card-grid > .accent-card { padding: var(--card-pad, 14px 16px); }
.card-grid p { font-size: 0.92rem; line-height: 1.55; margin: 0; }
.card-name {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: var(--card-accent, var(--gold-bright));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--card-name-size, 0.95rem);
  margin-bottom: 6px;
}

/* ── TWO-COLUMN PAIR ─────────────────────────────────────────
   Side-by-side block layout used for opposing-positions
   sections (bloodline pair, faith-vs-forseti tension,
   mining-and-fall narrative pair, etc.). Collapses to a
   single column on tablet-and-down. Children carry their
   own block styling. */

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 22px auto;
  max-width: 1000px;
}
@media (max-width: 800px) {
  .two-column { grid-template-columns: 1fr; }
}

/* ── "OPEN IN CANON" PANEL ───────────────────────────────────
   Dashed-border panel listing the deliberate TBDs / open
   questions on a page. The heading colour and border edge
   pick up the page's --domain-accent so the panel sits inside
   the page's accent palette without extra inline overrides. */

.open-canon {
  background: rgba(20,14,8,0.45);
  border: 1px dashed var(--domain-accent);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 24px auto;
  max-width: 920px;
}
.open-canon h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  /* Fixed gold (6.9:1 on --bg) so the heading stays AA-readable even on
     pages whose --domain-accent is intentionally moody/dark. The dashed
     border above still carries the domain accent for visual flavour. */
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 6px;
}
.open-canon .sub {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--parch-dim);
  margin-bottom: 12px;
}
.open-canon ul,
.open-canon ol {
  margin: 8px 0 0 0;
  padding-left: 20px;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--text);
}
.open-canon li { margin: 4px 0; }
.open-canon li b { color: var(--gold-bright); }

/* ── "CONTINUE READING" PANEL ────────────────────────────────
   Foot-of-page related-links panel. Sibling to .open-canon: a solid
   accent stripe (vs open-canon's dashed border) marks "where to go
   next" as distinct from "what's still unwritten". Each <li> is a
   Title-arrow link (` →` in the bold title, per card-conventions) plus
   a one-line gloss of why the page is thematically close. Defined in
   both style-a.css and style-b.css so the panel renders in either mode. */

.see-also {
  background: rgba(20,16,8,0.4);
  border: 1px solid rgba(200,144,10,0.18);
  border-left: 4px solid var(--domain-accent);
  border-radius: 4px;
  padding: 18px 24px;
  margin: 24px auto;
  max-width: 920px;
}
.see-also h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.see-also ul { list-style: none; margin: 0; padding: 0; }
.see-also li {
  margin: 7px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}
.see-also li a { color: var(--gold); }
.see-also li a:hover { color: var(--gold-bright); }
.see-also li a b { color: var(--gold-bright); }

/* ── FEATURE PANEL ───────────────────────────────────────────
   Narrow centred wrapper for an inline "feature" block that sits
   in the prose flow at reading width. (Previously re-declared
   inline, identically, on ~14 pages.) */
.feature-panel { max-width: 880px; margin: 18px auto; }

/* ── PRINCIPLE CALLOUT ───────────────────────────────────────
   Left-bordered callout stating a polity's governing principle.
   The left stripe carries the page's --domain-accent; the tint is
   set per page via --call-bg (defaults to neutral dark). Markup:
   <div class="principle-call"><div class="p-label">…</div><p>…</p></div> */
.principle-call {
  max-width: 780px;
  margin: 24px auto;
  padding: 22px 28px;
  background: var(--call-bg, rgba(20,16,8,0.45));
  border-left: 3px solid var(--domain-accent);
  border-radius: 0 4px 4px 0;
}
.principle-call .p-label { font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--domain-accent); margin-bottom: 10px; }
.principle-call p { margin: 0 0 12px; line-height: 1.6; }
.principle-call p:last-child { margin-bottom: 0; }

/* ── PILL ROW (used on domain "Character" rows) ────────────── */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0;
}
.pill {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(200, 144, 10, 0.2);
  color: var(--parch);
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .container { padding: 56px 16px 56px; }
  .facts { grid-template-columns: 1fr; gap: 4px 0; }
  .facts dt { padding-top: 8px; }
  .era-date { display: none; }
  .page-subtitle { letter-spacing: 0.18em; }
  .page-god-line { font-size: 1rem; }
}

/* ── WIP BANNER ──────────────────────────────────────────────
   Drop <div class="wip-banner">✎ Writing in Progress</div>
   anywhere in <body> to flag a page that's mid-edit. Floats in
   the top-right corner, ignores clicks, gently pulses. Remove
   the element when the page is ready. */

.wip-banner {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 195;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright, #f0b020);
  background: rgba(60, 36, 12, 0.78);
  border: 1px dashed rgba(240, 180, 90, 0.55);
  border-radius: 2px;
  padding: 7px 14px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  animation: wipPulse 2.5s ease-in-out infinite;
}
@keyframes wipPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
@media (max-width: 600px) {
  .wip-banner { font-size: 0.5rem; letter-spacing: 0.22em; padding: 5px 10px; top: 8px; right: 8px; }
}