@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --sidebar-w:     220px;
  --hero-w:        500px;

  --sidebar-bg:    #080810;
  --content-bg:    #f5f6f7;
  --topbar-bg:     #ffffff;

  --border:        #d0d5dc;

  --accent:        #0074e9;
  --accent-light:  #459fff;
  --accent-dim:    rgba(179, 179, 179, 0.07);

  --text-primary:  #1f2937;
    --text-primary2:  #99acc5;
  --text-secondary:#6b7280;
  --text-titre:#c2c4c9;
  --text-dim:      #fafafa;
  --text-dawg:      #fafafa;
  --text-dawg2:      #c4c4c4;

  --ease:          0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: roboto;
  background: var(--content-bg);
  color: var(--text-primary);
  display: flex;
  line-height: 1.6;
}

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar            { width: 4px; height: 4px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: var(--text-dim); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover{ background: var(--text-secondary); }


/* ═══════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
  transition: background-color 0.45s ease;
}

/* Logo */
.sidebar-brand {
  padding: 26px 20px 22px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-brand svg {
  display: block;
  margin: 0 auto 10px;
}

.brand-title {
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-titre);
}

.brand-sub {
  font-size: 10px;
  font-style: italic;
  font-family:playfair display;
  color: var(--text-dim);
  margin-top: 3px;
  letter-spacing: 1.5px;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0 20px;
}

.cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dawg);
  transition: color var(--ease), background var(--ease);
}

.cat-header:hover {
  color: var(--text-primary2);
  background: rgba(255,255,255,0.025);
}

.cat-header.is-active {
  color: var(--accent);
}

.cat-arrow {
  font-size: 7px;
  opacity: 0.5;
  transition: transform var(--ease), opacity var(--ease);
  line-height: 1;
}

.cat-header.is-open .cat-arrow {
  transform: rotate(90deg);
  opacity: 1;
}

/* Subtopic list accordion */
.sub-list {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.sub-list.is-open {
  max-height: 600px;
}

.sub-item {
  display: block;
  padding: 7px 18px 7px 30px;
  font-size: 12.5px;
  color: var(--text-dawg2);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}

.sub-item:hover {
  color: var(--text-primary2);
  background: rgba(255,255,255,0.025);
}

.sub-item.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-dim);
}

/* ── Per-category active colours ──────────────────────── */
.cat-item[data-cat="world"] .cat-header.is-active,
.cat-item[data-cat="world"] .sub-item.is-active {
  color: #313fa0;
}
.cat-item[data-cat="world"] .sub-item.is-active {
  border-left-color: #313fa0;
  background: rgba(49, 63, 160, 0.12);
}

.cat-item[data-cat="biz"] .cat-header.is-active,
.cat-item[data-cat="biz"] .sub-item.is-active {
  color: #b53b70;
}
.cat-item[data-cat="biz"] .sub-item.is-active {
  border-left-color: #b53b70;
  background: rgba(181, 59, 112, 0.12);
}

.cat-item[data-cat="history"] .cat-header.is-active,
.cat-item[data-cat="history"] .sub-item.is-active {
  color: #dc393f;
}
.cat-item[data-cat="history"] .sub-item.is-active {
  border-left-color: #dc393f;
  background: rgba(220, 57, 63, 0.12);
}

.cat-item[data-cat="bestiary"] .cat-header.is-active,
.cat-item[data-cat="bestiary"] .sub-item.is-active {
  color: #ffffff;
}
.cat-item[data-cat="bestiary"] .sub-item.is-active {
  border-left-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.cat-item[data-cat="character"] .cat-header.is-active,
.cat-item[data-cat="character"] .sub-item.is-active {
  color: #87ceeb;
}
.cat-item[data-cat="character"] .sub-item.is-active {
  border-left-color: #87ceeb;
  background: rgba(135, 206, 235, 0.12);
}


/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.hero {
  width: var(--hero-w);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--border);
}

/* Background image layer */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('images/give.png');
  background-size:cover;
  background-position:center;
 background-repeat:no-repeat;
  transition: opacity 0.45s ease;
}

.hero-bg.is-fading {
  opacity: 0;
}

/* Uniform dark overlay for centered text readability */
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Text content — vertically centered */
.hero-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 0 32px;
  text-align: center;
}

.hero-title {
  font-size: 50px;
  font-weight: 300;
  font-family:playfair display;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 14px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.9);
  letter-spacing: 1px;
  transition: opacity 0.35s ease;
}

/* Subtitle flanked by horizontal rules */
.hero-subtitle {
  display: flex;
  font-family:pt serif;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  color: #fff;
  letter-spacing: 0.8px;
  margin-bottom: 22px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  transition: opacity 0.35s ease;
}

.hero-subtitle::before,
.hero-subtitle::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.5);
}

/* Blurb with bottom fade mask */
.hero-blurb-wrap {
  position: relative;
}

/* Opening quotation mark */
.hero-blurb-wrap::before {
  content: '\201C';
  display: block;
  font-size: 102px;
  line-height: 0.8;
  text-align: center;
  color: rgba(255,255,255,1);
  margin-bottom: -10px;
  font-family: playfair display;
  letter-spacing: -2px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}

.hero-blurb {
  font-size: 14px;
  letter-spacing:0.5px;
  font-family:pt serif;
  color: #fff;
  line-height: 1.7;
  max-height: 100px;
  overflow: hidden;
  text-align: center;
  font-style: italic;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  transition: opacity 0.35s ease;
}


/* ═══════════════════════════════════════════════════════
   MAIN PANEL
═══════════════════════════════════════════════════════ */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Horizontal subtopic tabs */
.topbar {
  flex-shrink: 0;
  height: 50px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  padding: 0 24px;
  gap: 0;
}

.topbar-tab {
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  margin-bottom: -1px;
  transition: color var(--ease), border-color var(--ease);
  user-select: none;
}

.topbar-tab:hover {
  color: var(--text-primary);
}

.topbar-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.topbar[data-cat="world"]     .topbar-tab.is-active { color: #313fa0; border-bottom-color: #313fa0; }
.topbar[data-cat="biz"]       .topbar-tab.is-active { color: #b53b70; border-bottom-color: #b53b70; }
.topbar[data-cat="history"]   .topbar-tab.is-active { color: #dc393f; border-bottom-color: #dc393f; }
.topbar[data-cat="bestiary"]  .topbar-tab.is-active { color: #ffffff; border-bottom-color: #ffffff; }
.topbar[data-cat="character"] .topbar-tab.is-active { color: #87ceeb; border-bottom-color: #87ceeb; }

/* Scrollable content */
.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 44px 52px 60px;
}

.content-area.is-front-page {
  padding: 0;
}

/* Empty / welcome state — front page */
.empty-state {
  display: block;
}

/* ── Front Page ───────────────────────────────────────── */
.fp-wrap {
  padding: 28px 36px 60px;
  font-family: roboto;
}

/* Masthead */
.fp-masthead {
  text-align: center;
  border: 1px solid var(--border);
  background: #fafafa;
  padding: 22px 32px 20px;
  margin-bottom: 24px;
}

.fp-masthead-title {
  font-family: playfair display;
  font-size: 26px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0 0 6px;
}

.fp-masthead-sub {
  font-family: pt serif;
  font-style: italic;
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 10px;
}

.fp-masthead-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

/* Grid */
.fp-grid {
  display: grid;
  grid-template-columns: 2fr 1.7fr 1fr;
  border-top: 2px solid var(--text-primary);
}

.fp-col-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 14px;
}

/* Preamble column */
.fp-preamble-col {
  padding: 20px 28px 20px 0;
  border-right: 1px solid var(--border);
}

.fp-preamble-title {
  font-family: playfair display;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 12px;
}

.fp-preamble-col > p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.fp-contents-box {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 14px 16px;
  margin-top: 18px;
  background: rgba(0,89,179,0.03);
}

.fp-contents-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.fp-contents-list {
  padding: 0 0 0 18px;
  margin: 0;
  font-size: 13px;
  line-height: 2;
  color: var(--text-primary);
}

/* News column */
.fp-news-col {
  padding: 20px 24px;
  border-right: 1px solid var(--border);
}

.fp-news-kicker {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.fp-news-headline {
  font-family: playfair display;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 8px;
}

.fp-news-body {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.fp-news-divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

/* Aside column */
.fp-aside-col {
  padding: 20px 0 20px 20px;
}

.fp-aside-box {
  margin-bottom: 22px;
}

.fp-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font-size: 12px;
  line-height: 1.65;
}

.fp-facts dt {
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

.fp-facts dd {
  color: var(--text-primary);
  margin: 0;
}

.fp-dyk {
  padding: 0 0 0 16px;
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.fp-dyk li { margin-bottom: 8px; }

/* Ad boxes */
.fp-ad-box {
  border: 1px solid var(--border);
  margin-bottom: 20px;
  overflow: hidden;
}

.fp-ad-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  padding: 4px;
  background: #efefef;
  border-bottom: 1px solid var(--border);
}

.fp-ad-body {
  padding: 14px;
  background: #fafafa;
}

.fp-ad-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.fp-ad-body p {
  font-size: 11px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.fp-ad-cta {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}

/* Content heading */
.content-heading {
  font-size: 36px;
  font-weight:400;
  font-family:playfair display;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.38s ease, transform 0.38s ease;
}

.content-heading.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Content body */
.content-body {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.38s ease 0.07s, transform 0.38s ease 0.07s;
}

.content-body.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.content-body p {
  margin-bottom: 20px;
}

.content-body p:last-child {
  margin-bottom: 0;
}

.article-img {
  float: right;
  clear: right;
  margin: 0 0 16px 24px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  padding: 6px 6px 8px;
  max-width: 340px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.article-img img {
  display: block;
  width: 100%;
}
.article-img figcaption {
  margin-top: 6px;
  font-style: italic;
  text-align: center;
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  :root {
    --hero-w:    280px;
    --sidebar-w: 190px;
  }
}

@media (max-width: 720px) {
  .hero { display: none; }
  :root { --sidebar-w: 170px; }
}

@media (max-width: 500px) {
  .hero { display: none; }
  :root { --sidebar-w: 150px; }
  .content-area { padding: 28px 22px 40px; }
}

.infog2 {
  background:rgb(204, 204, 204, 0.5);
  border:1px solid rgb(204, 204, 204);
  border-radius:5px;
  padding:20px;
}

.infog {
  background:rgba(178, 220, 255, 0.5);
  border:1px solid rgb(178, 220, 255);
  border-radius:5px;
  padding:20px;
}

blockquote { 
  padding-left:20px;
}

ul {
  padding:20px;
}

h4 {
  font-size:25px;
margin-top:-10px;
}

.titre {
 background:rgb(156, 199, 255); 
padding:5px;
}

.titre2 {
 background:rgb(255, 196, 156); 
padding:5px;
}

.titre3 {
 background:rgb(255, 156, 156); 
padding:5px;
}

.infoid{
  background:rgba(255, 255, 255, 0.9);
  border:1px solid rgb(255, 255, 255);
  padding:20px;margin-bottom:5px;
}

.infoid b {
  background:rgb(0, 0, 0);
  color:white;
  padding:3px;
}

.infoego {
  background:rgba(0, 0, 0, 0.9);
  border:1px solid rgb(0, 0, 0);
  color:white;
  padding:20px;margin-bottom:5px;
}

.infoego b {
  background:rgb(255, 255, 255);
  color:black;
  padding:3px;
}


.infocrown{
  background:rgb(255, 255, 186, 0.5);
  border:1px solid rgb(230, 230, 134);
  padding:20px;margin-bottom:5px;
}

.infocrown b {
  background:rgb(230, 230, 134);
  padding:3px;
}

.infodress {
  background:rgb(186, 225, 255, 0.5);
  border:1px solid rgb(160, 201, 233);
  padding:20px;margin-bottom:5px;
}

.infodress b {
  background:rgb(160, 201, 233);
  padding:3px;
}

.infostick {
  background:rgb(186, 255, 201, 0.5);
  border:1px solid rgb(124, 218, 144);
  padding:20px;margin-bottom:5px;
}

.infostick b {
  background:rgb(124, 218, 144);
  padding:3px;
}

.infodsr {
  background:rgba(156, 199, 255, 0.502);
  border:1px solid rgb(156, 199, 255);
  padding:20px;margin-bottom:5px;
}

.infocpl {
  background:rgba(255, 196, 156, 0.502);
  border:1px solid rgb(255, 196, 156);
  padding:20px;margin-bottom:5px;
}

.infoemo {
  background:rgba(255, 156, 156, 0.502);
  border:1px solid rgb(255, 156, 156);
  padding:20px;margin-bottom:5px;
}

.infowl {
  background:rgba(255, 185, 33, 1);
  border:1px solid rgb(0, 0, 0);
  padding:20px;
}

.infotc {
  background:rgb(33, 255, 81, 0.5);
  border:1px solid rgb(105, 179, 121);
  padding:20px;
}

.infomn {
  background:rgba(173, 173, 173, 0.5);
  border:1px solid rgb(173, 173, 173);
  padding:20px;
}

.infor {
  background:#ff4d89;
  color:white;
  padding:20px;
  text-align:left;
  display:inline-block;margin-bottom:5px;
}

.infob {
  background:#4D89FF;
    color:white;
  padding:20px;
  text-align:left;
margin-bottom:5px;
}

.infogr {
  background:#3CC35F;
    color:white;
  padding:20px;
  text-align:left;
margin-bottom:5px;
}

.infogry {
  background:#666666;
  color:white;
  padding:20px;
  text-align:left;
margin-bottom:5px;
}

.infow {
  background:rgba(255, 255, 255, 1);
  padding:20px;
  text-align:left;
margin-bottom:5px;
}

.infobr {
  background:#FF6A4D;
  color:white;
  padding:20px;
  text-align:left;
margin-bottom:5px;
}

.infov {
  background:#6A4DFF;
  color:white;
  padding:20px;
  text-align:left;
margin-bottom:5px;
}


.infobl {
  background:#000000;
  color:white;
  padding:20px;
  text-align:left;
margin-bottom:5px;
}

h3 {
  border-bottom:1px solid #000;
  padding-bottom:5px;
  font-size:23px;
  font-family:roboto;font-weight:900;
  margin-bottom: 10px;
}

.infog2 h3, .infog h3, .infoid h3, .infoego h3, .infocrown h3, .infodress h3,
.infostick h3, .infodsr h3, .infocpl h3, .infoemo h3, .infowl h3, .infotc h3,
.infomn h3, .infor h3, .infob h3, .infogr h3, .infogry h3, .infow h3,
.infobr h3, .infov h3, .infobl h3 {
  font-family: roboto;
  font-weight: bold;
}
.infog2    h3 { border-bottom-color: rgb(204, 204, 204); }
.infog     h3 { border-bottom-color: rgb(178, 220, 255); }
.infoid    h3 { border-bottom-color: rgb(255, 255, 255); }
.infoego   h3 { border-bottom-color: rgb(0, 0, 0); }
.infocrown h3 { border-bottom-color: rgb(230, 230, 134); }
.infodress h3 { border-bottom-color: rgb(160, 201, 233); }
.infostick h3 { border-bottom-color: rgb(124, 218, 144); }
.infodsr   h3 { border-bottom-color: rgb(156, 199, 255); }
.infocpl   h3 { border-bottom-color: rgb(255, 196, 156); }
.infoemo   h3 { border-bottom-color: rgb(255, 156, 156); }
.infowl    h3 { border-bottom-color: rgb(0, 0, 0); }
.infotc    h3 { border-bottom-color: rgb(105, 179, 121); }
.infomn    h3 { border-bottom-color: rgb(173, 173, 173); }
.infor   h3 { border-bottom-color: white; }
.infob   h3 { border-bottom-color: white; }
.infogr  h3 { border-bottom-color: white; }
.infogry h3 { border-bottom-color: white; }
.infow   h3 { border-bottom-color: black; }
.infobr  h3 { border-bottom-color: white; }
.infov   h3 { border-bottom-color: white; }
.infobl  h3 { border-bottom-color: white; }