:root{
  --bg:#fafafa;
  --ink:#222;
  --gold:#a87c2f;
  --panel:#fff;
  --muted:#555;
  --shadow:0 4px 10px rgba(0,0,0,.08);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
}

/* ===========================
   Header / Branding
   =========================== */
header.site{ background:#111; color:#fff; padding:1rem 1.2rem; }
.brand{ display:flex; align-items:center; justify-content:center; gap:.75rem; max-width:1100px; margin:0 auto; }

/* ✅ Logo: consistent sizing */
header.site .brand img{
  max-width:140px;   /* adjust to 120px or 100px if you want even smaller */
  height:auto;
  display:block;
}

/* ===========================
   Navigation
   =========================== */
nav.nav{
  background:#191919;
  color:#fff;
  display:flex;
  flex-wrap:wrap;          /* allow 2 rows if needed */
  justify-content:center;
  gap:.25rem .45rem;
  padding:.65rem .8rem .7rem;
  overflow:visible;
}
nav.nav a{
  color:#fff;
  text-decoration:none;
  padding:.38rem .6rem;
  border-radius:.5rem;
  opacity:.9;
  transition:opacity .15s ease, background .15s ease, transform .04s ease;
  font-size:.94rem;
  white-space:nowrap;
}
nav.nav a:hover{ opacity:1; background:#2a2a2a; }
nav.nav a:active{ transform:translateY(1px); }
nav.nav a.active{ background:var(--gold); color:#111; }

/* ===========================
   Page Container / Content
   =========================== */
.container{
  max-width:960px;
  margin:1.75rem auto;
  padding:1.5rem;
  background:var(--panel);
  border-radius:12px;
  box-shadow:var(--shadow);
}
h1,h2,h3{ color:var(--gold); line-height:1.3; margin:0 0 .7rem; }
p{ margin:.6rem 0; }
ul{ margin:.8rem 0 .8rem 1.2rem; }
.small{ font-size:.92rem; color:var(--muted); }
.highlight{ background:#fff7e6; padding:.75rem .95rem; border-left:4px solid var(--gold); border-radius:6px; margin:1rem 0; }
.meta{ color:var(--muted); font-size:.95rem; }

/* Buttons on hub pages */
.cta-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem; }
a.cta{ display:inline-block; background:var(--gold); color:#111; text-decoration:none; padding:.6rem .9rem; border-radius:.6rem; }
a.cta:hover{ filter:brightness(1.05); }

/* ===========================
   Footer
   =========================== */
footer.site{ text-align:center; background:#111; color:#fff; padding:1rem; margin-top:2rem; font-size:.95rem; }

/* ===========================
   Responsive tweaks
   =========================== */
@media (max-width:640px){
  .container{ margin:1rem .75rem; padding:1rem; }
  header.site{ padding:.9rem 1rem; }
  header.site .brand img{ max-width:120px; }
  nav.nav a{ font-size:.9rem; padding:.34rem .5rem; }
}

/* ===========================
   Print
   =========================== */
@media print{
  header.site, nav.nav, footer.site{ display:none !important; }
  .container{ box-shadow:none !important; margin:0 !important; padding:0 !important; }
  body{ background:#fff; color:#000; }
}

/* --- FORCE SMALLER LOGO (final override) --- */
header.site .brand img {
  max-width: 96px !important;   /* try 96 → 88 → 80 if you want smaller */
  height: auto !important;
  display: block;
}
header.site { padding: 0.75rem 1rem !important; }  /* slightly shorter header */
.brand { gap: .6rem !important; }                  /* tighter spacing next to logo */
/* ------------------------------------------- */

/* --- FORCE SMALLER LOGO (final override) --- */
header.site .brand img {
  max-width: 96px !important;   /* try 96 → 88 → 80 if you want smaller */
  height: auto !important;
  display: block;
}
header.site { padding: 0.75rem 1rem !important; }  /* slightly shorter header */
.brand { gap: .6rem !important; }                  /* tighter spacing next to logo */
/* ------------------------------------------- */
/* --- FINAL LOGO SIZE MATCH TEXT BLOCK --- */
header.site .brand img {
  height: 48px !important;   /* adjust: 44–50px depending on exact match */
  width: auto !important;
  display: block;
  object-fit: contain;
}
header.site {
  padding: 0.8rem 1rem !important;  /* balance header padding */
}
.brand {
  gap: .75rem !important;           /* spacing between logo & text */
  align-items: center !important;   /* align vertically */
}