:root{
  --red:  #c64343;  /* Socialist Red */
  --gold: #ffd34d;  /* Icon Gold */
  --cream:#ffefd2;  /* Cream Background */
  --wheat: #ffd077; /* Wheat */
  --warmblack: #28241a; /* Warm Black */
  --ink:  #2a1a1a;  /* Text */
}

/* Base */
html,body{ margin:0; background:var(--cream); color:var(--ink); font:16px/1.6 "Source Serif 4", serif; }
h1,h2,h3{ font-family:"Cinzel", serif; margin:0 0 12px; }
a{ color:var(--red); }

/* Fixed bar */
.j5-nav{
  position: fixed; top:0; left:0; width:100%;
  background: var(--cream);
  border-bottom: 2px solid var(--red);
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Centered max-width container + flex row */
.j5-nav .nav-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo sizing */
.j5-nav .nav-logo img{
  height: 48px;  /* tweak 28–40px */
  width: auto;
  display: block;
}

/* Links as a flex row with gap */
.j5-nav .nav-links{
  display: flex;
  align-items: center;
  gap: 18px;
}
.j5-nav .nav-links a{
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}
.j5-nav .nav-links a:hover{ text-decoration: underline; }

/* fall back 70px if JS hasn’t run yet */
body { margin-top: var(--nav-h, 70px); }

/* Mobile: stack links under logo, centered */
@media (max-width: 640px){
  .j5-nav .nav-container{ flex-direction: column; gap: 8px; padding: 10px 16px; }
  .j5-nav .nav-links{ flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
  body { margin-top: var(--nav-h, 70px); }
}



/* Page wrapper */
.j5-container{
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

/* Buttons (optional) */
.btn{
  display:inline-block; padding:12px 16px; border-radius:10px;
  font-weight:700; text-decoration:none; border:2px solid var(--red);
}
.btn.primary{ background:var(--red); color:#fff; }
.btn.ghost{ background:transparent; color:var(--red); }
.btn.gold{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
}