/* ── Arcane Library — Shared Layout Styles ── */
/* Load this file on every subpage. Provides nav, breadcrumbs, footer,
   base typography, scroll utilities, and per-section colour theming.    */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── Design tokens ── */
:root{
  --bg:#0a0a0f;
  --bg-card:#12121a;
  --gold:#d4af37;
  --gold-dim:#b8962e;
  --gold-glow:rgba(212,175,55,.15);
  --text:#e0ddd5;
  --text-dim:#8a8780;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;

  /* Section accent — overrideable per section via data-section="…" */
  --accent:var(--gold);
  --accent-dim:var(--gold-dim);
  --accent-glow:var(--gold-glow);
}

/* ── Per-section themes (Sephiroth) ── */
body[data-section="kether"]{
  --accent:#d8d8e8;
  --accent-dim:#b0b0c8;
  --accent-glow:rgba(216,216,232,.15);
}
body[data-section="chokmah"]{
  --accent:#9e9ebb;
  --accent-dim:#7a7a9e;
  --accent-glow:rgba(158,158,187,.15);
}
body[data-section="binah"]{
  --accent:#8b7eaa;
  --accent-dim:#6b5e8a;
  --accent-glow:rgba(139,126,170,.15);
}
body[data-section="chesed"]{
  --accent:#4a90c8;
  --accent-dim:#3a70a8;
  --accent-glow:rgba(74,144,200,.15);
}
body[data-section="geburah"]{
  --accent:#c84a4a;
  --accent-dim:#a83a3a;
  --accent-glow:rgba(200,74,74,.15);
}
body[data-section="tiphareth"]{
  --accent:#d4af37;
  --accent-dim:#b8962e;
  --accent-glow:rgba(212,175,55,.15);
}
body[data-section="netzach"]{
  --accent:#4a9e6f;
  --accent-dim:#3a7e5f;
  --accent-glow:rgba(74,158,111,.15);
}
body[data-section="hod"]{
  --accent:#e07a3a;
  --accent-dim:#c05a2a;
  --accent-glow:rgba(224,122,58,.15);
}
body[data-section="yesod"]{
  --accent:#8b5cf6;
  --accent-dim:#7c3aed;
  --accent-glow:rgba(139,92,246,.15);
}
body[data-section="malkuth"]{
  --accent:#a0856a;
  --accent-dim:#80654a;
  --accent-glow:rgba(160,133,106,.15);
}

/* ── Per-section themes (other archive sections) ── */
body[data-section="paths"]{
  --accent:#c8a87a;
  --accent-dim:#a88050;
  --accent-glow:rgba(200,168,122,.15);
}
body[data-section="principles"]{
  --accent:#9abccc;
  --accent-dim:#7a9cac;
  --accent-glow:rgba(154,188,204,.15);
}
body[data-section="worlds"]{
  --accent:#5a8fa8;
  --accent-dim:#3a6f88;
  --accent-glow:rgba(90,143,168,.15);
}
body[data-section="planets"]{
  --accent:#c8c87a;
  --accent-dim:#a8a850;
  --accent-glow:rgba(200,200,122,.15);
}
body[data-section="alchemy"]{
  --accent:#c87840;
  --accent-dim:#a85820;
  --accent-glow:rgba(200,120,64,.15);
}
body[data-section="nigredo"]{
  --accent:#8a7880;
  --accent-dim:#6a5860;
  --accent-glow:rgba(138,120,128,.15);
}
body[data-section="albedo"]{
  --accent:#b0bccc;
  --accent-dim:#909cac;
  --accent-glow:rgba(176,188,204,.15);
}
body[data-section="citrinitas"]{
  --accent:#c8a840;
  --accent-dim:#a88820;
  --accent-glow:rgba(200,168,64,.15);
}
body[data-section="rubedo"]{
  --accent:#c85040;
  --accent-dim:#a83020;
  --accent-glow:rgba(200,80,64,.15);
}

/* ── Per-principle themes ── */
body[data-section="mentalism"]{
  --accent:#d0d8e8;
  --accent-dim:#a8b0c8;
  --accent-glow:rgba(208,216,232,.15);
}
body[data-section="correspondence"]{
  --accent:#d4af37;
  --accent-dim:#b8962e;
  --accent-glow:rgba(212,175,55,.15);
}
body[data-section="vibration"]{
  --accent:#4abcbc;
  --accent-dim:#2a9c9c;
  --accent-glow:rgba(74,188,188,.15);
}
body[data-section="polarity"]{
  --accent:#a06ec8;
  --accent-dim:#804ea8;
  --accent-glow:rgba(160,110,200,.15);
}
body[data-section="rhythm"]{
  --accent:#4a80c8;
  --accent-dim:#2a60a8;
  --accent-glow:rgba(74,128,200,.15);
}
body[data-section="cause-and-effect"]{
  --accent:#6ab87a;
  --accent-dim:#4a985a;
  --accent-glow:rgba(106,184,122,.15);
}
body[data-section="gender"]{
  --accent:#c87878;
  --accent-dim:#a85858;
  --accent-glow:rgba(200,120,120,.15);
}

/* ── Per-planet themes (mirrors corresponding Sephirah colours) ── */
body[data-section="saturn"]{
  --accent:#8b7eaa;
  --accent-dim:#6b5e8a;
  --accent-glow:rgba(139,126,170,.15);
}
body[data-section="jupiter"]{
  --accent:#4a90c8;
  --accent-dim:#3a70a8;
  --accent-glow:rgba(74,144,200,.15);
}
body[data-section="mars"]{
  --accent:#c84a4a;
  --accent-dim:#a83a3a;
  --accent-glow:rgba(200,74,74,.15);
}
body[data-section="sun"]{
  --accent:#d4af37;
  --accent-dim:#b8962e;
  --accent-glow:rgba(212,175,55,.15);
}
body[data-section="venus"]{
  --accent:#4a9e6f;
  --accent-dim:#3a7e5f;
  --accent-glow:rgba(74,158,111,.15);
}
body[data-section="mercury"]{
  --accent:#e07a3a;
  --accent-dim:#c05a2a;
  --accent-glow:rgba(224,122,58,.15);
}
body[data-section="moon"]{
  --accent:#9b8bc8;
  --accent-dim:#7b6ba8;
  --accent-glow:rgba(155,139,200,.15);
}
body[data-section="tarot"]{
  --accent:#a87ad4;
  --accent-dim:#8860b4;
  --accent-glow:rgba(168,122,212,.15);
}

/* ── Per-element themes ── */
body[data-section="elements"]{
  --accent:#c87a40;
  --accent-dim:#a85a20;
  --accent-glow:rgba(200,122,64,.15);
}
body[data-section="fire"]{
  --accent:#c84a28;
  --accent-dim:#a82a08;
  --accent-glow:rgba(200,74,40,.15);
}
body[data-section="water"]{
  --accent:#3a78c8;
  --accent-dim:#1a58a8;
  --accent-glow:rgba(58,120,200,.15);
}
body[data-section="air"]{
  --accent:#c8b840;
  --accent-dim:#a89820;
  --accent-glow:rgba(200,184,64,.15);
}
body[data-section="earth"]{
  --accent:#8a6438;
  --accent-dim:#6a4418;
  --accent-glow:rgba(138,100,56,.15);
}

/* ── Base ── */
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}

/* ── Scroll progress bar ── */
#scroll-progress{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:0%;
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  z-index:200;
  transition:width .1s linear;
}

/* ── Navigation ── */
.site-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.7rem 2rem;
  background:rgba(10,10,15,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(212,175,55,.1);
}

.nav-brand{
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:600;
  color:var(--gold);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:.45rem;
  letter-spacing:.04em;
  transition:opacity .25s ease;
}

.nav-brand:hover{opacity:.8}

.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap:1.6rem;
}

/* ── Group dropdown (desktop) ── */
.nav-group{position:relative}

.nav-group-btn{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text);
  transition:color .2s ease;
}

.nav-group-btn:hover{color:var(--gold)}
.nav-group-btn.nav-active{color:var(--accent)}

.nav-submenu{
  display:none;
  position:absolute;
  top:calc(100% + .75rem);
  left:50%;
  transform:translateX(-50%);
  min-width:140px;
  list-style:none;
  background:rgba(10,10,15,.97);
  border:1px solid rgba(212,175,55,.12);
  padding:.4rem 0;
  z-index:200;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Transparent bridge covers the gap between the nav button and submenu,
   preventing hover from breaking when the mouse moves through the gap */
.nav-submenu::before{
  content:'';
  position:absolute;
  top:-.75rem;
  left:-1rem;
  right:-1rem;
  height:.75rem;
}

.nav-group.open .nav-submenu,
.nav-group:hover .nav-submenu{display:block}

.nav-submenu a{
  display:block;
  padding:.55rem 1.2rem;
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s,background .2s;
}

.nav-submenu a:hover{
  color:var(--accent);
  background:rgba(212,175,55,.04);
}

.nav-submenu a.nav-active{color:var(--accent)}

.nav-toggle{display:none}

/* ── Mega-menu panel ── */
.nav-expanded-panel{
  display:none;
  position:fixed;
  top:48px;
  left:0;right:0;
  z-index:99;
  background:rgba(10,10,15,.97);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(212,175,55,.12);
}

.nav-expanded-panel.open{display:block}

.nav-panel-inner{
  display:flex;
  gap:2rem;
  padding:1.4rem 2rem 1.6rem;
  max-width:1000px;
  margin:0 auto;
}

.nav-panel-group{flex:1;min-width:0}

.nav-panel-label{
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-dim);
  padding-bottom:.5rem;
  margin-bottom:.55rem;
  border-bottom:1px solid rgba(212,175,55,.1);
}

.nav-panel-items{list-style:none}

.nav-panel-items a{
  display:block;
  padding:.32rem 0;
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
  transition:color .2s ease;
}

.nav-panel-items a:hover{color:var(--accent)}
.nav-panel-items a.nav-active{color:var(--accent)}

/* ensure subpage content doesn't hide under nav */
main,article,.page-content{
  padding-top:56px;
}

@media(max-width:640px){
  .nav-toggle{
    display:flex;
    background:none;
    border:1px solid rgba(212,175,55,.2);
    color:var(--gold-dim);
    padding:.3rem .6rem;
    cursor:pointer;
    font-size:1.05rem;
    line-height:1;
  }

  /* Hide desktop group labels on mobile */
  .nav-links{display:none}

  /* Mobile panel fills viewport below nav */
  .nav-expanded-panel{
    top:48px;
    bottom:0;
    overflow-y:auto;
  }

  .nav-panel-inner{
    flex-direction:column;
    gap:0;
    padding:.5rem 0;
    max-width:none;
  }

  .nav-panel-group{
    padding:.85rem 2rem;
    border-bottom:1px solid rgba(212,175,55,.07);
  }

  .nav-panel-label{margin-bottom:.4rem}

  .nav-panel-items a{
    padding:.5rem .25rem;
    font-size:.75rem;
  }
}

/* ── Breadcrumbs ── */
.breadcrumbs{
  position:fixed;
  top:48px;left:0;right:0;
  z-index:90;
  padding:.45rem 2rem;
  background:rgba(10,10,15,.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(212,175,55,.06);
}

.breadcrumbs ol{
  list-style:none;
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
}

.breadcrumbs li{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim);
}

/* separator between crumbs */
.breadcrumbs li:not(:last-child)::after{
  content:'→';
  opacity:.35;
  font-style:normal;
  font-size:.65rem;
}

.breadcrumbs a{
  color:var(--text-dim);
  text-decoration:none;
  transition:color .2s ease;
}

.breadcrumbs a:hover{color:var(--accent)}

.breadcrumbs li[aria-current="page"] span{
  color:var(--accent);
}

/* ── Navigator entry link (appears on deep entity pages) ── */
.nav-to-navigator{
  display:block;
  text-align:right;
  padding:.2rem 1.25rem .35rem;
  font-size:.7rem;
  letter-spacing:.05em;
  color:var(--gold,#d4af37);
  text-decoration:none;
  opacity:.55;
  transition:opacity .15s;
}
.nav-to-navigator:hover{opacity:1}

/* When breadcrumbs are present, push content down further */
body.has-breadcrumbs main,
body.has-breadcrumbs article,
body.has-breadcrumbs .page-content{
  padding-top:88px;
}

/* ── Footer ── */
footer{
  text-align:center;
  padding:3rem 2rem;
  border-top:1px solid rgba(212,175,55,.08);
  color:var(--text-dim);
  font-size:.8rem;
  letter-spacing:.06em;
}

footer span{color:var(--accent)}
footer .footer-brand{font-family:var(--serif);color:var(--accent);letter-spacing:.05em;border-bottom:none;}

footer a{
  color:var(--text-dim);
  text-decoration:none;
  border-bottom:1px solid rgba(212,175,55,.2);
  transition:color .2s ease, border-color .2s ease;
}

footer a:hover{
  color:var(--accent);
  border-color:var(--accent);
}

/* ── Back-to-top button ── */
#back-to-top{
  position:fixed;
  bottom:2rem;
  right:2rem;
  width:2.2rem;
  height:2.2rem;
  background:rgba(18,18,26,.9);
  border:1px solid rgba(212,175,55,.2);
  color:var(--gold-dim);
  font-size:1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease,border-color .25s ease,color .25s ease;
  z-index:90;
}

#back-to-top.visible{
  opacity:1;
  pointer-events:auto;
}

#back-to-top:hover{
  border-color:var(--gold);
  color:var(--gold);
}

/* ── Scroll-reveal ── */
.scroll-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);
}

.scroll-reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

.scroll-reveal:nth-child(2){transition-delay:.1s}
.scroll-reveal:nth-child(3){transition-delay:.2s}
.scroll-reveal:nth-child(4){transition-delay:.3s}
.scroll-reveal:nth-child(5){transition-delay:.4s}
.scroll-reveal:nth-child(6){transition-delay:.5s}

/* ── Page header (subpages) ── */
.page-header{
  padding:5rem 2rem 3rem;
  text-align:center;
  position:relative;
}

.page-header::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 60%,var(--accent-glow),transparent 70%);
  pointer-events:none;
}

.page-header .section-glyph{
  font-size:3rem;
  display:block;
  margin-bottom:1rem;
  animation:float 6s ease-in-out infinite;
  filter:drop-shadow(0 0 16px var(--accent-glow));
}

.page-header h1{
  font-family:var(--serif);
  font-size:clamp(2rem,6vw,4.5rem);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--accent);
  line-height:1.1;
}

.page-header .subtitle{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1rem,2.5vw,1.4rem);
  color:var(--text-dim);
  margin-top:.75rem;
}

.page-header .hebrew{
  font-size:2rem;
  color:var(--accent);
  opacity:.5;
  margin-top:.5rem;
  font-family:var(--serif);
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* ── Page content wrapper ── */
.page-content{
  max-width:900px;
  margin:0 auto;
  padding:2rem 2rem 4rem;
}

/* ── Section divider ── */
.divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.15),transparent);
  margin:3rem 0;
}

/* ── Clickable cards / data-href elements ── */
[data-href]{cursor:pointer}

/* ── Related sections strip ── */
.related-sections{
  max-width:940px;
  margin:2.5rem auto 0;
}
.related-sections h2{
  font-family:var(--serif);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  opacity:.5;
  margin-bottom:1rem;
  text-align:center;
}
.related-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
}
.related-link{
  display:flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  padding:.6rem 1rem;
  background:var(--bg-card);
  border:1px solid rgba(212,175,55,.08);
  transition:border-color .25s ease;
  font-size:.8rem;
  color:var(--text-dim);
}
.related-link:hover{
  border-color:rgba(212,175,55,.22);
  color:var(--text);
}
.related-link .r-glyph{
  opacity:.5;
  font-size:1rem;
}

/* ── Accessibility ── */
@media(prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}