/* ════════════════════════════════════════════
   SACRED CIRCLE — Shared Stylesheet
   ════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────── */
:root {
  --bg:     #050407;
  --bg2:    #0b0912;
  --bg3:    #0f0d18;
  --gold:   #c9a84c;
  --gold-l: #e8c97a;
  --gold-d: #7a6020;
  --teal:   #3dccc7;
  --teal-d: #1d6b68;
  --txt:    #f0ece0;
  --txt2:   #9a8c7a;
  --txt3:   #4a4540;
  --border: rgba(201,168,76,0.18);
  --glow:   rgba(201,168,76,0.08);
}

/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  line-height: 1.7;
}

/* ── Flower of Life tile background ────────── */
body::before {
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='174'%3E%3Ccircle cx='100' cy='87' r='58' fill='none' stroke='rgba(201,168,76,0.038)' stroke-width='0.6'/%3E%3Ccircle cx='158' cy='87' r='58' fill='none' stroke='rgba(201,168,76,0.028)' stroke-width='0.5'/%3E%3Ccircle cx='42' cy='87' r='58' fill='none' stroke='rgba(201,168,76,0.028)' stroke-width='0.5'/%3E%3Ccircle cx='129' cy='37' r='58' fill='none' stroke='rgba(201,168,76,0.028)' stroke-width='0.5'/%3E%3Ccircle cx='71' cy='37' r='58' fill='none' stroke='rgba(201,168,76,0.028)' stroke-width='0.5'/%3E%3Ccircle cx='129' cy='137' r='58' fill='none' stroke='rgba(201,168,76,0.028)' stroke-width='0.5'/%3E%3Ccircle cx='71' cy='137' r='58' fill='none' stroke='rgba(201,168,76,0.028)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 200px 174px;
}

/* ── Toast notification ─────────────────────── */
#toast {
  position:fixed; bottom:2rem; right:2rem; z-index:9999;
  background:var(--bg2); border:1px solid var(--gold-d);
  color:var(--gold); padding:0.75rem 1.5rem;
  font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:0.18em;
  transform:translateY(80px); opacity:0; transition:all 0.4s; pointer-events:none;
}
#toast.show { transform:translateY(0); opacity:1; }

/* ── Site Header ────────────────────────────── */
#site-header {
  position:relative; z-index:10;
  text-align:center; padding:2.2rem 1rem 1.4rem;
}
#site-header h1 {
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(1.4rem,4vw,2.8rem);
  font-weight:700; color:var(--gold); letter-spacing:0.12em;
  text-shadow:0 0 60px rgba(201,168,76,0.5),0 0 120px rgba(201,168,76,0.18);
}
#site-header a { text-decoration:none; }
#site-header .tagline {
  font-size:0.68rem; letter-spacing:0.48em; color:var(--txt2);
  text-transform:uppercase; margin-top:0.5rem; font-weight:200;
}

/* ── Navigation ─────────────────────────────── */
#nav {
  position:sticky; top:0; z-index:100;
  background:rgba(5,4,7,0.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
#nav ul { display:flex; list-style:none; justify-content:center; flex-wrap:wrap; }
#nav a {
  display:block; padding:0.92rem 1.05rem;
  font-family:'Cinzel',serif; font-size:1.1rem; font-weight:800;
  letter-spacing:0.24em; text-transform:uppercase;
  color:var(--txt2); text-decoration:none; transition:color 0.3s; position:relative;
}
#nav a::after {
  content:''; position:absolute; bottom:0; left:50%;
  transform:translateX(-50%); width:0; height:1px;
  background:var(--gold); transition:width 0.3s;
}
#nav a:hover,
#nav a.active { color:var(--gold-l); }
#nav a:hover::after,
#nav a.active::after { width:65%; }

/* ── Slider (index.html only) ───────────────── */
#slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;   /* ← 16:10 enforced by the browser */
  min-height: 240px;        /* floor so it never collapses on narrow phones */
  max-height: 82vh;         /* ceiling so it never swallows the whole screen */
  overflow: hidden;
  z-index: 5;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Individual slide */
.slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.4s ease;
}
.slide.active { opacity: 1; }

/* Real photo — fills the container, crops to fit */
.slide-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* object-position is set inline per slide in slides.js */
  display: block;
}

/* Gradient overlay — bottom-to-transparent, keeps caption readable */
.slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,4,7,0.72) 0%, transparent 52%);
  z-index: 1;
  pointer-events: none;
}

/* Caption */
.slide-caption {
  position: absolute; bottom: 2.6rem; left: 50%;
  transform: translateX(-50%); text-align: center;
  z-index: 2; white-space: nowrap;
}
.slide-caption h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.95rem, 2.5vw, 1.6rem);
  color: var(--gold-l); letter-spacing: 0.15em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.9);
}
.slide-caption p {
  font-size: clamp(0.6rem, 1.2vw, 0.72rem);
  color: var(--txt2); letter-spacing: 0.32em;
  text-transform: uppercase; margin-top: 0.3rem; font-weight: 200;
}

/* ── Slide copyright notice ── */
.slide::after {
  content: '© 2026 | Consciously Connected Communities | All rights reserved.';
  position: absolute;
  bottom: 0.6rem;
  right: 0.8rem;
  z-index: 3;
  font-family: 'Raleway', sans-serif;
  font-size: 0.65rem;
  color: rgba(201, 168, 76, 0.45);
  letter-spacing: 0.08em;
  pointer-events: none;
}


/* Placeholder shown while image files are missing */
.slide-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.6rem;
}
.slide-placeholder-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(201,168,76,0.35);
  margin-top: 0.4rem;
}
.slide-placeholder-file {
  font-family: 'Raleway', monospace;
  font-size: 0.78rem; letter-spacing: 0.12em;
  color: rgba(201,168,76,0.28);
}
.slide-placeholder-hint {
  font-family: 'Raleway', sans-serif;
  font-size: 0.62rem; letter-spacing: 0.1em;
  color: rgba(154,140,122,0.28);
}
.slider-btn {
  position:absolute; top:50%; transform:translateY(-50%); z-index:20;
  background:rgba(5,4,7,0.6); border:1px solid var(--border);
  color:var(--gold); width:42px; height:42px; border-radius:50%;
  font-size:1.2rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.3s; backdrop-filter:blur(6px);
}
.slider-btn:hover {
  background:rgba(201,168,76,0.12); border-color:var(--gold);
  box-shadow:0 0 22px rgba(201,168,76,0.25);
}
#sl-prev { left:1.2rem; }
#sl-next { right:1.2rem; }
.slider-dots {
  position:absolute; bottom:1rem; left:50%;
  transform:translateX(-50%); display:flex; gap:0.6rem; z-index:20;
}
.slider-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--txt3); border:none; cursor:pointer; transition:all 0.3s;
}
.slider-dot.active { background:var(--gold); box-shadow:0 0 8px var(--gold); }

/* ── Page Banner (interior pages) ──────────── */
.page-banner {
  position:relative; z-index:5;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  text-align:center;
  padding:3.8rem 2rem 3.2rem;
}
.page-banner h2 {
  font-family:'Cinzel',serif;
  font-size:clamp(1.5rem,3.5vw,2.4rem);
  color:var(--gold); letter-spacing:0.15em; margin-bottom:0.8rem;
}
.page-banner-sub {
  font-size:0.72rem; color:var(--txt2);
  letter-spacing:0.32em; text-transform:uppercase; font-weight:200; margin-top:0.4rem;
}

/* ── Main content wrapper ───────────────────── */
.page-main { position:relative; z-index:1; }
.section-inner { max-width:1080px; margin:0 auto; padding:4.5rem 2rem; }

/* ── Section heading ────────────────────────── */
.sec-head { text-align:center; margin-bottom:3.5rem; }
.sec-head h2 {
  font-family:'Cinzel',serif;
  font-size:clamp(1.3rem,3vw,1.9rem);
  color:var(--gold); letter-spacing:0.15em; margin-bottom:0.8rem;
}
.ornament {
  display:flex; align-items:center;
  justify-content:center; gap:1rem; margin:0.4rem auto;
}
.orn-line { flex:1; max-width:180px; height:1px; }
.orn-line.l { background:linear-gradient(to right,transparent,var(--gold-d)); }
.orn-line.r { background:linear-gradient(to left,transparent,var(--gold-d)); }
.orn-icon { color:var(--gold-d); font-size:1rem; }
.sec-sub {
  font-size:0.72rem; color:var(--txt2); letter-spacing:0.32em;
  text-transform:uppercase; font-weight:200; margin-top:0.5rem;
}

/* ── Buttons ────────────────────────────────── */
.btn {
  display:inline-block; padding:0.75rem 1.6rem;
  font-family:'Cinzel',serif; font-size:1.0rem;
  letter-spacing:0.24em; text-transform:uppercase;
  border:1px solid; background:transparent; cursor:pointer; transition:all 0.3s;
}
.btn-gold { color:var(--gold); border-color:var(--gold); }
.btn-gold:hover { background:rgba(201,168,76,0.1); box-shadow:0 0 20px var(--glow); }
.btn-dim  { color:var(--txt2); border-color:var(--border); }
.btn-dim:hover  { color:var(--teal); border-color:var(--teal-d); }
.btn-teal { color:var(--teal); border-color:var(--teal-d); }
.btn-teal:hover { background:rgba(61,204,199,0.08); }

/* ── Form elements ──────────────────────────── */
.form-group { margin-bottom:1.2rem; }
.form-label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 1.0rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.form-input {
  width: 100%;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  color: var(--txt);
  padding: 0.85rem 1rem;
  font-family: 'Raleway', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
  border-radius: 2px;
}
.form-input:focus { border-color:var(--gold-d); background:rgba(201,168,76,0.035); }
textarea.form-input { min-height:110px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:580px) { .form-row { grid-template-columns:1fr; } }

/* ── Home hero ──────────────────────────────── */
.hero { text-align:center; max-width:680px; margin:0 auto; }
.hero h2 {
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(1.1rem,2.5vw,1.7rem);
  color:var(--gold-l); line-height:1.55; margin-bottom:1.5rem;
}
.hero p {
  color: var(--txt);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.04em;
  margin-bottom: 1.4rem;
}
.home-geo { display:flex; justify-content:center; margin:2.5rem 0; }

/* Quick-links grid on home page */
.quick-links {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1rem; margin-top:3rem;
}
.quick-card {
  background:var(--bg2); border:1px solid var(--border);
  padding:1.5rem 1.2rem; text-align:center;
  text-decoration:none; color:var(--txt);
  transition:all 0.3s; border-radius:2px;
  display:block;
}
.quick-card:hover {
  border-color:rgba(201,168,76,0.4);
  box-shadow:0 0 22px var(--glow);
  transform:translateY(-2px);
}
.quick-card-icon { font-size:1.7rem; margin-bottom:0.7rem; }
.quick-card h3 { font-family:'Cinzel',serif; font-size:0.78rem; color:var(--gold); letter-spacing:0.15em; margin-bottom:0.4rem; }
.quick-card p { font-size:0.75rem; color:var(--txt2); line-height:1.6; }

/* ── About ──────────────────────────────────── */
.about-text {
  max-width: 720px;
  margin: 0 auto;
}
.about-text p {
  color: var(--txt);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.04em;
  margin-bottom: 1.4rem;
  text-align: justify;
  hyphens: auto;
}

/* ── Content heading hierarchy (h3, h4 in page body) ── */
/*
  Matches the H2 style (Cinzel, gold, letter-spaced)
  but scaled proportionally smaller.
  Works on any page — About, Resources, Events etc.
*/
.page-main h3 {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.05rem, 2.2vw, 1.38rem);
  color: #37b8b3;
  letter-spacing: 0.13em;
  font-weight: 600;
  margin-top: 2.2rem;
  margin-bottom: 0.75rem;
}
.page-main h4 {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.85rem, 1.8vw, 1.05rem);
  color: var(--gold-l);
  letter-spacing: 0.11em;
  font-weight: 600;
  margin-top: 1.6rem;
  margin-bottom: 0.55rem;
}

.standout {
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--gold);
  letter-spacing: 0.18em;
  text-align: center !important;
  margin: 1.8rem 0;
}

/* ── Highlight box — reusable callout, drop anywhere ── */
.highlight-box {
  position: relative;
  background: rgba(201, 168, 76, 0.035);
  border: 1px solid rgba(201, 168, 76, 0.38);
  box-shadow:
    0 0 40px rgba(201, 168, 76, 0.09),
    inset 0 0 40px rgba(201, 168, 76, 0.03);
  padding: 2.2rem 2.8rem;
  margin: 2.5rem auto;
  max-width: 680px;
  text-align: center;
}

/* ── Google Maps embed ─────────────────────── */
.map-wrap {
  max-width: 720px;           /* matches contact form width */
  height: 720px;    /* ← change from 380px (or whatever it currently is) to 720px */
  margin: 2.8rem auto 0;
  position: relative;
  border: 1px solid rgba(201, 168, 76, 0.38);
  background: rgba(201, 168, 76, 0.035);
  box-shadow:
    0 0 40px rgba(201, 168, 76, 0.09),
    inset 0 0 40px rgba(201, 168, 76, 0.03);
}

/* ✦ ornaments — same trick as highlight-box */
.map-wrap::before,
.map-wrap::after {
  content: '✦';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  padding: 0 0.7rem;
  color: var(--gold-d);
  font-size: 0.75rem;
  line-height: 1;
  z-index: 2;
}
.map-wrap::before { top: -0.62rem; }
.map-wrap::after  { bottom: -0.62rem; }

.map-header {
  padding: 1.2rem 1.5rem 0.9rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.map-title {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.map-address {
  font-size: 0.65rem;
  color: var(--txt3);
  letter-spacing: 0.12em;
  margin-top: 0.35rem;
}

.map-frame { line-height: 0; overflow: hidden; height: 720px; }
.map-frame iframe {
  width: 100%;
  height: 720px;
  border: 0;
  display: block;
  /* Dark map — inverts colours, hue-rotate brings natural tones back */
  filter: invert(90%) hue-rotate(180deg);
}

/* ── Wide action button ─────────────────────────────────────────────
   Same width as About paragraphs. 1.5× height of Send Message.
   Matches the highlight-box frame style.
   Usage: <a href="YOUR_URL" target="_blank" rel="noopener noreferrer"
              class="wide-btn">✦ &nbsp; Your Label &nbsp; ✦</a>
─────────────────────────────────────────────────────────────────── */
.wide-btn {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 2rem auto;
  padding: 1.1rem 2rem;        /* 1.5× the 0.65rem of .btn */
  font-family: 'Cinzel', serif;
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--gold);
  background: rgba(201, 168, 76, 0.035);
  border: 1px solid rgba(201, 168, 76, 0.38);
  box-shadow:
    0 0 40px rgba(201, 168, 76, 0.09),
    inset 0 0 40px rgba(201, 168, 76, 0.03);
  cursor: pointer;
  transition: all 0.35s ease;
  position: relative;
}
.wide-btn:hover {
  color: var(--gold-l);
  background: rgba(201, 168, 76, 0.08);
  border-color: rgba(201, 168, 76, 0.6);
  box-shadow:
    0 0 60px rgba(201, 168, 76, 0.18),
    inset 0 0 40px rgba(201, 168, 76, 0.06);
  letter-spacing: 0.32em;        /* subtle spread on hover — elegant */
}

/* ✦ ornaments that sit on the border, top and bottom */
.highlight-box::before,
.highlight-box::after {
  content: '✦';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);  /* matches page bg — creates the "gap" in the border */
  padding: 0 0.7rem;
  color: var(--gold-d);
  font-size: 0.75rem;
  line-height: 1;
}
.highlight-box::before { top: -0.62rem; }
.highlight-box::after  { bottom: -0.62rem; }

/* Any text inside the box stays centred, not justified */
.highlight-box p {
  text-align: center !important;
  color: var(--txt);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.04em;
  margin-bottom: 0.9rem;
}
.highlight-box p:last-child { margin-bottom: 0; }
.highlight-box .standout {
    margin: 0.4rem 0;
}
	
.highlight-box.text-left p:not(.standout),
.highlight-box.text-left li {
  text-align: justify !important;
}

/* ── Countdown timer ────────────────────────── */
.countdown {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.2rem 0 0.4rem;
  flex-wrap: wrap;
}
.cd-unit {
  text-align: center;
  min-width: 58px;
}
.cd-number {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 0 24px rgba(201,168,76,0.35);
  letter-spacing: 0.05em;
}
.cd-label {
  display: block;
  font-size: 0.52rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-top: 0.45rem;
}
.cd-sep {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--gold-d);
  opacity: 0.45;
  padding-top: 0.05em;
  user-select: none;
}
.cd-arrived {
  display: none;
  color: var(--teal);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.18em;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}
.cd-event-time {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--txt3);
  text-transform: uppercase;
  margin: 0.3rem 0 1rem;
}

/* ── Styled list for page content ── */
.page-main ul {
  list-style: none;
  margin: 1rem 0 1.1rem 0;
  padding: 0;
}
.page-main ul li {
  color: var(--txt);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.04em;
  padding-left: 1.6em;
  position: relative;
  margin-bottom: 0.5rem;
}
.page-main ul li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--gold-d);
  font-size: 0.85rem;
  top: 0.42em;              /* vertically centres the ornament with the text */
}

/* ── Sub-bullet points ── */
.page-main ul ul {
  margin: 0.4rem 0 0.2rem 0;
}
.page-main ul ul li {
  font-size: 0.92em;          /* slightly smaller than parent */
  margin-bottom: 0.15rem;
}
.page-main ul ul li::before {
  content: '◈';               /* different ornament for sub-level */
  color: var(--teal-d);       /* teal instead of gold — clear visual hierarchy */
  font-size: 0.75rem;
  top: 0.45em;
}

.ul-indent {
  padding-left: 3rem !important;
}


/* ── Gallery ────────────────────────────────── */
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1rem;
}
.gallery-item {
  aspect-ratio:1; background:var(--bg2); border:1px solid var(--border);
  border-radius:2px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; cursor:pointer; transition:all 0.3s; position:relative;
}
.gallery-item:hover {
  border-color:rgba(201,168,76,0.4);
  box-shadow:0 0 28px var(--glow); transform:scale(1.02);
}
.gallery-item svg { width:72%; height:72%; opacity:0.55; transition:opacity 0.3s; }
.gallery-item:hover svg { opacity:0.9; }
.gal-label {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(5,4,7,0.85); padding:0.5rem;
  font-family:'Cinzel',serif; font-size:0.58rem;
  letter-spacing:0.18em; color:var(--gold);
  transform:translateY(100%); transition:transform 0.3s; text-align:center;
}
.gallery-item:hover .gal-label { transform:translateY(0); }

/* ── Events ─────────────────────────────────── */
.events-list { display:flex; flex-direction:column; gap:1.2rem; }
.event-card {
  display:grid; grid-template-columns:72px 1fr; gap:1.5rem;
  background:var(--bg2); border:1px solid var(--border);
  border-left:2px solid var(--gold-d); padding:1.4rem;
  transition:all 0.3s; align-items:start;
}
.event-card:hover { border-color:rgba(201,168,76,0.4); background:rgba(201,168,76,0.025); }
.event-date { text-align:center; border-right:1px solid var(--border); padding-right:1.5rem; }
.event-day { font-family:'Cinzel',serif; font-size:2rem; color:var(--gold); line-height:1; }
.event-month { font-size:1.1rem; letter-spacing:0.2em; text-transform:uppercase; color:#e97f15; margin-top:0.2rem; }
.event-info h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: #37b8b3;
    line-height: 1.95;
    letter-spacing: 0.04em;
    margin-top: 0.5rem;
}
.event-info p {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--txt);
  line-height: 1.95;
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
}

/* ── Resources ──────────────────────────────── */
.resources-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.2rem;
}
.res-card {
  background:var(--bg2); border:1px solid var(--border);
  padding:1.5rem; transition:all 0.3s; border-radius:2px;
}
.res-card:hover { border-color:rgba(61,204,199,0.3); box-shadow:0 0 20px rgba(61,204,199,0.06); }
.res-icon { font-size:1.6rem; margin-bottom:0.8rem; }
.res-card h3 { font-family:'Cinzel',serif; font-size:0.82rem; color:var(--teal); margin-bottom:0.5rem; letter-spacing:0.1em; }
.res-card p { font-size:0.8rem; color:var(--txt2); line-height:1.7; }

/* ── Community Board ────────────────────────── */
#board-wrap { max-width:780px; margin:0 auto; }
.board-bar {
  display:flex; justify-content:space-between;
  align-items:center; margin-bottom:1.8rem;
}
.board-bar-info { font-family:'Cinzel',serif; font-size:0.62rem; color:var(--txt3); letter-spacing:0.22em; text-transform:uppercase; }

.npost-form {
  background:var(--bg2); border:1px solid var(--border);
  padding:2rem; margin-bottom:2rem; display:none;
}
.npost-form.open { display:block; }
.npost-form-title {
  font-family:'Cinzel',serif; font-size:0.72rem;
  color:var(--gold); letter-spacing:0.22em;
  text-transform:uppercase; margin-bottom:1.5rem;
}
.posts-list { display:flex; flex-direction:column; gap:1.2rem; }
.post-card {
  background:var(--bg2); border:1px solid var(--border);
  overflow:hidden; transition:border-color 0.3s;
}
.post-card:hover { border-color:rgba(201,168,76,0.3); }
.post-head { padding:1.4rem; }
.post-meta { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-bottom:0.6rem; }
.post-author { font-family:'Cinzel',serif; font-size:0.68rem; color:var(--gold); letter-spacing:0.1em; }
.post-date { font-size:0.65rem; color:var(--txt3); letter-spacing:0.08em; }
.post-title { font-family:'Cinzel',serif; font-size:1rem; color:var(--txt); margin-bottom:0.7rem; line-height:1.4; }
.post-body { font-size:0.87rem; color:var(--txt2); line-height:1.8; white-space:pre-wrap; }
.post-foot {
  padding:0.7rem 1.4rem; background:rgba(0,0,0,0.25);
  border-top:1px solid rgba(201,168,76,0.06);
  display:flex; justify-content:space-between; align-items:center;
}
.reply-count { font-size:0.65rem; color:var(--txt3); letter-spacing:0.1em; }
.post-actions { display:flex; gap:0.5rem; }
.replies-wrap {
  display:none; background:rgba(0,0,0,0.3);
  border-top:1px solid rgba(201,168,76,0.06);
  padding:1.2rem 1.4rem 1.4rem;
}
.replies-wrap.open { display:block; }
.reply-item {
  border-left:2px solid var(--teal-d); padding:0.7rem 1rem;
  margin-bottom:0.8rem; background:rgba(255,255,255,0.018);
}
.reply-meta { display:flex; gap:0.8rem; align-items:center; margin-bottom:0.3rem; }
.reply-author { font-family:'Cinzel',serif; font-size:0.65rem; color:var(--teal); }
.reply-date { font-size:0.6rem; color:var(--txt3); }
.reply-body { font-size:0.82rem; color:var(--txt2); line-height:1.7; white-space:pre-wrap; }
.reply-form-wrap { margin-top:1rem; display:none; flex-direction:column; gap:0.7rem; }
.reply-form-wrap.open { display:flex; }
.reply-form-actions { display:flex; gap:0.6rem; justify-content:flex-end; margin-top:0.2rem; }
.empty-state {
  text-align:center; padding:3.5rem 2rem;
  color:var(--txt3); font-size:0.78rem;
  letter-spacing:0.25em; text-transform:uppercase; border:1px dashed var(--border);
}
.board-loading { text-align:center; padding:2rem; color:var(--txt3); font-size:0.72rem; letter-spacing:0.2em; }

/* ── Contact ─────────────────────────────────── */
#contact-wrap {
  max-width:600px; margin:0 auto;
  background:var(--bg2); border:1px solid var(--border); padding:2.5rem;
}
.contact-note {
  font-size:0.73rem; color:var(--txt3); text-align:center;
  margin-bottom:2rem; letter-spacing:0.08em; line-height:1.7;
}
.contact-note a { color:var(--gold-d); text-decoration:none; }
.contact-note a:hover { color:var(--gold); }
.contact-note code { font-family:'Cinzel',serif; color:var(--gold-d); font-size:0.68rem; }
.contact-success {
  display:none; text-align:center; padding:1.5rem;
  color:var(--teal); font-family:'Cinzel',serif;
  letter-spacing:0.18em; font-size:0.85rem;
}

/* ── Magic Word of the Day ── */
#magic-word-reveal {
  animation: wordFadeIn 0.6s ease forwards;
}
@keyframes wordFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Inline text link ── */
.inline-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-d);
  transition: color 0.3s, border-color 0.3s;
}
.inline-link:hover {
  color: var(--gold-l);
  border-color: var(--gold);
}


/* ── Members ─────────────────────────────────── */
.members-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1.2rem;
}
.member-card {
  text-align:center; padding:1.5rem 1rem;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:2px; transition:all 0.3s;
}
.member-card:hover { border-color:rgba(201,168,76,0.35); transform:translateY(-3px); }
.member-av {
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--gold-d); margin:0 auto 1rem;
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel Decorative',serif; font-size:1.3rem;
  color:var(--gold); background:rgba(201,168,76,0.07);
}
.member-name { font-family:'Cinzel',serif; font-size:0.7rem; color:var(--txt); letter-spacing:0.1em; }
.member-role { font-size:0.62rem; color:var(--txt3); margin-top:0.3rem; letter-spacing:0.08em; text-transform:uppercase; }

/* ── Footer ─────────────────────────────────── */
footer {
  position:relative; z-index:1;
  border-top:1px solid var(--border);
  padding:2.5rem 1rem; text-align:center;
  margin-top:auto;
}
footer p { font-size:0.85rem; color:#37b8b4; letter-spacing:0.28em; text-transform:uppercase; }
footer p + p { margin-top:0.4rem; opacity:0.5; }

/* ── Text selection protection ── */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Re-enable selection in form fields so users can still type */
input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}


/* ── WhatsApp button ── */
.whatsapp-btn {
  display: block;
  text-align: center;
  width: 100%;
  max-width: 720px;
  margin: 2rem auto;
  padding: 1.1rem 2rem;
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--txt);
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.45);
  box-shadow:
    0 0 40px rgba(37, 211, 102, 0.08),
    inset 0 0 40px rgba(37, 211, 102, 0.03);
  transition: all 0.35s ease;
  position: relative;
}
.whatsapp-btn:hover {
  background: rgba(37, 211, 102, 0.15);
  border-color: rgba(37, 211, 102, 0.7);
  box-shadow: 0 0 60px rgba(37, 211, 102, 0.18);
  letter-spacing: 0.28em;
  color: #25d366;
}
.whatsapp-btn svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.8rem;
  transition: transform 0.35s ease;
}
.whatsapp-btn:hover svg {
  transform: scale(1.15);
}


/* ── Burger menu (mobile) ───────────────────── */
.burger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 8px;
  transition: border-color 0.3s;
  flex-shrink: 0;
}
.burger-btn:hover { border-color: var(--gold-d); }

.burger-line {
  width: 22px; height: 1.5px;
  background: var(--gold);
  transition: all 0.35s ease;
  transform-origin: center;
  display: block;
}

/* Animate to ✕ when open */
.burger-btn.open .burger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.burger-btn.open .burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.burger-btn.open .burger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Nav inner wrapper — holds burger button on mobile */
.nav-inner {
  display: none;
}

@media (max-width: 768px) {
  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1.2rem;
  }
  .nav-inner-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    color: var(--txt3);
    letter-spacing: 0.28em;
    text-transform: uppercase;
  }
  .burger-btn { display: flex; }

  /* Hide nav links by default on mobile */
  #nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0.4rem 0 1rem;
    border-top: 1px solid var(--border);
    background: rgba(5,4,7,0.98);
  }
  /* Show when toggled open */
  #nav ul.open { display: flex; }

  #nav a {
    padding: 0.85rem 1.5rem;
    text-align: center;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(201,168,76,0.06);
  }
  #nav a::after { display: none; }
}