/* tc-factions.css — page-specific styles for factions.html and faction-comparison.html.
   Page chrome (dark backdrop, parchment sheet, masthead, footer) lives in tc-shared.css. */

/* ---- Sections ---- */
section { margin-top: 42px; }
h2 {
  font-family: 'Cinzel', serif; font-weight: 900;
  font-size: 25px; letter-spacing: .04em;
  color: var(--ink);
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
h2 .num {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: var(--paper); background: var(--blood);
  font-size: 15px; width: 34px; height: 34px; flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; align-self: center;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);
}
h3 {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 18px; letter-spacing: .03em; color: var(--blood);
  margin: 22px 0 6px; text-transform: uppercase;
}
p { margin: 0 0 12px; }
strong { color: var(--char); }
.lead { font-size: 19px; }

ul, ol { margin: 0 0 12px; padding-left: 1.3em; }
li { margin-bottom: 7px; }

/* ---- Alignment badge ---- */
.align {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 12px 2px; border-radius: 2px; align-self: center;
}
.align.faithful { background: var(--gold); color: #fff; }
.align.fallen { background: var(--blood); color: #fff; }

/* ---- Lore quote ---- */
blockquote.lore {
  margin: 16px 0 18px; padding: 14px 22px;
  border-left: 4px solid var(--blood);
  background: rgba(0,0,0,.05);
  font-style: italic; font-size: 18px; color: var(--char);
}
blockquote.lore footer { font-size: 14px; font-style: normal; color: var(--rust); margin-top: 6px; }

/* ---- Callout / box ---- */
.box {
  background: linear-gradient(180deg, rgba(122,13,18,.06), rgba(0,0,0,.04));
  border: 1px solid var(--line);
  border-left: 5px solid var(--blood);
  padding: 16px 20px; margin: 18px 0;
}
.box h4 {
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: 13px; color: var(--blood);
  margin: 0 0 8px;
}
.box ul { margin-bottom: 0; }
.box.weak { border-left-color: var(--rust); }
.box.weak h4 { color: var(--rust); }

/* ---- Strengths / weaknesses side-by-side ---- */
.sw { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.sw .box { margin: 0; }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 16px; }
caption {
  font-family: 'Cinzel', serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: 13px; color: var(--blood); text-align: left;
  padding-bottom: 6px;
}
th, td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
th {
  background: var(--char); color: var(--paper); font-family: 'Cinzel', serif;
  font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
tr:nth-child(even) td { background: rgba(0,0,0,.04); }
td.slot { font-family: 'Cinzel', serif; font-weight: 700; white-space: nowrap; color: var(--blood); font-size: 14px; }

/* ---- Comparison table ---- */
.tablewrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); }
table.compare { min-width: 1080px; margin: 0; }
table.compare th, table.compare td { font-size: 15px; }
table.compare thead th { position: sticky; top: 0; }
table.compare th.rowhead, table.compare td.rowhead {
  position: sticky; left: 0; z-index: 2;
  background: var(--char); color: var(--paper);
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; min-width: 140px;
}
table.compare td { background: var(--paper); min-width: 200px; }
table.compare tr:nth-child(even) td { background: var(--paper-deep); }
table.compare tr:nth-child(even) td.rowhead { background: var(--char); }

/* ---- TOC ---- */
nav.toc {
  background: rgba(0,0,0,.04); border: 1px dashed var(--line);
  padding: 16px 22px; margin: 24px 0 0; columns: 2; column-gap: 32px;
}
nav.toc a {
  color: var(--ink); text-decoration: none; font-size: 15px;
  display: block; padding: 3px 0; border-bottom: 1px dotted transparent;
}
nav.toc a:hover { border-bottom-color: var(--blood); color: var(--blood); }
nav.toc .tnum { font-family: 'Cinzel', serif; font-weight: 700; color: var(--blood); display: inline-block; width: 2.1em; }

.tag { font-family: 'Cinzel', serif; font-weight: 700; color: var(--blood); letter-spacing: .05em; font-size: .85em; }

@media (max-width: 680px) {
  .sw { grid-template-columns: 1fr; }
  nav.toc { columns: 1; }
  table { font-size: 14px; }
}
@media print {
  section { break-inside: avoid; }
  .box, table { break-inside: avoid; }
  .tablewrap { overflow-x: visible; border: none; }
  table.compare { min-width: 0; }
}