/* ==========================================================
   NARAYANA JOY AKASHA SANCTUARIES — unified stylesheet, v4
   Revised 18 August 2026, second pass: full-bleed edge to edge,
   aquamarine sampled from the actual pool water in the hero photo,
   fewer/softer elements throughout, shorter hero, no duplicated
   navigation surfaces. The brand mark top-left is a placeholder,
   not final branding — kept small and light for that reason.
   ========================================================== */

:root {
  --deep:        #0A2E36;
  --sea:         #0E5157;
  --teal:        #0B565E;
  --aqua:        #2BB6B0;
  --aqua-lt:     #7FDCD4;
  /* sampled directly from the pool water at the base of the tree in the hero photo */
  --marine:      #3FA0B6;
  --marine-lt:   #8FD2DE;
  --marine-dp:   #1F6B7D;
  /* a more saturated cut of the same sampled water colour, for surfaces that should read as
     actively aquamarine rather than a soft wash: the top bar, buttons, the banner above Utilities */
  --marine-active:    #14A6C4;
  --marine-active-dp: #0C8CA8;
  --gold:        #C9922B;
  --gold-deep:   #A8761E;
  --gold-pale:   #F3E6C8;
  --foam:        #EAFBF9;
  --mist:        #F4FCFB;
  --cream:       #FBFAF6;
  --white:       #FFFFFF;
  --text-dark:   #164852;
  /* darkened from the original #4C7B80 — that was reading as light grey and failing legibility
     on white/foam backgrounds at the small sizes it's used at */
  --text-soft:   #33585C;
  --border:      rgba(18,124,134,0.14);
  --serif:       'Cormorant Garamond', Georgia, serif;
  --sans:        'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); font-weight:300; background: var(--white); color: var(--text-dark); line-height:1.7; }
img { max-width:100%; display:block; }
a { color:inherit; }
/* Default word-link colour for running text — paragraphs, list items, table
   cells, blockquotes and image captions — so every inline link stands out
   from body copy site-wide, regardless of which container wraps it. More
   specific rules (nav, buttons, card-title headings, footer citations, and
   any bespoke per-section rule) still win over this and are unaffected. */
p a, li a, td a, blockquote a, figcaption a, dd a, dt a {
  color: var(--gold-deep);
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}
p a:hover, li a:hover, td a:hover, blockquote a:hover, figcaption a:hover, dd a:hover, dt a:hover {
  text-decoration-color: var(--teal);
}
/* full-bleed: no contained page-shell any more — every section spans the browser edge to edge */
.page-shell { width:100%; background:var(--white); }

/* ===== SANCTUARY HERO — shared shell for the full-image hero sitting directly beneath the new
   open site-header, used on sanctuaries.html and all twelve individual Sanctuary pages. Same
   aspect-ratio-locked pattern as Freedom's Gate's .fg-hero: each page sets its own background-image
   and aspect-ratio inline (via style="") to match that page's own artwork's exact pixel dimensions
   — max-width alone isn't enough since the twelve hero images aren't all identically sized — so the
   image is never cropped and stays reliable if crystal/pulse points are ever added on top of it. */
.sanctuary-hero {
  position: relative;
  width: 100%;
  max-width: 2131px;
  margin: 0 auto;
  background-size: 100% 100%;
  overflow: hidden;
}
.sanctuary-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  /* Lightened 29 Aug 2026 at Peter's request — the white fade was washing out too much
     of the image detail; same shape, gentler opacities throughout. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 66%, rgba(255,255,255,.28) 90%, rgba(255,255,255,.50) 100%);
  pointer-events: none;
}

/* ===== TOP BAR — still used on sanctuaries.html and the twelve inner pages. Removed from the
   Welcome page itself: the entrance now runs edge-to-edge with no chrome above it. ===== */
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 14px clamp(24px,4vw,64px);
  background: linear-gradient(90deg, #6FDAF6 0%, #B7EDFC 30%, #E6F9FD 65%, #F5FDFE 100%);
  position:sticky; top:0; z-index:90;
}
/* soft bottom edge so the bar doesn't end in a hard line above the Hero */
.topbar::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:16px; transform:translateY(100%);
  background: linear-gradient(180deg, rgba(230,249,253,.5), rgba(230,249,253,0));
  pointer-events:none;
}
.topbar .brand { display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.topbar .brand-text { line-height:1.15; }
/* Peter's own commissioned lettering, cropped from the full emblem artwork, replaces the plain
   CSS wordmark — this is the site's one real header now, so it's set generously sized */
.topbar .brand-text .wordmark { height:44px; width:auto; display:block; }
.topbar .brand-text .tag { display:block; margin-top:2px; font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8A6314; }
.topmenu { display:flex; gap:30px; flex-wrap:wrap; }
.topmenu a {
  font-family:var(--sans); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  text-decoration:none; color:var(--text-dark); padding:6px 2px; border-bottom:2px solid transparent;
}
.topmenu a:hover, .topmenu a.active { color:var(--marine-active-dp); border-color:var(--gold); }
.topbar-utils { display:flex; gap:16px; align-items:center; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft); flex:0 0 auto; }
.topbar-utils a { display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--text-soft); }
.topbar-utils a:hover { color:var(--marine-active-dp); }
.topbar-utils svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; }

/* ===== HERO — the Welcome entrance itself, full viewport height, running right to the top of the
   page with no banner above it. Restored to the complete generated image (gates included) at
   Peter's request — the crop was a misstep, not asked for. Both essence sentences sit in their
   own section below rather than over the image; the Gates themselves are still an open question
   for a later pass, here or as an opener for the page beyond "Enter". ===== */
.hero-full {
  position:relative;
  width:100%;
  height: 100vh;
  background-image: url('../assets/hero-site-entry.jpg');
  background-size: cover;
  background-position: center 40%;
  overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
}
.hero-full::after {
  content:"";
  position:absolute; inset:0;
  /* Lightened 29 Aug 2026 at Peter's request — see the matching change in welcome.css. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 6%, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 78%, rgba(255,255,255,.16) 92%, rgba(255,255,255,.28) 100%);
  pointer-events:none;
}
.hero-enter {
  position:relative; z-index:2; margin-bottom: clamp(32px,5vw,56px);
  display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  text-decoration:none; color:var(--gold-deep); font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
}
.hero-enter svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; animation: enter-bob 2.2s ease-in-out infinite; }
.hero-enter:hover { color:var(--marine-active-dp); }
@keyframes enter-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6px); } }

/* ===== ESSENCE — both sentences, now their own quiet section directly beneath the Hero ===== */
.essence { max-width:760px; margin:0 auto; padding: clamp(40px,5.5vw,64px) clamp(24px,4vw,64px) clamp(28px,3.6vw,36px); text-align:center; }
.essence p { font-family:var(--serif); font-style:italic; font-size:1.05rem; line-height:1.75; color:var(--text-dark); }
.essence p.path { margin-top:14px; font-family:var(--sans); font-style:normal; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--gold-deep); line-height:1.6; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; padding:12px 22px; border-radius:3px; transition: background .2s, color .2s; }
.btn.solid { background:var(--marine-active); color:#fff; border:1px solid var(--marine-active); }
.btn.solid:hover { background:var(--marine-active-dp); border-color:var(--marine-active-dp); }
.btn.outline { background:rgba(255,255,255,.75); color:var(--marine-active-dp); border:1px solid var(--marine-active); }
.btn.outline:hover { background:var(--marine-active); color:#fff; }

/* Chambers and Feature Cards removed for now, per Peter's note — the page currently runs
   Hero → Essence → Closing Band only, while the Gates and what comes next are reconsidered. */

/* ===== CLOSING BAND — colour re-sampled directly from the Hero artwork itself: the deep
   turquoise glow inside the arch behind the Tree (averaged from several pixel samples across
   that area, not guessed) rather than the previous unrelated cyan ===== */
.closing-band {
  position:relative;
  background:
    radial-gradient(ellipse 700px 160px at 0% 50%, rgba(255,255,255,.12), transparent 65%),
    radial-gradient(ellipse 700px 160px at 100% 50%, rgba(255,255,255,.12), transparent 65%),
    linear-gradient(90deg, #0A7B93 0%, #2FA8BE 50%, #0A7B93 100%);
  color:#fff;
  text-align:center;
  padding: clamp(20px,2.6vw,26px) clamp(24px,4vw,64px);
}
.closing-band::before {
  content:""; position:absolute; left:0; right:0; top:0; height:30px; transform:translateY(-100%);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(10,123,147,.35));
  pointer-events:none;
}

.cb-links {
  display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; margin-bottom:14px;
}
/* rebuilt as real pill buttons — white outline on the turquoise band, filling solid white with
   dark text on hover — rather than the previous underlined text links */
.cb-btn {
  font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.75);
  border-radius:20px; padding:9px 18px; text-decoration:none; transition: background .2s, color .2s;
}
.cb-btn:hover { background:#fff; color:#0A7B93; }

.cb-copy { font-family:var(--sans); font-weight:400; font-size:.64rem; letter-spacing:.06em; color:#fff; text-shadow: 0 1px 3px rgba(10,80,95,.3); }

/* ===== ARTICLE / SANCTUARY PAGE (inner pages, unchanged pattern) ===== */
.article-hero { text-align:center; padding: clamp(30px,4vw,46px) 20px clamp(10px,2vw,18px); background: radial-gradient(600px 320px at 50% 0%, var(--foam) 0%, var(--white) 68%); }
.article-hero .glyph { width:220px; height:220px; margin:0 auto 14px; }
/* ===== CONVERGENCE MAP — the inline reference map from inside the Divine
   Plan Final Composite Summary docx (not its cover). Originally placed at
   the very top of the page (Peter's call, 31 Aug 2026), then moved down
   into the "Ground" section (Peter's call, same day) to sit beside the
   paragraph it actually illustrates, swapping places with the two
   separate Gates/Discs wheels, which now open the page instead. Only
   ever used on sanctuaries.html; the 12 individual Sanctuary pages keep
   their .glyph crystal medallion untouched. ===== */
.convergence-figure { text-align:center; max-width:900px; margin:30px auto 10px; }
.convergence-figure .convergence-map {
  width:100%; height:auto;
  margin:0 auto 14px;
  border-radius:6px;
  border:1px solid rgba(168,118,30,.35);
  box-shadow:0 18px 40px rgba(20,50,48,.22);
}
.convergence-figure figcaption { font-family:var(--sans); font-size:.78rem; line-height:1.6; color:var(--text-soft); }
.article-eyebrow { text-align:center; font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:8px; }
.article-title { text-align:center; font-family:var(--serif); font-weight:600; font-size:clamp(2rem,4vw,2.8rem); color:var(--teal); margin-bottom:10px; }
.article-tagline { text-align:center; font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--teal); max-width:640px; margin:0 auto 8px; }
/* honest, plainly-worded qualifier distinguishing the energetic Sun Discs (already present) from
   the physical Temples/land (not yet built or found) — added so no image or vision language on
   this page is mistaken for an account of present reality */
.article-qualifier { text-align:center; font-family:var(--sans); font-size:.86rem; line-height:1.7; color:var(--text-soft); max-width:640px; margin:14px auto 0; }
.section { padding: 10px clamp(20px,6vw,60px) 30px; max-width:900px; margin:0 auto; }
.prose { max-width:720px; margin:0 auto; padding: 20px 10px 8px; }
.prose p { font-size:1.08rem; line-height:1.85; color:var(--text-dark); margin-bottom:20px; text-align:left; }
.prose p:first-of-type { font-size:1.14rem; }
.prose p.unfolding-note { font-family:var(--serif); font-style:italic; font-size:.92rem; color:var(--text-soft); border-top:1px solid var(--border); padding-top:20px; margin-top:6px; text-align:center; }
.prose a { color:var(--gold-deep); text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:2px; }
.prose a:hover { text-decoration-color:var(--teal); }

.sanctuary-list { max-width:820px; margin:10px auto 0; padding:0 20px; list-style:none; }
.sanctuary-list li { border-bottom:1px solid var(--border); }
.sanctuary-list a { display:flex; align-items:baseline; gap:18px; padding:20px 6px; text-decoration:none; transition:background .2s; }
.sanctuary-list a:hover { background: var(--foam); }
.sanctuary-list .num { font-family:var(--serif); font-size:15px; color:var(--gold-deep); letter-spacing:.1em; flex:0 0 30px; }
.sanctuary-list .name-block { flex:1 1 auto; }
.sanctuary-list h3 { font-family:var(--serif); font-weight:600; font-size:22px; color:var(--teal); }
.sanctuary-list p { font-family:var(--sans); font-size:13px; color:var(--text-soft); margin-top:3px; }
.sanctuary-list .quality { flex:0 0 auto; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); text-align:right; max-width:170px; }

/* ===== BEDROCK — the definitional Discourse content on the NJA Sanctuaries landing page ===== */
.bedrock { max-width:760px; margin:10px auto 0; padding:0 20px; }
.bedrock h2 { font-family:var(--serif); font-weight:600; font-size:1.7rem; color:var(--teal); margin:44px 0 14px; text-align:left; }
.bedrock h2:first-of-type { margin-top:16px; }
.bedrock p { font-size:1.05rem; line-height:1.85; color:var(--text-dark); margin-bottom:18px; text-align:left; }
.bedrock blockquote { font-family:var(--serif); font-style:italic; font-size:1.08rem; line-height:1.8; color:var(--text-dark); border-left:3px solid var(--gold-deep); padding:2px 0 2px 24px; margin:6px 0 8px; }
.bedrock .source-line { font-family:var(--sans); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:26px; }
.bedrock a { color:var(--gold-deep); text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:2px; }
.bedrock a:hover { text-decoration-color:var(--teal); }
/* Stacked one above the other, 3 Sep 2026 — the two regenerated wheel images
   (gates-wheel-art-v4 at 1303x1207, sun-discs-wheel-art-v4 at 1254x1254) are no
   longer the same aspect ratio, so a side-by-side row left them mismatched in
   height. Peter's call: stack them, each capped to its own comfortable width. */
.discs-row { display:flex; flex-direction:column; align-items:center; gap:48px; margin:30px 0 10px; }
.disc-figure { max-width:460px; width:100%; margin:0; text-align:center; }
.disc-figure img { width:100%; height:auto; display:block; }
.disc-figure figcaption { font-family:var(--sans); font-size:.78rem; line-height:1.6; color:var(--text-soft); margin-top:10px; }
.disc-figure figcaption a { color:var(--gold-deep); text-decoration-color:var(--border); text-underline-offset:2px; }
.disc-figure figcaption a:hover { text-decoration-color:var(--teal); }
.downloads-row { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin:34px 0 12px; }
.dl-btn { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:16px 26px; background:var(--teal); color:#fff; text-decoration:none; border-radius:4px; transition:background .2s; min-width:230px; }
.dl-btn:hover { background:var(--gold-deep); }
.dl-btn.inactive { background:var(--text-soft); opacity:.55; cursor:default; pointer-events:none; }
.dl-btn .dl-title { font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.dl-btn .dl-sub { font-family:var(--sans); font-size:.74rem; font-weight:300; letter-spacing:.02em; opacity:.9; }

nav.sanctuaries-subnav { max-width:900px; margin:10px auto 10px; padding:18px 24px 0; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center; }
nav.sanctuaries-subnav.top { margin:22px auto 18px; padding:0 24px 18px; border-top:none; border-bottom:1px solid var(--border); }
nav.sanctuaries-subnav a { font-family:var(--sans); font-size:11px; letter-spacing:.06em; color:var(--gold-deep); text-decoration:none; padding:4px 2px; }
nav.sanctuaries-subnav a:hover { color:var(--teal); }
nav.sanctuaries-subnav a.current { color:var(--gold-deep); border-bottom:1px solid var(--gold-deep); }

@media (max-width:900px) {
  .topmenu { display:none; }
}