/* ==========================================================
   SITE CHROME — the shared open header and closing band, extracted
   from css/utility.css so pages still running on the older css/style.css
   (sanctuaries.html, and eventually the twelve individual Sanctuary
   pages) can carry the same header/footer as the Welcome, Freedom's
   Gate and Utility pages without pulling in utility.css's own
   .page-shell/.prose rules, which would conflict with style.css's
   full-bleed layout. Relies on the --gold-deep / --text-dark / --serif
   / --sans custom properties already declared in style.css's :root —
   no need to redeclare them here.
   ========================================================== */

/* ===== SITE HEADER — identical to utility.css's version. ===== */
.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 — see css/utility.css for the full note; identical restructure
   applied here so the Sanctuary-family pages match. */
.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); }

@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); }
  /* Everything stays visible on open — no drop-down, no extra tap (Peter's
     preference, 31 Aug 2026). Same grouped-breathing-room treatment as
     css/utility.css. */
  .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; }
}

/* ===== NAV DROPDOWN — "12 Reshel Sun Discs" menu, identical to
   utility.css's version, so the Physical Community Sequence is reachable
   from every page on the site, not just the 5 sequence pages. ===== */
.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:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity:1; visibility:visible; transform:translate(-50%,0);
}
.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); }

/* ===== CLOSING BAND — restyled 31 Aug 2026, v2: deep emerald band with
   beige/ivory buttons (Peter's call), see css/utility.css for the full note. ===== */
.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; }
.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); }