@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Crimson+Pro:ital,wght@0,300;0,400;1,300&display=swap&font-display=swap');
:root{--bg-deep:var(--cx-bg);--bg-surface:var(--cx-bg-2);--bg-card:var(--cx-surface-2);--bg-card-hover:var(--cx-surface-3);--border:var(--cx-border);--border-glow:var(--cx-border-strong);--gold:var(--cx-accent-deep);--gold-bright:var(--cx-accent);--gold-dim:var(--cx-accent-dim);--red:var(--cx-danger-deep);--red-bright:var(--cx-danger);--text-primary:var(--cx-text);--text-secondary:var(--cx-text-soft);--text-dim:var(--cx-text-faint);--divine:#7090c8;--ancient:var(--cx-success);}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg-deep);color:var(--text-primary);font-family:'EB Garamond',Georgia,serif;font-size:17px;line-height:1.7;min-height:100vh;}

#sidebar{width:100%;height:58px;display:flex;flex-direction:row;align-items:stretch;position:fixed;top:0;left:0;right:0;background:color-mix(in srgb,var(--cx-bg) 96%,transparent);border-bottom:1px solid color-mix(in srgb,var(--cx-text-strong) 8%,transparent);box-shadow:0 4px 24px rgba(0,0,0,.5);padding:0;z-index:200;overflow:hidden;}
#sidebar-header{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 16px 0 14px;border-right:1px solid color-mix(in srgb,var(--cx-text-strong) 10%,transparent);}
#sidebar-header .world-name{display:none;}
#sidebar-header .campaign-title{font-family:'Cinzel',serif;font-size:14px;color:var(--cx-text-strong);letter-spacing:.1em;white-space:nowrap;}
#sidebar-header .campaign-subtitle{display:none;}
.brand-home{display:inline-flex;align-items:center;cursor:pointer;transition:opacity .15s ease;-webkit-tap-highlight-color:transparent;}
.brand-home:hover .campaign-title{color:var(--cx-accent-bright);text-shadow:0 0 10px color-mix(in srgb,var(--cx-accent-bright) 40%,transparent);}
.brand-home:active{opacity:.78;}
.brand-home:focus-visible{outline:2px solid color-mix(in srgb,var(--cx-accent) 60%,transparent);outline-offset:3px;border-radius:6px;}
#sidebar-header:before{content:"✥";font-size:18px;color:var(--cx-accent);flex-shrink:0;}
#nav-groups{display:flex;flex-direction:row;align-items:stretch;flex:1;overflow:hidden;}
.nav-section{position:static;flex-shrink:0;}
.nav-section-label{display:flex;align-items:center;gap:5px;height:58px;padding:0 14px;font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:.07em;color:color-mix(in srgb,var(--cx-text-strong) 72%,transparent);text-transform:uppercase;cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;transition:color .15s,border-color .15s;user-select:none;}
.nav-section-label::after{content:"▾";font-size:9px;margin-left:3px;opacity:.55;}
.nav-section:hover>.nav-section-label,.nav-section.open>.nav-section-label{color:var(--cx-accent);border-bottom-color:var(--cx-accent);}
.nav-section>.nav-dropdown{display:none;position:fixed;top:58px;min-width:210px;background:color-mix(in srgb,var(--cx-bg) 98%,transparent);border:1px solid color-mix(in srgb,var(--cx-accent-deep) 30%,transparent);border-top:2px solid var(--cx-accent);box-shadow:0 16px 48px rgba(0,0,0,.7);z-index:500;padding:6px 0;}
.nav-section:hover>.nav-dropdown,.nav-section.open>.nav-dropdown{display:block;}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 18px;color:color-mix(in srgb,var(--cx-text-strong) 75%,transparent);font-family:'EB Garamond',serif;font-size:15px;cursor:pointer;white-space:nowrap;transition:color .12s,background .12s;}
.nav-item:hover{color:var(--cx-accent);background:color-mix(in srgb,var(--cx-accent-deep) 10%,transparent);}
.nav-item.active{color:var(--cx-accent);background:color-mix(in srgb,var(--cx-accent-deep) 13%,transparent);padding-left:14px;border-left:2px solid var(--cx-accent);}
.nav-item .icon{font-size:14px;width:20px;text-align:center;flex-shrink:0;}
#main{margin-left:0;padding-top:58px;}







.page-header{margin-bottom:48px;padding-bottom:24px;border-bottom:1px solid var(--border);}
.page-eyebrow{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:10px;}
.page-title{font-family:'Cinzel',serif;font-size:36px;font-weight:900;color:var(--text-primary);line-height:1.1;margin-bottom:14px;}
.page-description{font-family:'Crimson Pro',serif;font-style:italic;font-size:18px;color:var(--text-secondary);max-width:680px;line-height:1.6;}
.section{margin-bottom:48px;}
.section-title{font-family:'Cinzel',serif;font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.card{background:var(--bg-card);border:1px solid var(--border);padding:20px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;}
.card:hover{background:var(--bg-card-hover);border-color:var(--border-glow);}
.card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--gold-dim);opacity:0;transition:opacity .2s;}
.card:hover::before{opacity:1;}
.card-tag{font-family:'Cinzel',serif;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;}
.card-title{font-family:'Cinzel',serif;font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:8px;line-height:1.3;}
.card-body{font-size:14px;color:var(--text-secondary);line-height:1.6;}
.card-meta{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:flex;gap:12px;flex-wrap:wrap;}
.pill{font-family:'Cinzel',serif;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--border);color:var(--text-secondary);border-radius:2px;}
.pill.gold{border-color:var(--gold-dim);color:var(--gold);}
.pill.red{border-color:var(--red);color:var(--red-bright);}
.pill.blue{border-color:#2a3a5a;color:var(--divine);}
.pill.green{border-color:var(--cx-success-deep);color:var(--ancient);}
.stat-block{background:var(--bg-card);border:1px solid var(--border);padding:24px;margin-bottom:20px;}
.stat-block-header{font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:4px;}
.stat-block-subtitle{font-family:'Crimson Pro',serif;font-style:italic;color:var(--text-secondary);font-size:15px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.stat-row{display:flex;gap:8px;margin-bottom:6px;font-size:15px;}
.stat-label{font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--gold);min-width:140px;padding-top:2px;}
.stat-value{color:var(--text-primary);}
.lore-block{background:var(--bg-card);border-left:3px solid var(--gold-dim);padding:20px 24px;margin:20px 0;font-family:'Crimson Pro',serif;font-style:italic;font-size:17px;color:var(--text-secondary);line-height:1.8;}
.prose{color:var(--text-primary);font-size:16px;line-height:1.8;}
.prose p{margin-bottom:16px;}
.prose h3{font-family:'Cinzel',serif;font-size:14px;font-weight:600;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin:28px 0 12px;}
.prose ul{padding-left:20px;margin-bottom:16px;}
.prose li{margin-bottom:6px;color:var(--text-secondary);}
.prose strong{color:var(--gold-bright);font-weight:600;}
.timeline{position:relative;padding-left:32px;}
.timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--border);}
.timeline-item{position:relative;margin-bottom:32px;}
.timeline-dot{position:absolute;left:-28px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--gold-dim);border:1px solid var(--gold);}
.timeline-dot.current{background:var(--gold);box-shadow:0 0 8px var(--gold);}
.timeline-dot.death{background:var(--red);border-color:var(--red-bright);}
.timeline-label{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:6px;}
.timeline-title{font-family:'Cinzel',serif;font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:8px;}
.timeline-body{font-size:15px;color:var(--text-secondary);line-height:1.7;}
.divider{border:none;border-top:1px solid var(--border);margin:32px 0;}
.nation-card{background:var(--bg-card);border:1px solid var(--border);padding:16px 20px;transition:transform .2s,box-shadow .2s,border-color .2s;margin-bottom:10px;}
.nation-card:hover{border-color:var(--border-glow);background:var(--bg-card-hover);}
.nation-name{font-family:'Cinzel',serif;font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:6px;}
.nation-desc{font-size:13px;color:var(--text-secondary);line-height:1.5;}
.ability{background:var(--bg-card);border:1px solid var(--border);padding:16px 20px;margin-bottom:12px;}
.ability-name{font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:var(--gold);margin-bottom:6px;}
.ability-body{font-size:14px;color:var(--text-secondary);line-height:1.6;}
.img-card{background:var(--bg-card);border:1px solid var(--border);overflow:hidden;margin-bottom:16px;}
.img-card img{width:100%;display:block;opacity:.92;transition:opacity .2s;}
.img-card img:hover{opacity:1;}
.img-card-label{padding:10px 16px;font-family:'Cinzel',serif;font-size:11px;color:var(--text-secondary);letter-spacing:.08em;}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:24px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.map-container{width:100%;border:1px solid var(--border);overflow:hidden;margin-bottom:24px;}
.map-container img{width:100%;display:block;opacity:.9;filter:sepia(20%) brightness(.85);transition:filter .3s;}
.map-container:hover img{filter:sepia(10%) brightness(.95);}
#search-box{width:100%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);padding:8px 12px;font-family:'EB Garamond',serif;font-size:14px;outline:none;margin:12px 0 4px;}
#search-box:focus{border-color:var(--gold-dim);}
#search-box::placeholder{color:var(--text-dim);}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--bg-deep);}
::-webkit-scrollbar-thumb{background:var(--border-glow);border-radius:3px;}
@media(max-width:768px){#content{padding:32px 24px;}}
@media(max-width:700px){.two-col{grid-template-columns:1fr;}}
/* Gallery upload feature */
.gallery-upload{background:var(--bg-card);border:1px dashed var(--gold-dim);padding:24px;margin-bottom:28px;}
.gallery-upload input[type=file],.gallery-upload input[type=text],.gallery-upload textarea{width:100%;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);padding:10px 12px;font-family:'EB Garamond',serif;font-size:15px;margin:8px 0 14px;outline:none;}
.gallery-upload textarea{min-height:70px;resize:vertical;}
.gallery-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.wiki-button{background:var(--gold-dim);border:1px solid var(--gold);color:var(--bg-deep);font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;cursor:pointer;transition:color .15s,background .15s,border-color .15s,opacity .15s;}
.wiki-button:hover{background:var(--gold-bright);}
.wiki-button.danger{background:transparent;color:var(--red-bright);border-color:var(--red);}
.wiki-button.danger:hover{background:var(--red);color:var(--text-primary);}
.gallery-note{font-size:14px;color:var(--text-secondary);margin-top:12px;}
#gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;}
.gallery-card{background:var(--bg-card);border:1px solid var(--border);overflow:hidden;}
.gallery-card img{display:block;width:100%;height:190px;object-fit:cover;cursor:pointer;transition:transform .2s;}
.gallery-card img:hover{transform:scale(1.03);}
.gallery-info{padding:12px;}
.gallery-title{font-family:'Cinzel',serif;font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px;}
.gallery-desc{font-size:14px;color:var(--text-secondary);line-height:1.45;white-space:pre-wrap;}
.gallery-meta{font-size:12px;color:var(--text-dim);margin-top:8px;}
.gallery-empty{border:1px solid var(--border);background:var(--bg-card);padding:28px;color:var(--text-secondary);font-style:italic;}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:500;padding:32px;}
#lightbox.active{display:flex;}
#lightbox img{max-width:92vw;max-height:82vh;border:1px solid var(--gold-dim);box-shadow:0 0 35px rgba(0,0,0,.8);}
#lightbox-close{position:fixed;top:20px;right:24px;font-size:36px;color:var(--text-primary);cursor:pointer;}
@media(max-width:700px){#gallery-grid{grid-template-columns:1fr;}.gallery-card img{height:240px;}}




/* ── Design tokens — single source of truth ── */
:root {
  --gold: var(--cx-accent);
  --gold-dim: var(--cx-accent-deep);
  --gold-dark: var(--cx-accent-dim);
  --gold-glow: color-mix(in srgb,var(--cx-accent-deep) 40%,transparent);
  --text-primary: var(--cx-text);
  --text-secondary: var(--cx-text-soft);
  --text-dim: var(--cx-text-faint);
  --bg-card: var(--cx-surface-2);
  --bg-deep: var(--cx-bg);
  --border-subtle: color-mix(in srgb,var(--cx-accent-deep) 15%,transparent);
  --border-normal: color-mix(in srgb,var(--cx-accent-deep) 25%,transparent);
  --border-bright: color-mix(in srgb,var(--cx-accent-deep) 50%,transparent);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* ── Ensure smooth scrolling ── */
html { scroll-behavior: smooth; }

/* ── Prevent layout shift on mobile ── */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ── Focus styles for accessibility ── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}