/* Civic³ site skin · one source for the colors, type and top nav every tab shares.
   Copied from the main card tabs (Campaigns, Doctrines, Commerce), which are the reference look.
   The nav rules are scoped to nav.c3-site with extra specificity so a page's own older nav styles
   cannot pull it off model. Change the look here, not page by page. */
:root{--c3-nav-h:52px}
/* House tokens live on the nav and on c3-skin pages only, never on :root, so a page that sets its own
   (the map, the card tabs) keeps them. */
nav.c3-site,body.c3-skin{
  --gold:#C9A84C;--gold-dim:#8A6A2A;--gold-bright:#F0C96B;
  --bg:#0A0C0F;--bg2:#111418;--bg3:#181D23;--bg4:#1E242C;
  --border:rgba(201,168,76,0.15);--border-bright:rgba(201,168,76,0.4);
  --text:#E8E0D0;--text-dim:#8A8070;
  --font-display:'Bebas Neue',Impact,sans-serif;--font-mono:'IBM Plex Mono',ui-monospace,monospace;--font-body:'IBM Plex Sans',system-ui,sans-serif;
}
/* I.Q. pages carry dense data: muted text stays readable (4.5:1 on the house black) */
body.c3-skin{--text-muted:#8A8070;--red:#f17676;--green:#44d59b}

/* ── the top nav ─────────────────────────────────────────────── */
html body nav.c3-site{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:0;height:var(--c3-nav-h);margin:0;padding:0 0 0 24px;max-width:none;background:rgba(10,12,15,.94);border:0;border-bottom:1px solid var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:none;font-family:var(--font-body)}
html body nav.c3-site .nav-brand{display:flex;align-items:center;gap:12px;flex:none;margin-right:auto;padding-right:20px;color:var(--text);text-decoration:none}
html body nav.c3-site .nav-logo{width:28px;height:28px;display:block}
html body nav.c3-site .nav-title{font:400 20px/1 var(--font-display);letter-spacing:.12em;color:var(--text);text-transform:none}
html body nav.c3-site .nav-title::after{content:none;display:none}
html body nav.c3-site .nav-title sup{font-size:.55em;color:var(--gold)}
html body nav.c3-site .nav-sub{margin-top:3px;font:400 9px/1 var(--font-mono);letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase}
html body nav.c3-site ul.nav-links{display:flex;align-items:stretch;gap:0;flex:none;margin:0;padding:0;list-style:none;overflow:visible;justify-content:flex-end}
html body nav.c3-site ul.nav-links li{display:flex}
html body nav.c3-site ul.nav-links a{display:flex;align-items:center;height:var(--c3-nav-h);min-height:0;margin:0;padding:0 14px;border:0;border-left:1px solid var(--border);border-radius:0;background:none;box-shadow:none;font:400 10px/1 var(--font-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
html body nav.c3-site ul.nav-links a:hover{color:var(--gold);background:rgba(201,168,76,.05)}
html body nav.c3-site ul.nav-links a.active{color:var(--gold);box-shadow:inset 0 -2px var(--gold)}
html body nav.c3-site ul.nav-links li.c3-you{margin-left:18px}
html body nav.c3-site ul.nav-links li.c3-you a{border-left-color:var(--border-bright)}
html body nav.c3-site ul.nav-links a.c3-tab-two{flex-direction:column;justify-content:center;align-items:flex-start;gap:4px}
html body nav.c3-site ul.nav-links a.c3-tab-two span{color:inherit}
html body nav.c3-site ul.nav-links a.c3-tab-two small{font:500 7.5px/1 var(--font-mono);letter-spacing:.16em;color:var(--gold-dim,#8A6A2A)}
html body nav.c3-site ul.nav-links a.c3-tab-two:hover small,html body nav.c3-site ul.nav-links a.c3-tab-two.active small{color:var(--gold)}
html body nav.c3-site .c3-alert{color:#f17676;font-weight:700;margin-left:5px}
html body nav.c3-site .c3s-btn,html body nav.c3-site .nav-support{flex:none;margin:0 14px 0 10px}
@media(max-width:1440px){html body nav.c3-site ul.nav-links a{padding:0 10px;letter-spacing:.12em}html body nav.c3-site ul.nav-links li.c3-you{margin-left:10px}}
/* phones and narrow windows: links fold into the Menu button (the landing page's own, or the one civic3-chrome.js adds) */
html body nav.c3-site .nav-toggle{display:none}
@media(max-width:1180px){
  html body nav.c3-site{padding-right:10px}
  html body nav.c3-site ul.nav-links:not(.c3m-open):not(.is-open){display:none}
  html body nav.c3-site .nav-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;margin:0 6px 0 auto;border:1px solid rgba(227,190,90,.45);background:transparent;color:#e3be5a;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
  html body nav.c3-site ul.nav-links.is-open,html body nav.c3-site ul.nav-links.c3m-open{display:flex;flex-direction:column;position:fixed;top:var(--c3-nav-h);left:0;right:0;z-index:8999;max-height:calc(100dvh - var(--c3-nav-h));overflow-y:auto;margin:0;padding:6px 0;background:rgba(10,12,15,.98);border-bottom:1px solid rgba(227,190,90,.3)}
  html body nav.c3-site ul.nav-links.is-open a,html body nav.c3-site ul.nav-links.c3m-open a{height:auto;min-height:44px;padding:0 20px;border-left:0;font-size:12px}
  html body nav.c3-site ul.nav-links.is-open a.c3-tab-two,html body nav.c3-site ul.nav-links.c3m-open a.c3-tab-two{flex-direction:row;align-items:center;gap:10px}
  html body nav.c3-site ul.nav-links.is-open a.c3-tab-two small,html body nav.c3-site ul.nav-links.c3m-open a.c3-tab-two small{font-size:9px}
  html body nav.c3-site ul.nav-links li.c3-you{margin-left:0;border-top:1px solid var(--border)}
}
@media(max-width:600px){html body nav.c3-site{padding-left:14px}html body nav.c3-site .nav-sub{display:none}}

/* ── a page body in the house style ──────────────────────────── */
body.c3-skin{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:15px/1.6 var(--font-body);overflow-x:hidden}
body.c3-skin .c3-grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);background-size:48px 48px}
body.c3-skin .c3-page{position:relative;z-index:1;padding-top:var(--c3-nav-h)}
.hero-eyebrow{font:400 10px/1.4 var(--font-mono);letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:12px;justify-content:center}
.hero-eyebrow::before,.hero-eyebrow::after{content:'';display:block;width:40px;height:1px;background:var(--gold-dim)}
.hero-title{font:400 clamp(48px,8vw,96px)/.9 var(--font-display);letter-spacing:.05em;margin:0 0 14px;color:var(--text)}
.hero-title span{color:var(--gold)}
.hero-lede{font-size:15px;color:var(--text-dim);line-height:1.7;max-width:680px;margin:0 auto}
.hero-lede b{color:var(--text);font-weight:500}
body.c3-skin .hero{padding:60px 32px 24px;text-align:center;margin:0 auto}

/* pages whose header holds more than the nav (the map's election strip): the nav sits in the header's flow */
html body .topbar>nav.c3-site{position:static;background:none;border-bottom:1px solid var(--border);backdrop-filter:none;-webkit-backdrop-filter:none}
/* house body for pages that were built on their own skin */
body.c3-skin{padding-top:var(--c3-nav-h);background-color:var(--bg);background-image:linear-gradient(rgba(201,168,76,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.035) 1px,transparent 1px);background-size:48px 48px;background-attachment:fixed}
/* Support button: styled here too, so it looks right before (or without) civic3-chrome.js */
html body nav.c3-site .nav-support{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:0;border-radius:6px;background:#e3be5a;color:#14110a;font:600 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
html body nav.c3-site .nav-support:hover{background:#f0cf74}
@media(max-width:600px){html body nav.c3-site .nav-support{padding:0 11px;margin-right:6px}}


/* Recommendations use the card-index palette and type. */
.c3-recommend-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 20px;margin:0 0 24px;border:1px solid rgba(201,168,76,.25);background:#111418;color:#E8E0D0;font:14px/1.6 'IBM Plex Sans',sans-serif}
.c3-recommend-strip p{margin:0;color:#aaa18f}.c3-recommend-strip strong{color:#E8E0D0;font-weight:500}.c3-recommend-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid #C9A84C;color:#C9A84C;background:#0A0C0F;text-decoration:none;font:500 11px/1.5 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase}.c3-recommend-link:hover{background:rgba(201,168,76,.1)}.c3-recommend-link:focus-visible{outline:2px solid #C9A84C;outline-offset:4px}.c3-recommend-actions{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:600px){.c3-recommend-strip{padding:16px}.c3-recommend-actions{width:100%}.c3-recommend-link{flex:1}}