/* ==========================================================
   NARAYANA JOY AKASHA SANCTUARIES — UTILITY PAGE STYLESHEET
   Built 19 August 2026 as the shared template for the five Utility
   pages (Return to the Field, Stewardship, Resonances and Inquiry,
   Offer a Love Gift, Terms of Grace), and intended to serve as the
   base for later Gateway and inner Sanctuary pages too.
   Deliberately "unassuming" — no full-viewport glowing Hero here,
   just a quiet title, prose, and cross-navigation. The one thing
   that must carry over unchanged from the Welcome page is the
   closing band: same colour, same fonts, same buttons, same orbs.
   ========================================================== */

:root {
  --gold-deep:   #A8761E;
  --teal:        #0B565E;
  --white:       #FFFFFF;
  --text-dark:   #1E4E4C;
  --text-soft:   #4B6B72;
  --border:      #DCE6E4;
  --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);
}

/* Download-brief buttons (Grid Brief PDFs etc.) — this stylesheet had no
   .dl-btn rule at all, so these rendered as plain unstyled text in the
   site's dark body colour. Brought in line with style.css's button and
   the site's gold link language. */
.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(--gold-deep); color:#fff; text-decoration:none; border-radius:4px; transition:background .2s; min-width:230px; }
.dl-btn:hover { background:var(--teal); }
.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; }

/* ===== SITE HEADER — full-bleed bone/beige marble, synthesised in the exact
   tones sampled from the Hero plaque (base, highlight, shadow and gold vein
   colours all pulled from the artwork). Centred composition echoing the Hero
   itself: emblem on top, one line of the full name beneath it, sized to run
   a good part of the page width, section nav in its own row below. Text
   colour matches the Hero exactly: "Narayana Joy" teal, "Akasha Sanctuaries"
   gold. ===== */
.site-header-wrap { padding:0; }
.site-header {
  text-align:left;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background-image: url('../assets/ivory-marble.png');
  background-size: cover;
  background-position: center;
  padding: clamp(8px,0.96vw,13px) clamp(24px,4vw,56px) clamp(14px,1.6vw,20px);
  box-shadow: inset 0 -1px 0 rgba(134,93,33,.3);
}
.site-header .brand { display:flex; align-items:center; gap: clamp(18px,2.6vw,30px); text-decoration:none; flex-wrap:nowrap; }
.site-header .brand img.emblem { height: clamp(68px,8.56vw,119px); width:auto; display:block; flex-shrink:0; }
.site-header .brand img.wordmark { height: clamp(46px,5.76vw,80px); width:auto; display:block; flex-shrink:0; }

/* Nav band — restructured 31 Aug 2026: rather than sitting beside the brand
   (which crowded badly once the menu passed 10 links), the nav now runs on
   its own full-width row underneath the emblem+wordmark, divided by a thin
   gold rule. Peter's own instruction: keep the emblem+wordmark at their
   original size and position on the left — only the nav moves. Centred
   across the full header width, with a little extra breathing room above
   and below the rule so the band doesn't feel compressed. */
.site-nav-stack {
  display:flex; flex-direction:column;
  width:100%;
  gap: clamp(6px,0.9vw,10px);
  margin-top: clamp(14px,1.8vw,20px);
  padding-top: clamp(12px,1.6vw,18px);
  border-top: 1px solid rgba(168,118,30,.55);
}
.site-header .site-nav-text { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap: clamp(10px,1.3vw,24px); }
.site-header .site-nav-text a {
  font-family:var(--sans); font-size:clamp(.6rem,0.85vw,.7rem); font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color: var(--text-dark); text-decoration:none; transition: color .2s; white-space:nowrap; line-height:1;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.site-header .site-nav-text a:hover,
.site-header .site-nav-text a.current { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }

/* ===== NAV DROPDOWN — reaches the Physical Community sequence (Sanctuaries /
   Property Search / Cleansing / Reshel Idra / Radiation Centres) from the
   "12 Reshel Sun Discs" slot in the header nav, on every page site-wide.
   Restyled to sit closer to the site's own gold/marble/Cinzel register rather
   than reading as a plain utility menu. Opens on hover and on keyboard focus
   so it stays accessible without a mouse. ===== */
.nav-dropdown { position:relative; }
.nav-dropdown > a { padding-right:13px; }
.nav-dropdown > a::after { content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:0; height:0; border-left:3px solid transparent; border-right:3px solid transparent; border-top:4px solid var(--gold-deep); opacity:.85; pointer-events:none; }
.nav-dropdown-menu {
  position:absolute; top:100%; left:50%; transform:translate(-50%,-6px);
  min-width:270px; margin-top:12px; padding:14px 0 10px;
  background: linear-gradient(180deg, #FFFEFB 0%, #FBF3E2 100%);
  border:1px solid var(--gold-deep);
  border-radius:6px;
  box-shadow: inset 0 0 0 1px rgba(168,118,30,.22), 0 16px 34px rgba(90,60,10,.22);
  opacity:0; visibility:hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:80;
}
.nav-dropdown-menu::before {
  content:"";
  position:absolute; top:0; left:16px; right:16px; height:2px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
  opacity:.6;
}
.nav-dropdown-menu a {
  display:block; padding:10px 22px;
  font-family:'Cinzel', var(--serif); font-weight:600; font-size:.76rem; letter-spacing:.04em;
  color: var(--text-dark); text-decoration:none; white-space:nowrap; text-align:left;
  border-bottom:1px solid rgba(168,118,30,.14) !important;
}
.nav-dropdown-menu a:last-of-type { border-bottom:none !important; }
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.current { color: var(--gold-deep); background: rgba(168,118,30,.08); }

/* ===== SEQUENCE NAV — plain text link row for the "Physical Community
   Sequence" strip at the foot of each of the 5 pages. Peter didn't want pill
   buttons here (those stay reserved for the site's main closing-band cross
   links), just quiet text links matching the header nav's own voice. ===== */
.sequence-nav { display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; margin-top:14px; }
.sequence-nav a, .sequence-nav .current-page {
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; padding-bottom:2px; border-bottom:1px solid transparent;
}
.sequence-nav a { color: var(--text-dark); }
.sequence-nav a:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
.sequence-nav .current-page { color: var(--gold-deep); border-bottom-color: var(--gold-deep); opacity:.85; cursor:default; }

@media (max-width:900px) {
  .site-header { align-items:center; text-align:center; }
  .site-header .brand { flex-direction:column; }
  .site-header .brand img.emblem { height: clamp(52px,16vw,80px); }
  .site-header .brand img.wordmark { height: clamp(26px,8vw,40px); }
  .crystal-feature.crystal-banner .banner-wrap img { width: clamp(240px,78vw,380px); }
  /* Everything stays visible on open — no drop-down, no extra tap (Peter's
     preference, 31 Aug 2026). Instead the two logical groups (place/structure
     vs. voice/community) get real breathing room between them, and each
     wrapped line gets a touch more room, so the full 11-link list reads as
     two organised clusters rather than one dense block once it wraps. */
  .site-nav-stack { align-items:center; gap:22px; }
  .site-header .site-nav-text { justify-content:center; flex-wrap:wrap; row-gap:12px; column-gap:18px; }
  .site-header .site-nav-text a { padding:4px 2px; }
}

/* ===== CRYSTAL FEATURE — the same pulsing crystal medallion, cropped directly
   from the Hero artwork, on every Utility page between the banner and the
   title. Same image, same pulse, unchanged page to page — the thread that
   ties these quiet inner pages back to the Hero. Pulse ring reuses the exact
   plaque-pulse rhythm from the Welcome page's crystal glows. ===== */
.crystal-feature {
  position:relative;
  display:flex; justify-content:center; align-items:center;
  padding: clamp(28px,4.5vw,48px) 0 0;
}
.crystal-feature img {
  width: clamp(120px,14vw,190px); height:auto;
  position:relative; z-index:2;
}
.crystal-feature.crystal-banner .banner-wrap {
  position:relative; display:inline-block;
}
.crystal-feature.crystal-banner .banner-wrap img {
  width: clamp(320px,44vw,626px); height:auto; display:block;
}
.crystal-feature.crystal-banner .pulse-ring { display:none; }

/* Pulsation light from the centre of the compass, matching the breath-pulse
   glow used on the Welcome page Hero (css/welcome.css) — same 7-7-7 timing,
   same warm cream/gold bloom, so the emblem breathes the same way wherever
   it appears on the site. Star centre measured on the source artwork at
   ~50% across / ~45% down. */
.crystal-feature.crystal-banner .banner-glow {
  position:absolute; left:50%; top:45%;
  width: clamp(40px,5.5vw,72px); height: clamp(40px,5.5vw,72px);
  transform: translate(-50%,-50%);
  z-index:2; pointer-events:none;
}
.crystal-feature.crystal-banner .banner-glow::before {
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle, rgba(255,253,240,.92) 0%, rgba(255,247,215,.55) 42%, rgba(255,247,215,0) 74%);
  animation: crystal-banner-breath 13s ease-in-out infinite;
}
@keyframes crystal-banner-breath {
  0%     { transform:scale(.8);  opacity:0; }
  33.33% { transform:scale(1.34); opacity:.92; }
  66.66% { transform:scale(1.34); opacity:.92; }
  100%   { transform:scale(.8);  opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .crystal-feature.crystal-banner .banner-glow::before { animation:none; opacity:.35; }
}
.crystal-feature .pulse-ring {
  position:absolute; left:50%; top:50%;
  width: clamp(120px,14vw,190px); height: clamp(120px,14vw,190px);
  transform: translate(-50%, calc(-50% + 9px));
  z-index:3; pointer-events:none;
  mix-blend-mode: screen;
}
.crystal-feature .pulse-ring::before,
.crystal-feature .pulse-ring::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle, rgba(216,164,64,.85) 0%, rgba(216,164,64,.45) 50%, transparent 78%);
  animation: crystal-pulse 15s ease-out infinite;
}
.crystal-feature .pulse-ring::after { animation-delay: 7.5s; }
@keyframes crystal-pulse {
  0%   { opacity:0; }
  22%  { opacity:.85; }
  60%  { opacity:.4; }
  100% { opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .crystal-feature .pulse-ring::before, .crystal-feature .pulse-ring::after { animation:none; opacity:.35; }
}

/* ===== WIDE HERO — the full-width Physical Community sequence banners
   (Property Search, Resonance Healing and Cleansing, Sun Reshel Headquarters,
   Radiation Centres). Same locked-aspect-ratio technique as .fg-hero in
   freedoms-gate.css (2220x769 source, ≈2.89:1) so the image is never cropped
   at any window width. Background image set per-page via inline style since
   each of the four uses a different source file. Title/tagline sit below the
   image in the existing .utility-title/.utility-tagline pattern, rather than
   lettered into the artwork, so wording stays editable without regenerating
   the image. ===== */
.wide-hero {
  position: relative;
  width: 100%;
  max-width: 2220px;
  margin: 0 auto;
  aspect-ratio: 2220 / 769;
  background-size: 100% 100%;
  overflow: hidden;
}
.wide-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;
}
/* Lighter fade for Radiation Centres only — the figures with raised arms sit
   right in the bottom band and were being washed out by the standard fade.
   Lightened again 29 Aug 2026 in the same pass as the base .wide-hero fade above. */
.wide-hero.hero-fade-light::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 76%, rgba(255,255,255,.12) 92%, rgba(255,255,255,.24) 100%);
}

/* ===== PAGE HEAD — quiet, no imagery. A small "return" link, the title, a
   soft italic tagline in the same voice as the Welcome page's essence text. ===== */
.page-shell { max-width: 820px; margin: 0 auto; padding: clamp(48px,7vw,84px) clamp(24px,4vw,40px) clamp(24px,3vw,32px); }

/* 16 Sep 2026 — Peter: increase the gap between the compass/banner emblem and
   the body text by 30% on every page that carries the compass (the 5 Utility
   pages: Return to the Field, Stewardship, Resonances and Inquiry, Offer a
   Love Gift, Terms of Grace). Scoped to only fire when .crystal-banner is the
   immediately preceding sibling, so page-shell's spacing elsewhere on the
   site is untouched. 48/7/84 * 1.3 = 62/9.1/109. */
.crystal-feature.crystal-banner + main.page-shell {
  padding-top: clamp(62px,9.1vw,109px);
}

.utility-title {
  text-align:center;
  font-family:'Cinzel Decorative', var(--serif);
  font-weight:400; font-size: clamp(1.6rem,3.4vw,2.1rem);
  color: var(--text-dark);
  margin-bottom: 10px;
}
.utility-tagline {
  text-align:center; max-width:600px; margin: 0 auto clamp(32px,5vw,48px);
  font-family:var(--serif); font-style:italic; font-size:1.05rem; line-height:1.7;
  color: var(--text-soft);
}

/* ===== PROSE — same italic serif voice as the essence text on the Welcome
   page, with plain uppercase small-caps subheadings in gold. ===== */
.prose { max-width:700px; margin:0 auto; }
.prose p { font-family:var(--serif); font-size:1.15rem; line-height:1.85; color:var(--text-dark); margin-bottom:20px; }
.prose p:first-of-type { font-style:italic; color:var(--text-soft); }
.prose h3 {
  font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold-deep); margin: 34px 0 12px;
}
.prose a { color: var(--gold-deep); text-decoration-color: var(--border); text-underline-offset:3px; }
.prose a:hover { text-decoration-color: var(--teal); }

/* ===== LOVE GIFT BUTTON — same gold-framed pill language as the closing
   band's buttons, sized for a standalone call to action within the prose. ===== */
.love-gift-btn {
  display:inline-block;
  font-family:'Cinzel Decorative', var(--serif); font-size:.8rem; font-weight:400; letter-spacing:.05em; text-transform:uppercase;
  color:#1E4E4C; background:#88DBDF;
  border:1.5px solid var(--gold-deep);
  box-shadow: inset 0 0 0 2px rgba(168,118,30,.22);
  border-radius:24px; padding:12px 32px; text-decoration:none !important;
  transition: background .2s, color .2s;
}
.love-gift-btn:hover { background:#1E4E4C; color:#fff; }
.love-gift-note { text-align:center; font-family:var(--sans); font-size:.7rem; letter-spacing:.06em; color:var(--text-soft); margin-top:10px; }
.love-gift-mark { text-align:center; color:var(--gold-deep); letter-spacing:.4em; margin: 22px 0; }

/* ==========================================================
   CLOSING BAND — restyled 31 Aug 2026 (Peter's call), v2: reversed
   from the ivory-marble/teal-button first pass to a deep emerald band
   with beige/ivory buttons — richer, and gives the buttons somewhere
   to actually stand out. Gold orbs kept, they read well against the
   dark band too.
   ========================================================== */
.closing-band {
  position:relative;
  overflow:hidden;
  background: linear-gradient(90deg, #163837 0%, #1E4E4C 50%, #163837 100%);
  color:#F3E9D2;
  text-align:center;
  padding: clamp(20px,2.6vw,26px) clamp(24px,4vw,64px);
  margin-top: clamp(56px,8vw,96px);
  box-shadow: inset 0 1px 0 rgba(168,118,30,.35);
}
.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(168,118,30,.30));
  pointer-events:none;
}
.cb-orbs { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.cb-orb {
  position:absolute; bottom:4%;
  width: var(--s,5px); height: var(--s,5px);
  border-radius:50%;
  background: radial-gradient(circle, rgba(232,196,120,.95) 0%, rgba(232,196,120,.35) 55%, transparent 76%);
  box-shadow: 0 0 7px 2px rgba(232,196,120,.45);
  opacity:0;
  animation: orb-rise var(--d,9s) ease-in-out infinite;
  animation-delay: var(--delay,0s);
}
@keyframes orb-rise {
  0%   { opacity:0; transform:translateY(0) scale(.6); }
  14%  { opacity:.85; }
  60%  { opacity:.45; }
  100% { opacity:0; transform:translateY(-48px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-orb { animation:none; opacity:.3; }
}
.cb-links { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; margin-bottom:14px; }
/* ===== SOURCE LINKS — the three cross-site credential links (Narayana Joy
   Publishing, Cosmic Christ Academy, IAMOWN), sitting quietly between the
   page nav pills and the copyright line. Deliberately not styled as pill
   buttons like cb-links, so this reads as a footer credit rather than
   primary navigation. Not present on the Welcome page's own closing band
   (css/welcome.css) — Peter's call, kept intentionally clean there. ===== */
.cb-sources { position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-bottom:8px; }
.cb-sources a {
  font-family:var(--sans); font-weight:400; font-size:.71rem; letter-spacing:.06em;
  color:#F3E9D2; text-decoration:none; text-shadow: 0 1px 3px rgba(0,0,0,.25);
  border-bottom:1px solid rgba(243,233,210,.4); padding-bottom:1px;
}
.cb-sources a:hover { border-bottom-color:#F3E9D2; }
.cb-btn {
  font-family:'Cinzel Decorative', var(--serif); font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#12302E; background:#F3E9D2;
  border:1.5px solid var(--gold-deep);
  box-shadow: inset 0 0 0 2px rgba(168,118,30,.22);
  border-radius:20px; padding:8px 22px; text-decoration:none; transition: background .2s, color .2s;
}
.cb-btn:hover { background:var(--gold-deep); color:#12302E; }
.cb-copy { position:relative; z-index:2; font-family:var(--sans); font-weight:400; font-size:.64rem; letter-spacing:.06em; color:#F3E9D2; text-shadow: 0 1px 3px rgba(0,0,0,.25); }