:root {
  --navy:#0A2342; --navy-mid:#1A3A5C; --navy-dark:#060F1E;
  --teal:#1B7A8C; --teal-light:#2AA3BA; --teal-pale:#E8F4F7;
  --gold:#C9963A; --gold-light:#E8B84B; --gold-pale:#FDF6E8; --cream:#FAF8F4; --white:#FFFFFF;
  --text-dark:#1A1A2E; --text-mid:#3D4A5C; --border:#DDD8CC;
  --font-display:"Merriweather", Georgia, serif; --font-body:"Source Sans 3", sans-serif;
  --font-size: 20px;
  --shadow-sm:0 2px 8px rgba(10,35,66,0.08); --shadow-md:0 6px 24px rgba(10,35,66,0.12); --shadow-lg:0 16px 48px rgba(10,35,66,0.18);
  --radius:12px; --radius-lg:20px;
}
* { box-sizing: border-box; }
body { font-size:var(--font-size);line-height:1.6; font-family:var(--font-body); color:var(--text-dark); margin:0; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); color:var(--navy); margin:0 0 0.5em; }
p {
	letter-spacing: 1px;
}
img { max-width:100%; display:block; }
a { color:var(--teal); }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--navy); color:var(--white); padding:12px 20px; z-index:9999; }
.skip-link:focus { left:0; }

.container { max-width:1480px; margin:0 auto; padding:0 24px; }
.content-section { padding:80px 0; }
.content-section.pt0,
.content-section.pt0 .content-section {padding-top: 0;}
.content-section.cream { background:var(--cream); }
.content-section.pale { background:var(--teal-pale); }
.section-label { color:var(--gold); text-transform:uppercase; letter-spacing:1px; font-weight:600; font-size:0.9em; text-align:center; margin-bottom:8px; }
.section-label[style*="text-align:left"] { text-align:left; }
.section-heading { text-align:center; font-size:2.2em; margin-bottom:16px; }
.section-heading.left { text-align:left; }
.section-sub { text-align:center; max-width:1180px; margin:0 auto 48px; color:var(--text-mid); }
.btn { display:inline-block; padding:14px 28px; border-radius:var(--radius); font-weight:600; text-decoration:none; text-align:center; border:2px solid transparent; transition:transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-gold { background:var(--gold); color:var(--white); }
.btn-outline { background:transparent; border-color:var(--white); color:var(--white); }
.btn-teal { background:var(--teal); color:var(--white); }
.btn-white { background:var(--white); color:var(--navy); }
.btn-navy { background:var(--navy); color:var(--white); }
.skin-wrapper { /* carried-over marker class from the original static slice system; intentionally not styled directly here */ }
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up:nth-child(2) { transition-delay:.1s; }
.fade-up:nth-child(3) { transition-delay:.2s; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }

/* ───── Breadcrumbs (herald_render_breadcrumbs(), inc/breadcrumbs.php) —
   no colour set here on purpose: it inherits dark text on a plain page and
   white inside a photo hero via that context's own .hero-content rule
   above. Centered inside a hero (matching the centered badge/heading/desc
   there); left-aligned everywhere else (index.php, single-event/single-news
   below-hero strip, template-login.php). ───── */
.site-breadcrumbs { display:block; font-size:.9em; margin:20px 0; }
.breadcrumb-list { display:flex; align-items:center; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.breadcrumb-item { display:inline-flex; align-items:center; gap:8px; }
.breadcrumb-item:not(:first-child)::before { content:"/"; opacity:.6; }
.breadcrumb-item a:hover { text-decoration:underline; }
.hero-content .site-breadcrumbs { margin:0 0 20px; }
.hero-content .breadcrumb-list { justify-content:center; }

.join-section { background:var(--navy); color:var(--white); padding:64px 0; text-align:center; }
.join-content h2 { color:var(--white); }
.join-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:24px 0; }
.join-badge { background:rgba(255,255,255,.1); border-radius:999px; padding:8px 18px; font-size:.9em; }
@media (max-width:960px) {
  .two-column { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:680px) {
  .section-heading { font-size:1.6em; }
  .nav-inner { justify-content:flex-start; overflow-x:auto; }
}